CSS에서 다단(multi-column) 레이아웃을 구성할 때 column-width 속성을 사용하면 각 열의 이상적인 너비를 지정할 수 있습니다. 이 속성은 콘텐츠를 여러 개의 열로 나눌 때 각 열이 차지할 최소 너비를 정의하며, 브라우저는 지정된 값에 맞춰 열 개수를 자동으로 조절합니다.
column-width 속성 기본 사용법
아래 예제는 column-width 속성을 활용해 열 너비를 100px로 설정하고, column-count, column-rule-color, column-rule-style 속성과 함께 다단 레이아웃을 구현한 코드입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
column-rule-color: gray;
column-rule-style: dashed;
column-width: 100px;
}
</style>
</head>
<body>
<div class = "demo">
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
</div>
</body>
</html>주요 속성 설명
- column-width: 각 열의 이상적인 너비를 px, em 등의 단위로 지정합니다. 위 예제에서는 100px로 설정되어 있습니다.
- column-count: 콘텐츠를 나눌 열의 개수를 지정합니다. 예제에서는 4개의 열로 나누도록 설정했습니다.
- column-rule-color: 열과 열 사이를 구분하는 구분선(규칙선)의 색상을 지정합니다.
- column-rule-style: 구분선의 스타일을 지정합니다. 예제에서는 점선(dashed)으로 설정했습니다.
참고 사항
column-width와 column-count를 동시에 사용하면, 브라우저는 두 값을 모두 고려하여 실제 열 개수를 결정합니다. 만약 열 개수만 정확하게 고정하고 싶다면 column-count만 사용하고, 반응형 레이아웃처럼 화면 크기에 따라 열 개수가 유동적으로 조정되기를 원한다면 column-width만 사용하는 것이 좋습니다. 또한 축약형인 columns 속성을 사용하면 열 너비와 열 개수를 한 번에 지정할 수 있습니다.