쌓임맥락, background size, 비율이 유지되는 요소 만들기 렛츠고
쌓임 맥락 (stacking context)
- 가상의 Z축을 사용한 HTML 요소의 3차원 개념화
mdn에 정의된 내용은 넘 어렵지만 ! 결국 HTML 요소를 포토샵의 레이어로 개념화하겠단 뜻이다.
아래 표시된 특정 프로퍼티가 요소에 적용되면 요소를 3차원의 개념으로 볼 수 있게 된다.
position : absolute, relative이고 z-index: auto가 아님position : fixed, stickyflex item이고 z-index: auto가 아님grid item이고 z-index: auto가 아님opacity가 1보다 작음mix-blend-mode: normal이 아님- 다음 항목 중 none이 아님
transform,filter,backdrop-filter,perspective,clip-path,mask will-change의 값
z-index
- Z축 순서를 지정, 더 큰 z-index값을 가진 요소가 작은 값을 가진 요소 위를 덮음
- 초기값 : auto
z-index는 쌓임 맥락에서 쌓임 순서를 지정하는데 사용한다.
여러 개의 요소가 화면상 겹쳐있을 때, 어떤 요소가 위에 나타날지 결정할 수 있다.
z-index 값은 정수인데 음수, 0, 양수 모두 가능하다.
기본적으로 static이 아닌 position 값이 지정되어 있는 경우에 사용할 수 있다.
위의 position, flex, grid 외의 경우에 z-index를 지정하기 위해선 static 외의 position 설정이 필요하다.
위치 지정 요소(position이 static이 아닌 가장 가까운 조상)에 z-index 값이 부여되어 있다면 위치 지정 요소의 자손은 해당 z-index가 우선된다. 아래 예시를 통해 살펴보자.
쌓임 맥락 이해하기
<div id="n1"></div>
<div id="n2"></div>
<div id="n3">
<div id="n4"></div>
<div id="n5"></div>
<div id="n6"></div>
</div>DIV#1 vs DIV#4
z-index: 5인 1번이 z-index: 6인 4번을 이겼다.
이유는, 4번의 위치 지정 요소인 3번 z-index가 4이기 때문이다.
결국 이건 1번과 4번의 대결이 아닌, 1번과 3번의 대결이라고 할 수 있다.
1번과의 대결에서 진 '3번과 3번의 모든 자손'은 1번 보다 위로 떠오를 수 없다.
DIV#2 vs DIV#5
z-index: 1인 5번이 z-index: 2인 2번을 이겼다.
역시 위와 같은 이유이다. 5번의 위치 지정 요소인 3번과 2번의 대결인 것 !
3번과의 대결에서 진 '2번'은 3번 보다 위로 떠오를 수 없다.
background-size
contain이미지를 자르거나 늘리지 않고 컨테이너 내에서 이미지 크기를 최대한 크게 조정cover이미지의 비율을 유지하면서 컨테이너를 채울 수 있는 가장 작은 크기로 빈공간 없이 조정
contain
너비 > 높이 라면, 이미지의 가로가 짤리지 않고 다 보일 수 있도록 컨테이너에 이미지를 배치한다.
너비 < 높이 라면, 이미지의 세로가 짤리지 않고 다 보일 수 있도록 컨테이너에 이미지를 배치한다.
이미지의 비율과 컨테이너의 비율이 같지 않다면, 필수적으로 여백이 생긴다.
cover
그와 달리, cover는 이미지 비율과 컨테이너 비율이 달라도 여백 없이 사이즈를 조정한다.
아래 이미지, 너비 < 높이 인 경우, 여백이 생길 수 있는 컨테이너 너비에 꽉 맞게 조정하느라 이미지가 contain보다 확대되어 보인다. 위와 같은 이유로 보통 cover를 더 자주 사용한다. 하지만 비율에 따라 이미지가 많이 깨져보일 수 있으니 주의해야 한다.
비율이 유지되는 요소
??? : 반응형에서 header 비율이 무.족.건 유지되게 해주세요.
나 : 아 넘 쉽죠 ^^ 2가지 방법 있는데 다 보여드릴게요.
⬆️ 밥덩어리 쿵야의 역사 가보자고 !
1. vw
추후 데이터가 늘어날 수 있으니 높이를 지정할 땐 min-height로 설정한다.
이때 min-height의 단위를 vw를 사용하면, 반응형에서 비율이 유지되는 요소를 만들 수 있다.
vw는 상대 길이 단위로 다른 요소와 관련하여 비례하여 조정되도록 사용할 수 있다.
요소의 글꼴 크기와 비례하여 조정되던 em이 있었다면, vw는 뷰포트 초기 컨테이닝 블록 너비에 비례한다.
100vw는 뷰포트 전체, 50vw는 뷰포트의 절반이라고 생각하면 쉽다.
그래서 위의 예시에서 비율이 유지되게 만들기 위해선, min-height: 140vw를 설정한다.
여기서 ! 뷰포트 너비와 비례한 단위라고 해서 width와 관련된 프로퍼티에 쓸 수 있는건 아니다.
font-size, height 등 px을 사용할 수 있는 모든 프로퍼티에 사용이 가능하다.
2. padding: n%
1번 방법(min-height)과 다르게 header에 padding-top을 부여하는 방법도 있다.
이때 ! 아주 중요한 킥 포인트는 % 단위를 사용하는 것이다.
padding의 %는 컨테이닝 블럭의 너비 기준으로 %가 계산된다.
컨테이닝 블럭 너비가 100px인 경우, 자식에 padding: 10%를 적용하면 10px씩 패딩이 들어가는 것 !
굳이 vw를 안써도 vw를 쓴 것 같은 효과가 발생한다 !
상대 길이 단위 사용하기
반응형 웹을 만들 때 vw, %와 같은 상대 길이 단위를 사용하면, 작업 시간이 드라마틱하게 줄어든다.
@media screen and (width: 600px) <- 요런 미디어 쿼리 구간 설정을 세세하게 하지 않아도 되고 구간이 달라질 때마다 px값을 수정하지 않아도 되기 때문 !
이전에 나왔던 rem 을 사용하거나, 최소/최대값을 설정하는 clamp() 를 같이 사용하면
"뭐야 신입 벌써 일을 다했대; 업무 분장 필요하신 분?"의 신입을 맡을 수 있습니다. (^^) 일을 안하진 않음 ㅎ
오늘도 역시 새로 알게된 내용이 많다 !
z-index로 인해 쌓임 순서가 달라지는 내용을 약간 있어보이게 설명할 수 있게 되었고
어떻게 항상 헷갈려서 cover만 냅다 주던 background-size도 명확하게 구분하게 되었다 !
패딩에 사용된 %가 컨테이닝 블록 (발록 아님) 너비 기준이라니 .. 이건 아마 평생 모를 뻔 ~
금욜쓰는 휴강이니까 ! 목욜 하루 힘내보자고 ~ 전 낼 저녁에 닭갈비를 먹을 예정입니다. (TMI)
