100 lines
2.7 KiB
Markdown
100 lines
2.7 KiB
Markdown
# 멀티 컬럼(Multi-Column) 레이아웃
|
|
CSS 멀티 컬럼(Multi-Column) 레이아웃은 텍스트를 신문이나 잡지처럼 여러 개의 컬럼으로 나누어 표시할 때 사용하는 기능이야.
|
|
|
|
> 그리드(Grid)나 플렉스(Flexbox)와 달리, 주로 텍스트 콘텐츠를 정렬하는 데 최적화되어 있어!
|
|
|
|
| 속성 | 설명 | 옵션 |
|
|
|---|---|---|
|
|
| column-count | 컬럼 개수 설정 |
|
|
| column-width | 컬럼 너비 설정 |
|
|
| column-gap | 컬럼 간격 조정 |
|
|
| column-rule | 컬럼 사이 구분선 |
|
|
| column-span | 컬럼 합치기 | none, all |
|
|
| column-fill | 컬럼 내용 배치 방식 | balance, auto |
|
|
| break-inside | 컬럼 내 줄바꿈 제어 | auto, avoid |
|
|
|
|
## 멀티 컬럼 기본 개념
|
|
멀티 컬럼 레이아웃을 사용하면 컨텐츠를 자동으로 여러 개의 열(column)로 정렬할 수 있어.
|
|
* column-count, column-width를 사용하여 컬럼을 설정!
|
|
|
|
```css
|
|
.container {
|
|
column-count: 3;
|
|
column-gap: 20px;
|
|
} /* 내용이 3개의 컬럼으로 정렬되고, 컬럼 사이 간격은 20px! */
|
|
```
|
|
|
|
## 주요 속성
|
|
|
|
### column-count
|
|
내용을 몇 개의 컬럼으로 나눌지 설정
|
|
```css
|
|
.container {
|
|
column-count: 3;
|
|
} /* 텍스트가 3개의 열로 나뉘어 표시됨! */
|
|
```
|
|
|
|
### column-width
|
|
각 컬럼의 최소 너비를 설정, 자동으로 열 개수 조절
|
|
```css
|
|
.container {
|
|
column-count: 3;
|
|
column-width: 150px;
|
|
} /* 최소 너비 150px을 유지하면서 3개의 컬럼을 생성하려고 시도! */
|
|
```
|
|
|
|
### column-gap
|
|
각 컬럼 사이의 간격을 설정
|
|
```css
|
|
.container {
|
|
column-count: 3;
|
|
column-gap: 30px;
|
|
}
|
|
```
|
|
|
|
### column-rule
|
|
컬럼 사이에 구분선을 추가
|
|
|
|
```css
|
|
.container {
|
|
column-count: 3;
|
|
column-rule: 2px solid gray;
|
|
}
|
|
```
|
|
#### column-rule-width / column-rule-style / column-rule-color
|
|
|
|
### column-span
|
|
특정 요소가 여러 개의 컬럼을 차지하도록 설정
|
|
* none : 기본값 (컬럼 하나만 차지)
|
|
* all : 모든 컬럼을 가로질러 확장
|
|
```css
|
|
h2 {
|
|
column-span: all;
|
|
} /* <h2> 요소가 여러 컬럼을 가로질러 확장됨! */
|
|
```
|
|
|
|
### column-fill
|
|
내용을 컬럼에 어떻게 배분할지 설정
|
|
* balance : 모든 컬럼을 균등하게 채움 (기본값)
|
|
* auto : 한 컬럼을 먼저 채우고 넘칠 경우 다음 컬럼으로 이동
|
|
```css
|
|
.container {
|
|
column-count: 3;
|
|
column-fill: auto;
|
|
} /* 한 컬럼이 가득 차면 다음 컬럼으로 넘어감! */
|
|
```
|
|
|
|
### break-inside
|
|
컬럼이 분할되는 부분에서 특정 요소가 잘리지 않도록 방지
|
|
* auto : 기본값 (자동 줄바꿈 허용)
|
|
* avoid : 컬럼이 나뉠 때 잘리지 않도록 방지
|
|
```css
|
|
h2 {
|
|
break-inside: avoid;
|
|
} /* <h2>가 컬럼이 바뀌는 부분에서 분리되지 않도록 설정 */
|
|
```
|
|
|
|
|
|
|
|
|