CSS3 column-count 속성이란?
CSS3의 다중 열(multi-column) 레이아웃 모듈에 포함된 column-count 속성은 하나의 요소 안에 있는 콘텐츠를 몇 개의 열로 나누어 배치할지 그 개수를 지정하는 속성입니다.
신문이나 잡지처럼 텍스트가 여러 열에 걸쳐 자연스럽게 흐르는 레이아웃을 CSS만으로 간단하게 만들 수 있어, 긴 본문 콘텐츠의 가독성을 높이고 싶을 때 특히 유용합니다.
사용할 수 있는 값
- <숫자> : 요소를 나눌 이상적인 열의 개수를 직접 지정합니다.
- auto : column-width 등 다른 속성 값에 따라 열 개수가 자동으로 결정됩니다(기본값).
column-count 속성 활용 예제
다음 코드를 실행하면 column-count 속성을 사용해 요소의 콘텐츠를 4개의 열로 나누는 결과를 확인할 수 있습니다.
<html>
<head>
<style>
.multi {
/* 열 개수(column-count) 속성 */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* 열 사이 간격(column-gap) 속성 */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
/* 열 구분선 스타일(column-rule-style) 속성 */
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
</style>
</head>
<body>
<div class = "multi">
Tutorials Point originated from the idea that there exists a class of readers who respond
better to online content and prefer to learn new skills at their own pace from the comforts
of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and
elated by the response it generated, we worked our way to adding fresh tutorials to our
repository which now proudly flaunts a wealth of tutorials and allied articles on topics
ranging from programming languages to web designing to academics and much more.
</div>
</body>
</html>실행 결과
코드를 실행하면 텍스트가 4개의 열로 균등하게 나뉘고, 열 사이에는 40px의 간격과 함께 실선(solid) 스타일의 구분선이 표시되는 것을 확인할 수 있습니다.
함께 알아두면 좋은 관련 속성
- column-gap : 열과 열 사이의 간격을 지정합니다.
- column-rule-style : 열 사이 구분선의 스타일(none, solid, dashed, dotted 등)을 지정합니다.
- column-width : 각 열의 너비를 지정하며, column-count 대신 사용하면 화면 크기에 따라 열 개수가 조절되는 반응형 레이아웃을 만들 수 있습니다.
- column-span : 제목처럼 특정 요소가 여러 열에 걸쳐 표시되도록 설정합니다.
브라우저 호환성 참고 사항
예제에서 -webkit-, -moz- 같은 벤더 접두사가 붙어 있는 이유는 구버전 브라우저에서도 다중 열 속성이 정상적으로 동작하도록 하기 위해서입니다. 현재 Chrome, Firefox, Safari, Edge 등 주요 브라우저는 표준 문법인 column-count를 모두 지원하므로, 최신 환경에서는 접두사 없이 사용해도 무방합니다.