[6주차] 2022 여름방학 HTML & CSS 세미나 정리

✏️ z-index

→ 쌓임 맥락(Stacking context)

자식 엘리먼트들의 z-index 속성 값은 부모 안에서만 의미를 가진다

부모 엘리먼트의 쌓임 맥락을 구성하는 하나의 단위

부모가 가지고 있는 z-index 값이라는 기본 속성이 낮으면 자식의 z-index값이 높아도 부모의 쌓임 순서에 따른다

→ position 속성을 이용하면 요소를 겹치게 놓을 수 있다

→ 이 요소들의 수직 위치를 z-index 속성으로 정한다

→ 숫자가 클수록 위로, 작을수로 아래로, 기본값_0

 

 

 

✏️ outline

→ border가 테두리라고 한다면 outline은 border의 바깥 외곽선을 말한다

→ outline의 선 너비는 레이아웃에 관여하지 않고 눈에만 선이 보인다

 

 

 

✏️ display: inline-flex

→ display: flex로 지정된 flex container는 block 요소와 같은 수직 쌓임을 가진다

→ display: inline-flex로 지정된 flex container는 inline block 요소와 같은 수평 쌓임을 가진다