728x90
반응형
HTML
<header class="header">
<div class="banner-top">
<a href="#"
>🌸카카오톡 채널 추가 시 <strong>3천원 쿠폰</strong> 즉시 발급🌸</a
>
<div class="close"><strong>X</strong></div>
</div>
<div class="banner-header"></div>
</header>닫기 버튼인 X 버튼도 추가해줌.
( 나중에 자바스크립트로 닫기 해 줄 버튼 )
position: absolute를 사용하여 close 버튼을 배치
@use "reset";
/* 색상 변수 */
$main_color: #f5e44f;
$sub_color: #e33258;
/* header */
.banner-top {
background-color: $main_color;
width: 100%;
padding: 11px;
text-align: center;
font-size: 12px;
display: block; // 나중에 자바스크립트로 건들것
position: relative;
z-index: 5;
.close {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%); //나중에 질문 정리.
cursor: pointer;
}
}position: absolute 사용
<div class="banner-top">
<a href="#"
>🌸카카오톡 채널 추가 시 <strong>3천원 쿠폰</strong> 즉시 발급🌸</a
>
<div class="close"><strong>X</strong></div>
</div>HTML을 살펴보면 close 버튼의 부모는 banner-top
코드 설명
- position: absolute 를 사용한 이유.
.banner-top을 기준점으로 설정: position: relative를 사용하여
.banner-top 요소를 기준점으로 설정.
이제 이 요소의 자식 요소는 이 기준점을 기준으로 배치할 수 있다.자식요소인 close 버튼은 banner-top을 기준점으로 잡고 배치 가능.
.close 버튼의 위치 지정: position: absolute를 사용하여
.close 버튼을 .banner-top을 기준으로 배치.
right: 15px은 .banner-top의 오른쪽 끝에서 15px 떨어진 위치를 의미함.
top: 50%은 .banner-top의 높이의 50% 위치를 의미하며,
transform: translateY(-50%)는 요소의 높이의 50%만큼 위로 이동시켜
세로 중앙에 배치. reset 파일에서 모든 요소에 position: relative를 설정했더라도,
position: absolute를 적용한 .close 버튼은 여전히 가장 가까운 조상 요소인
.banner-top을 기준으로 배치된다.
왜냐하면, .banner-top이 position: relative로 설정되어 있기 때문.
.close 버튼은 .banner-top을 기준으로 right: 15px과 top: 50% 위치에 배치된다.
( 다른 요소들이 모두 position: relative를 가지더라도,
가장 가까운 조상 요소 중 position: relative를 가지는 요소를 기준으로 배치됨.) ( 다른 요소들이 모두 position: relative를 가지더라도,
가장 가까운 조상 요소 중 position: relative를 가지는 요소를 기준으로 배치됨.)
= 가장 가까운 조상 요소 => banner-top
position 설명
Relative Positioning >>
position: relative는 요소를 원래 위치를 기준으로 배치합니다.
요소의 기본 위치는 변하지 않지만,
좌표 속성(top, right, bottom, left)을 사용하여 그 위치에서 이동할 수 있습니다.
---------------------------------------------------------------------------------------
Absolute Positioning >>
position: absolute는 요소를
가장 가까운 position: relative(또는 absolute, fixed, sticky)
"부모 요소"를 기준으로 배치합니다.
만약 그런 부모 요소가 없다면,
absolute는 페이지의 처음(즉, <html> 요소)을 기준으로 합니다.
position: absolute를 사용한 요소는 가장 가까운 조상 요소 중
position 속성이 relative, absolute, fixed, 또는 sticky로 설정된 요소를 기준으로 배치합니다.가장 가까운 position: relative(또는 absolute, fixed, sticky)
"부모 요소"를 기준으로 배치.
float 를 사용하지 않은 이유
float를 사용하여 close 버튼을 오른쪽 끝에 배치하는 방법도 가능.
그러나 float는 때때로 예상치 못한 레이아웃 문제를 일으킬 수 있으므로
Flexbox를 사용하는 것이 더 안정적이고 직관적.
flex를 사용하지 않고
position 속성을 그대로 사용하면서 a 태그와 .close div가 나란히 위치하는 이유
= 둘 다 block 속성을 갖고 있어서 나란히가 안되고 일렬 정렬(아래로 한 줄 정렬)인데 나란히 위치할 수 있는 이유
.banner-top 이라는 컨테이너 안에
a 태그와 .close 라는 두 개의 요소가 있음.
a 태그는 쿠폰에 대한 텍스트를 포함하고 있고, .close는 닫기 버튼.애초에 닫기버튼에 div태그를 썼기 때문에, 밑으로 정렬돼야함.
왜 나란히 위치할까요?
------------------------------------------------------------------------------------
1) position: relative와 position: absolute의 역할:
.banner-top 요소는 "position: relative" 로 설정되어 있습니다.
이는 .banner-top 안에 있는 절대 위치(position: absolute) 요소의 기준점이 됩니다.
.close 요소는 "position: absolute" 로 설정되어 있어서 .banner-top을 기준으로 배치됩니다.
이 때, .close는 right: 15px과 top: 50% 속성을 가지고 있습니다.
이로 인해 .close는 .banner-top의 오른쪽 끝에서 15px 떨어진 위치에 수직 중앙에 배치됩니다.
-------------------------------------------------------------------------------------
2) a 태그의 배치:
a 태그는 기본적으로 인라인 레벨 요소입니다.
.banner-top 안에서 text-align: center 속성에 의해 가운데 정렬됩니다.
하지만 여기서 중요한 점은 .close 요소가 절대 위치로 설정되어 있어서
a 태그와 같은 줄에 있는 것처럼 보이게 된다는 것입니다.
close 요소가 절대 위치로 설정되어 있어서
a 태그와 같은 줄에 있는 것처럼 보이게 된다는 것 >> 하단에 설명
------------------------------------------------------------------------------------
3) 위치의 독립성:
position: absolute로 설정된 .close 요소는 문서의 일반적인 흐름에서 제거됩니다.
이는 다른 요소들이 자신의 위치를 결정할 때 .close 요소의 존재를 고려하지 않는다는 뜻입니다.
따라서, a 태그는 여전히 수평 중앙에 정렬되며,
.close 요소는 부모 요소인 .banner-top의 오른쪽 끝에 배치됩니다.
이렇게 하면 두 요소가 같은 줄에 있는 것처럼 보이게 됩니다.요약
position: absolute로 설정된 요소는 문서의 흐름에서 제거되어,
다른 요소들과의 위치 관계에 영향을 미치지 않습니다.
position: relative는 절대 위치 요소의 기준점을 제공합니다.
따라서 a 태그는 가운데에 위치하고,
.close는 컨테이너의 오른쪽 끝에 위치하여 나란히 보이게 됩니다.close 요소가 절대 위치로 설정되어 있어서
a 태그와 같은 줄에 있는 것처럼 보이게 된다는 것 >>
position 특징
= float 처럼 공중에 뜨는 특징 갖고 있음.
position: absolute로 설정되면, 이 요소는 "떠 있게" 되어 다른 요소들의 배치를 방해하지 않음.
기본 블록 요소의 배치:
HTML에서 div, p, h1 같은 블록 요소는 기본적으로 수직으로 쌓입니다.
즉, 하나의 블록 요소가 다른 블록 요소 아래에 위치하게 됩니다.
------------------------------------------------------------------------
position: absolute의 동작:
position: absolute로 설정된 요소는 문서의 일반적인 흐름에서 제거됩니다.
즉, 이 요소는 마치 "떠 있는" 것처럼 다른 요소들의 배치에 영향을 미치지 않습니다..close의 배치:
.close 요소는 position: absolute로 설정되어 있습니다.
.banner-top 요소가 position: relative로 설정되어 있어서,
.close 요소는 .banner-top을 기준으로 오른쪽 끝에서 15px 떨어진 위치에 배치됩니다.
position: absolute로 설정된 .close 요소는 문서의 흐름에서 제거되기 때문에,(=떠 있는 상태)
다른 요소(a 태그)가 마치 .close 요소가 없는 것처럼 배치됩니다.
즉, a 태그는 가운데에 위치하고, .close 요소는 오른쪽 끝에 배치됩니다.
position: absolute로 인해 .close는 문서 흐름에서 제거되어,
a 태그는 여전히 가운데에 위치합니다.a 요소는 컨테이너 안에서 수평 중앙에 위치.
이렇게 position: absolute와 position: relative의 조합으로 인해
a 태그와 .close 버튼이 같은 줄에 있는 것처럼 보이는 것
banner-top 에도 position:relative,
즉, position 이 있는데, 떠 있는 건 지 >>
.banner-top에 position: relative가 설정되어 있는 것은
position: absolute로 설정된 자식 요소(.close)의 기준점을 설정해주기 위한 것임.
이것은 자식 요소가 배치될 때 기준이 되는 부모 요소를 명확하게 지정해주는 역할일 뿐,
position: relative는 그 자체로는 요소를 떠 있게 만들지는 않는다.
position: relative:
요소의 위치를 일반적인 문서 흐름에서 벗어나지 않게 설정합니다.
요소는 기본 위치에 유지되지만, top, right, bottom, left 값으로 추가적인 이동이 가능합니다.
자식 요소가 position: absolute일 때, 그 기준점이 됩니다..banner-top에 position: relative:
.banner-top 요소는 문서의 일반적인 흐름에서 벗어나지 않고 그대로 위치합니다.
하지만, 자식 요소가 position: absolute로 설정된 경우, 그 자식 요소의 배치 기준이 됩니다position: absolute:
요소를 문서 흐름에서 제거하여, 다른 요소들이 그 공간을 인식하지 못하게 합니다.
가장 가까운 조상 요소 중 position: relative, position: absolute, position: fixed가
설정된 요소를 기준으로 배치됩니다..banner-top에 text-align: center; 이거로 a 태그를 중앙 정렬 할 수 있는 이유
text-align: center; 속성을 적용하면,
그 안에 포함된 인라인 레벨 요소들(텍스트와 인라인 요소)을 수평 방향으로 가운데 정렬
text-align: center; 란?
text-align: center;는 CSS 속성으로, 해당 요소 안의 텍스트와 인라인 요소의 가로 정렬을 조정합니다.
이 속성은 블록 레벨 요소에 적용할 수 있으며, 텍스트의 가로 정렬 방향을 지정합니다.text-align 속성의 작동 방식:
text-align: center;는 해당 요소 안의 텍스트와 인라인 요소의 가로 정렬을 조정합니다.
블록 레벨 요소에 적용할 경우, 그 요소 안의 모든 텍스트와 인라인 요소가 가운데 정렬됩니다.*블럭요소(block element)와 인라인요소(inline element)란?
- 블럭요소 : 하나의 태그가 브라우저에서 좌우공간을 다 차지하면서
독립적인 덩어리 공간을 가지는 요소들입니다.
- 인라인요소 : 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여
좌우로 다른 태그가 나란히 위치할 수 있는 요소들입니다.
행 안의 일부분이라고 보시면 됩니다. 텍스트레벨요소라고도 합니다.
*블럭요소(block element)와 인라인요소(inline element)의 종류
- 블럭요소 : <div>,<table>,<h1>~<h6>,<p>,<form>,<ul>,<ol>,<li>,<dl>,<dt>,<dd>,<pre>,<blockquote>등
- 인라인요소 : <span>,<a>,<br>,<em>,<strong>,<input>,<label>,<img>
참고 사이트: https://sdsupport.cafe24.com/reference/html/block-inline.html
스마트디자인 서포트
sdsupport.cafe24.com
<a> 태그와 <div> 태그가 나란히 정렬되지 않은 이유
<a> 태그는 기본적으로 인라인 요소이기 때문에 다른 인라인 요소나 텍스트와 나란히 배열됨.
하지만 <div> 태그는 기본적으로 블록 레벨 요소(block-level element)이기 때문에
한 줄을 모두 차지하고 다음 요소는 다음 줄에 위치함.
<a> 태그와 <div> 태그는 서로 다른 레벨의 요소이기 때문에 한 줄에 나란히 배치되지 않음.
이를 해결하려면 <div> 태그를 인라인 요소로 변경하거나,
<a> 태그를 블록 레벨 요소로 변경하는 등의 방법을 사용해야 한다.
Flexbox 사용 예제
@use "reset";
/* 색상 변수 */
$main_color: #f5e44f;
$sub_color: #e33258;
/* header */
.banner-top {
background-color: $main_color;
width: 100%;
padding: 11px;
font-size: 12px;
display: flex; /* Flexbox 레이아웃 사용 */
justify-content: center; /* 요소들을 가운데 정렬 */
align-items: center; /* 요소들을 수직 중앙 정렬 */
position: relative; /* .close 버튼의 기준점 설정 */
}
.banner-top a {
flex-grow: 1; /* a 태그가 가능한 공간을 모두 차지하게 함 */
text-align: center; /* 텍스트를 가운데 정렬 */
}
.close {
position: absolute; /* .banner-top을 기준으로 배치 */
right: 15px; /* 오른쪽 끝에서 15px 떨어짐 */
top: 50%; /* 세로 중앙 정렬 */
transform: translateY(-50%); /* 세로 중앙 정렬 */
cursor: pointer; /* 마우스 커서 포인터로 변경 */
}728x90
반응형
'> 포트폴리오 > wiggle wiggle' 카테고리의 다른 글
| [SASS] aside 메뉴 만들기 ( position 사용 ) (0) | 2024.06.23 |
|---|---|
| [SASS] 로고와 메뉴바 위치 지정하기 (display:flex) (0) | 2024.06.21 |
| [SASS] 상단 바 만들기 (0) | 2024.06.18 |
| [CSS] 메뉴 바 만들기 (1) - 이미지 사이즈와 맞추기, 이미지 여백 없애기 (0) | 2024.04.16 |
| [CSS] 로고 위치 조정하기 - position 으로 띄우기 (0) | 2024.04.16 |
