CSS의 column-span 속성을 사용하면 멀티 컬럼(다단) 레이아웃에서 특정 요소가 몇 개의 열에 걸쳐 표시될지 지정할 수 있습니다. 이 속성은 특히 제목(h1~h6)이 여러 열 위로 뻗어 나타나도록 만들 때 매우 유용합니다.
column-span 속성의 주요 값
- none (기본값): 요소가 자신이 속한 단일 열 안에만 표시됩니다.
- all: 요소가 모든 열에 걸쳐 확장되어 전체 폭을 차지합니다.
예제 코드
아래 예제는 column-count: 4로 본문을 4개의 열로 나누고, h1 요소에 column-span: all을 적용하여 제목이 전체 열에 걸쳐 표시되도록 구현한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
column-rule-color: maroon;
column-rule-style: dashed;
}
h1 {
column-span: all;
}
</style>
</head>
<body>
<div class = "demo">
<h1>This is our heading.</h1>
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>코드 설명
.demo 클래스에는 column-count: 4가 적용되어 본문 텍스트가 4개의 열로 자동 배분됩니다. 또한 column-rule-color: maroon과 column-rule-style: dashed를 함께 사용하면 열과 열 사이에 밤색 점선 구분선이 표시되어 다단 레이아웃이 시각적으로 더 명확해집니다.
h1 요소에는 column-span: all이 적용되었기 때문에, 제목이 4개의 열 모두에 걸쳐 한 줄로 표시됩니다. 이처럼 column-span 속성을 활용하면 신문이나 잡지 스타일의 다단 레이아웃에서 제목과 본문의 흐름을 자연스럽게 구성할 수 있습니다.