CSS 레이아웃은 HTML 요소들의 배치를 의미합니다. 웹 페이지에서 요소를 어떻게 배치할 것인지 결정하는 방법으로 주요한 레이아웃 기법으로는 float , position , flexbox , grid 가 있습니다.
Float 속성을 이용한 레이아웃
float 속성을 사용하여 요소를 좌측이나 우측에 배치할 수 있습니다.
left 로 설정하면 요소가 왼쪽에서 순서대로 배치되고 right 로 설정하면 오른쪽에서 순서대로 배치됩니다.
Position 속성을 이용한 레이아웃
position 속성을 사용하면 요소를 기본적인 흐름에서 벗어나 원하는 위치에 배치할 수 있습니다.
- static : 기본값. 원래 위치에 배치됨
- relative : 원래 위치에서 이동. 원래 자리 차지.
- absolute : 가장 가까운 포지셔닝 조상 요소를 기준으로 배치. 흐름에서 완전히 빠짐.
- fixed : 브라우저 창을 기준으로 고정 위치에 배치. 원래 자리 차지하지 않음
- sticky : 원래 위치에 있다가 스크롤 시 고정됨
z-index 속성
'z-index' 속성은 요소의 z축(앞뒤) 위치를 설정할 때 사용합니다. 값이 클수록 앞쪽에서 배치되며 기본값은 0입니다.
position 속성이 relative , absolute , fixed 인 요소에서만 적용됩니다.
Flexbox 레이아웃
Flexbox 레이아웃은 1차원 방식으로 HTML 요소를 배치하는 방법입니다. 부모 요소인 Flex Container 와
자식 요소인 Flex Item으로 구성됩니다. Flexbox를 사용하면 가로와 세로 방향 중 하나로 요소들을 쉽게 정렬할 수 있습니다.
Flexbox 속성
1. flex-direction : 주축 방향 설정
- row : 왼쪽에서 오른쪽 (기본값)
- column : 위쪽에서 아래쪽
2. flex-wrap : 아이템이 컨테이너를 벗어날 때의 처리
- nowrap : 줄 바꿈 없음(기본값)
- wrap : 줄 바꿈 있음
3. justify-content : 주축 방향으로 아이템 정렬
4. align-items : 교차축 방향으로 아이템 정렬
5. flex-grow, flex-shrink, flex-basis : 아이템의 크기 조정
Grid 레이아웃
Grid 레이아웃은 가로와 세로를 모두 사용하는 2차원 레이아웃 방식입니다. 이를 통해 요소를 규칙적으로 배열하여 일관성 있는 레이아웃을 만들 수 있습니다.
Grid 레이아웃 속성
- grid-template-columns : 컬럼의 크기 설정
- grid-template-rows : 줄의 크기 설정
- gap : 항목 간의 간격 설정
- grid-column-start , grid-column-end : 컬럼 시작 및 종료 라인 설정
- grid-row-start , grid-row-end : 줄 시작 및 종료 라인 설정
- grid-template-areas : 레이아웃을 시각적으로 표현
