[1220 테킷] vw, 콘테이닝 블록, z-index

vw의 등장

CSS에는 절대 길이 단위, 상대 길이 단위가 있다. vw는 상대 길이에 해당.

상대 길이 단위는 다른 요소 (상위 요소의 글꼴 크기 or viewport 크기)와 관련이 있다. 

vw(viewport-width): 뷰포트의 초기 컨테이닝 블록 너비 1%와 같다.

height, font-size, box-shadow등 다양한 프로퍼티에서 사용가능하다. 

height에서 vw를 사용하면 반응형웹에 유용하게 사용할 수 있는 단위이다. 다양한 화면 크기에서 일관된 디자인을 유지할 수 있다. 

보시다시피 글자 header의 width값을 기준으로 계산하여 반영한다.

padding-top: %는 컨테이닝 블록 너비 기준 (vw 대체할 수 있다.)

 

콘테이닝 블록(containing block)

element의 위치나 사이즈는 containing block에 의해 영향을 받는다. 감싸고 있는 애를 찾으면 된다.

<div>

 <span>안녕하세요</span>

</div>

<span>의 컨테이닝 블록은 <div>

그렇다고 컨테이닝 블록이라는 것이 아무나 되는 것은 아니고, 식별하는 방법이 있다.

일단 기본 containing block은 html이다. 

position이 absolute라면, 콘테이닝 블록은 직계 조상의 패딩 박스 내부를 의미한다.

fixed는 viewport이다. 

 

+

background-size: cover(주어진 사이즈를 덮어주는 것), contain(전체 이미지를 보여주는 것)

cover에서 위아래로 넓어질지, 양옆으로 넓어질지는 기존의 이미지 비율에 따라 달라진다.

background-size: 100% 100%; (비율이 깨지더라도 배경화면으로 넣어주는 것.하지만 비율이 깨지기 쉽기 때문에 별로.)

<span> selector 개념으로 선택을 할 수가 있다. 

pseudo-element는 inline-element이다.

 

z-index

1. 현재 쌓임 맥락에서 자신의 위치

2. 자신만의 쌓임 맥락 생성 여부.

쌓임 맥락(stacking context)이란? 가상의 z축을 사용한 HTML 요소의 3차원 개념화이다.

body 자체가 쌓임 맥락이다. body 뒤로 갈 순 없다. 왜냐하면 부모요소이기 때문이다. 형제들에 대해 상대적으로 앞서거나 뒷 설 수 있을 뿐이다.

position relative를 부여했다고 해서 쌓임맥락이 형성되는 건 아니다. z-index가 생기면 개념이 생기는 것. 또한, relative가 뜬다고 해서, 쌓임맥락이 된다는 것도 아님. 그 개념을 구분할 줄 알아야 한다. 

z-index: 999;

절대 위를 점령한다는 뜻. 실무에서도 주로 사용한다. 근데 부모를 확인해야한다. 무조건 제일 앞으로 오는게 아닐 수 있다. 

 

 

.header {

background-image: url(images/cover_2.png);

background-size: cover;

background-position: center;

color: white;

min-height: 40vw;

display: flex;

align-items: flex-end;

justify-content: center;

position: relative;

z-index: 1;

}

.header::before {

content: ' ';

background-color: black;

opacity: 0.5;

position: absolute;

inset: 0;

left: 0;

padding: 20px;

z-index: -1;

}

 

.history-item {

box-shadow: inset 0 0 20px lime;

width: 50%;

}

.history-item:nth-child(even){

margin-left: auto;

}

 

 

 

새로운 

width: calc( 50% - 80px );

작성시 가로 양 옆에 띄어쓰기는 필수

 

 

 

 

---

 

가상요소로 긴 줄을 하나 만들고, 가운데에 position:absolute로 길게 까는 부분에서 자유도가 훨씬 많이 와닿았다. 

오늘 수업은 실습이 좀 힘들었다. 아는 내용인데도 다양하게 적용할 수 있고, 정말.. 학습할 수록 부족함을 많이 발견하는 것 같다. 그래서 오늘은 좀 비교도 했는데, 그러지 말고 그냥 묵묵히 쌓아가기로 했다. 그러다보면 언젠간 터득한 내 자신이 있을테니까.