CSS 레이아웃 모드(layout mode, 가끔 layout으로 줄여 씀)는 형제(sibling) 및 조상(ancestor) 박스와 상호 작용하는 방식을 기반으로 박스의 위치와 크기를 결정하는 알고리즘입니다. 그 중 몇 가지입니다:
- 블록 레이아웃(block layout), 문서 배치를 위해 설계됨. 블록 레이아웃은 요소(element)를 float 하거나 여러 단(multiple columns)에 걸쳐 배치하는 기술 같은 문서 중심 기능을 포함합니다.
- 인라인 레이아웃(inline layout), 텍스트 배치를 위해 설계됨.
- 테이블 레이아웃(table layout), 표 배치를 위해 설계됨.
- 위치지정 레이아웃(positioned layout), 다른 요소와 상호 작용이 많이 없는 요소의 위치지정을 위해 설계됨.
- 신축 박스 레이아웃(flexible box layout), 부드럽게 크기조정이 될 수 있는 복잡한 페이지 배치를 위해 설계됨.
- 그리드 레이아웃(grid layout), 고정된 격자(grid)에 상대적인 요소 배치를 위해 설계됨.
주의: CSS 속성(CSS properties) 모두가 모든 레이아웃 모드에 적용되지는 않습니다. 속성 대부분은 한 두 모드에 적용되고 속성이 다른 레이아웃 모드에 참여하는 요소에 설정되면 효과가 없습니다.
참조
- CSS Key Concepts: CSS syntax, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, used and actual values. Definitions of value syntax, shorthand properties and replaced elements.