CSS에서 columns 속성은 column-width와 column-count를 한 번에 지정할 수 있는 약식(shorthand) 속성입니다. 이 속성 하나만으로 텍스트를 여러 단으로 나누는 다단(multi-column) 레이아웃을 손쉽게 구현할 수 있습니다.
columns 속성의 기본 문법
columns 속성은 아래와 같은 형식으로 사용합니다.
columns: <column-width> | <column-count>;
- column-width: 각 단의 최소 너비를 지정합니다. 예:
100px - column-count: 표시할 단의 개수를 지정합니다. 예:
4
두 값을 함께 사용하면 브라우저가 사용 가능한 공간에 맞춰 최적의 단 배치를 자동으로 계산합니다.
columns 속성 활용 예제
다음 코드는 columns 속성과 함께 column-rule-color, column-rule-style을 사용해 단 사이에 점선 구분선을 추가한 예제입니다. 직접 실행해 결과를 확인해 보세요.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-rule-color: gray;
columns: 100px 4;
column-rule-style: dashed;
}
</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>코드 설명
columns: 100px 4;— 각 단의 너비를 최소 100px로 하고, 최대 4개의 단으로 나눕니다.column-rule-color: gray;— 단과 단 사이 구분선의 색상을 회색으로 지정합니다.column-rule-style: dashed;— 구분선을 점선(dashed) 스타일로 표시합니다.
참고 사항
columns 속성은 Chrome, Firefox, Safari, Edge 등 주요 최신 브라우저에서 모두 지원됩니다. 신문이나 잡지처럼 텍스트를 여러 단으로 배치하고 싶을 때 유용하며, 반응형 레이아웃에서도 column-width 값만 조절하면 화면 크기에 따라 단 개수가 자동으로 조정되므로 편리합니다.