CSS에서 요소의 텍스트나 콘텐츠를 여러 개의 열(column)로 나누고 싶을 때는 column-count 속성을 사용합니다. 이 속성에 원하는 숫자를 지정하면 해당 요소의 내용이 자동으로 그 수만큼의 열에 분배되어 신문이나 잡지처럼 배치됩니다.
column-count 속성 사용법
column-count 속성은 다음과 같이 간단하게 적용할 수 있습니다.
- 기본 문법:
column-count: <개수>; - 예시:
column-count: 4;→ 요소를 4개의 열로 분할
아래 예제 코드를 실행하면 demo 클래스가 적용된 div 요소의 텍스트가 4개의 열로 나뉘어 표시되는 것을 직접 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
}
</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-gap: 열과 열 사이의 간격을 지정합니다. (예:
column-gap: 40px;) - column-rule: 열 사이에 구분선(테두리)을 추가합니다. (예:
column-rule: 1px solid #ccc;) - column-width: 각 열의 최적 너비를 지정합니다.
column-count 속성은 Chrome, Firefox, Safari, Edge 등 주요 브라우저에서 모두 지원되므로 안심하고 사용할 수 있습니다.