CSS3 다중 열(Multi-Column) 속성이란?
CSS3는 신문이나 잡지처럼 텍스트를 여러 개의 열로 나누어 배치할 수 있는 다중 열 레이아웃(Multi-Column Layout)을 지원합니다. float나 flexbox 같은 복잡한 기법 없이도 속성 몇 가지로 자연스러운 신문 스타일의 텍스트 흐름을 만들 수 있어, 긴 본문이나 기사 형태의 콘텐츠를 배치할 때 특히 유용합니다.
주요 다중 열 속성 한눈에 보기
다중 열 레이아웃에서 가장 많이 사용되는 속성은 아래 표와 같습니다.
| 속성 | 설명 |
|---|---|
| column-count | 요소를 나눌 열의 개수를 지정합니다. |
| column-fill | 열을 어떤 방식으로 채울지 결정합니다. (auto: 순서대로 채움, balance: 균형 있게 분배) |
| column-gap | 열과 열 사이의 간격을 지정합니다. |
| column-rule | 열 사이 구분선의 너비·스타일·색상을 한 번에 지정하는 단축(shorthand) 속성입니다. |
| column-rule-color | 열 구분선의 색상을 지정합니다. |
| column-rule-style | 열 구분선의 스타일(solid, dashed, dotted 등)을 지정합니다. |
| column-rule-width | 열 구분선의 두께를 지정합니다. |
| column-span | 요소가 하나의 열에만 표시될지, 아니면 모든 열에 걸쳐 표시될지 지정합니다. (none / all) |
기본 사용 예제
아래 예제는 텍스트를 3개의 열로 나누고, 열 사이에 40px 간격과 연회색 구분선을 추가하는 코드입니다.
.newspaper {
column-count: 3;
column-gap: 40px;
column-rule: 1px solid #ddd;
}
.newspaper h2 {
column-span: all;
}HTML에서는 해당 클래스를 컨테이너에 적용하기만 하면 됩니다.
<div class='newspaper'>
<p>여기에 긴 본문 텍스트가 들어갑니다.</p>
</div>브라우저 호환성 팁
대부분의 최신 브라우저는 다중 열 속성을 접두사 없이 지원하지만, 구형 브라우저(특히 Internet Explorer 9 이하)까지 고려한다면 -webkit-, -moz- 같은 벤더 접두사를 함께 작성하는 것이 안전합니다. 또한 반응형 웹에서는 미디어 쿼리와 함께 column-count 값을 조절하면 화면 크기에 따라 최적의 가독성을 유지할 수 있습니다.