요소의 화면 출력 속성, 배치, 쌓임 순서를 지정하는 방법을 알아봅니다.
🖍️ 화면 출력 display
요소의 화면 출력(보여짐) 특성
각 요소에 이미 지정되어 있는 값
block: 상자(레이아웃)요소inline: 글자 요소inline-block: 글자+상자 요소 (가로/세로값을 지정할 수 있는 글자요소)display: block;: 인라인 요소를 블록요소처럼 사용하기 위해 사용
따로 지정해 사용하는 값
flex: 플렉스, 박스 (1차원 레이아웃)grid: 그리드 (2차원 레이아웃)none: 보여짐 특성 없음, 화면에서 사라짐
기타 : tabel, table-row, table-cell 등...
🖍️ 배치 Position
요소의 위치 지정을 위한 기준을 작성하는 속성. 기준을 잡은 후 위치를 잡는다.
-
static: 기준없음 / 배치할 수 없는 상태 (기본값) -
relative: 요소 자신(원래 있었던 자리)을 기준으로 설정값만큼 이동
다음 형제 요소가 있더도 자신이 있던 자리로 당겨지지 않고 시각적으로 비어있게 됨
일반적인 레이아웃에서는 비정상적인 구조이기 때문에 자기자신의 배치용도로는 잘 사용하지 않음.하위요소에 포지션 absolute가 있고, 자신을 기준으로 하위요소를 배치하고 싶을 때 쓰임
즉, 구조상의 부모요소가 위치상의 부모요소가 되기 위해 포지션값을 부여하는 용도 -
absolute: 제일 많이 사용 / 위치 상 부모요소를 기준으로 배치
부모요소만을 고려해서 배치되기 때문에 형제요소와 상호작용하지 않게 됨.
1, 3번 형제요소가 있다면, 1과 3이 붙게되고 2는 3 위로 공중에 붕 떠있게 됨
위치상 부모요소 (position 값이 static(=없음)이 아닌 것이 지정된 상위요소)를 찾아 그 기준으로 배치됨.
모든 상위요소의 position 값이 없을 경우 뷰포트를 기준으로 배치 -
fixed: 뷰포트(브라우저)를 기준으로 배치
배치 기준이 바뀌기 때문에 주면 아이템(형제요소)와 상호작용하지 않고 붕 떠있게 됨
화면 스크롤이 내려가도, 같은 자리에 고정되어 있어 계속 볼 수 있음.
스크롤을 움직여도 고정시킬 화면 헤더, 배너 등에 많이 쓰임.position 속성의 값으로 absolute, fixed 가 지정된 요소는 display 속성이 자동으로 block으로 변경됨. (별도로 display:block을 안 넣어도)
🖍️ 요소 쌓임 순서 stack order
어떤 요소가 사용자와 더 가깝게(위에) 쌓이는지 결정
첫 조건부터 순서대로 확인한다. 첫 조건을 충족한다면 뒷 내용은 안 봄
<조건>
1. 요소에 position 속성의 값이 있는 경우 위에 쌓임 (기본값 static 제외)
2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
3. 1번과 2번 조건이 같은 경우, HTML구조로 더 나중에 작성되어 있을수록(다음 구조일수록) 위에 쌓임.
z-index: 요소의 쌓임 정도를 지정auto: =0 / 기본값 / 구조상의 부모요소와 동일한 쌓임 정도숫자: 숫자가 높을 수록 위에 쌓임
음수 사용 가능 (일반적으로 기본값보다 뒤로 보내기 위해 -1까지만 사용함)
일반적으로 1부터 하나씩 증가시켜 사용함.
position과 같이 사용하는 css속성들은 모두 음수사용 가능
요소의 각 방향별 거리 지정, 기본값은 auto(브라우저가 계산)
top, bottom, left, right, z-index