CSS 레이아웃 배치

display

inline, block, list-item, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, tabel-caption, none, inherit

Lv3에서 새로 추가된 값들

run-in, flow, flow-root, flex, grid, ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container, contents, inline-table, inline-flex, inline-grid

• positin: absolute | fixed나 float: left | right인 경우 강제적으로 display: block이 된다.
• hidden이라는 속성을 사용할 수도 있다. (<p class="desc" hidden>)

flow-root

• 블록 컨테이너가 된다.
• 포함 콘텐츠는 새 블록 문맥(block formatting context)가 된다.
• float, margin 속성을 다르게 처리
• 블록이 된다.
• 포함한 float 요소는 컨테이너 끝에서 clear가 된다.
• 부모 자식 요소의 수직 마진을 병합하지 않는다.

flex

• flex 컨테이너 박스를 생성한다.
• flex 형식 문맥을 형성한다.
• 포함 아이템을 1차원 기반으로 배치.

grid

• grid 컨테이너 박스를 생성한다.
• grid 형식 문맥을 설정한다.
• 포함 아이템을 2차원 기반으로 배치.

position

static

• left, right, top, bottom, z-index (X)
• 배치기준 없음. 흐름에 따라 배치.

relative

• left, right, top, bottom, z-index, inset (O)
• 박스 현재 위치가 배치의 기준.
• 배치를 변경할 때 다른 박스의 흐름을 깨지 않음.
• 자식 또는 자손 요소의 absolute 배치 기준이 됨.
• inset: 4개의 값을 입력할 수 있다. 하나만 입력하면 네곳을 하나의 값으로 함.

absolute

• left, right, top, bottom, z-index, inset (O)
• 일반적인 흐름에서 완전히 이탈.
• 부모, 형제의 크기나 위치에 전혀 영향을 미치지 않음.
• 조상 박스가 relative, absolute, fixed, transform일 때 조상 기준으로 배치.
• inset:0, margin:auto를 이용하면 박스가 가운데에 온다.

fixed

• left, right, top, bottom, z-index, inset (O)
• 뷰포트가 배치 기준.
• 조상 요소에 transform 속성이 있으면 transform 속성이 있는 요소가 배치 기준.

sticky

• left, right, top, bottom, z-index, inset (O)
• 스크롤 포트가 배치 기준
• 부모 요소가 스크롤 포트에 보이는 동안 스크롤 포트 기준으로 고정
• 부모 요소가 스크롤 밖으로 이탈하면 고정을 멈춤

---

REFERENCE
패스트 캠퍼스 The RED : 견고한 UI 설계를 위한 마크업 가이드 _ 정찬명 강사님