1. 레이아웃 (Layout) 이란?
ㅇ 웹페이지 내 구성 요소들의 공간적 위치를, 효율적/효과적으로 배열시키는, 자리 배치
2. [CSS 레이아웃] CSS에 의한, 요소 모양, 배치 및 레이아웃 관련 속성들
ㅇ 기본 유형 제어 : display ☞ display 참조
- 주로, `요소 모양` 및 `레이아웃`의 지정/조정을 위함
- 기본 유형 종류 : { display : (block, inline, inline-block, none, table, flex, grid 등) }
ㅇ 기존 레이아웃 방법 : (아래 여러 기능들을 조합시켜, 복잡하게 구현함)
* (즉, 레이아웃 전용의 CSS가 없어, float, position 등을 사용하여, 꽤 복잡하게 구현하게 됨)
- 요소(박스)의 위치 지정 : position, left/right/top/bottom ☞ 요소 위치 지정 참조
- 요소(박스)의 유동 배치 : float ☞ 요소 부유화(float) 참조
- 요소(박스)의 수직 제어 : z-index
- 요소(박스)의 보이기/숨김 제어 : visibility
- 요소(박스)의 크기 조정 : box-sizing ☞ CSS 박스 모델 참조
- 요소(박스)의 넘침 제어 : overflow ☞ CSS 박스 모델 참조
- 요소(박스)의 정렬 : ☞ CSS 정렬 참조
. (CSS 박스 모델 내 요소들의 수평 정렬, 수직 정렬, 중앙 정렬, 이미지 정렬)
ㅇ 신규 레이아웃 방법 : (꽤 단순하게 구현 가능)
* (아래와 같이, 레이아웃 전용의 CSS 제공)
- 멀티 컬럼 레이아웃 : column-count, column-width
. 긴 텍스트의 다단 컬럼 나누기를 위함
- 1차원 레이아웃 : (display : flex) ☞ Flexbox 참조
. 박스들을 유연하게, 행 또는 열 형태로써, 무리짓게 하여 배치
- 2차원 레이아웃 : (display : grid)
. 수평 줄과 수직 열을, 격자 처럼 구분하며, 동시에 제어 가능
.. grid-template-columns
.. grid-column-start, grid-column-end, grid-row-start, grid-row-end
.. grid-gap, column-gap, row-gap
.. grid-area