CSS3 column-span 속성이란?
CSS3의 column-span 속성은 다중 컬럼(multi-column) 레이아웃에서 특정 요소가 하나의 컬럼에 머무르지 않고 여러 컬럼에 걸쳐 표시되도록 지정하는 속성입니다. 신문 헤드라인처럼 제목이 전체 폭을 가로지르게 배치하고 싶을 때 특히 유용합니다.
column-span 속성에 사용할 수 있는 값은 다음과 같습니다.
- none (기본값): 요소가 자신이 속한 단일 컬럼 안에서만 표시됩니다.
- all: 요소가 모든 컬럼에 걸쳐 확장되어 표시됩니다.
아래 예제 코드를 직접 실행하면서 column-span 속성이 실제로 어떻게 동작하는지 확인해 보세요.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.multi {
/* 컬럼 개수 지정 */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* 컬럼 사이 간격 지정 */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
/* 컬럼 구분선 스타일 지정 */
column-rule-style: solid;
column-rule-color: #ff00ff;
/* 컬럼 구분선 두께 지정 */
-webkit-column-rule-width: 5px;
-moz-column-rule-width: 5px;
column-rule-width: 5px;
}
/* 컬럼 범위(span) 지정: 제목이 모든 컬럼에 걸치도록 설정 */
.multi h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
</style>
</head>
<body>
<div class="multi">
<h2>데모 텍스트입니다</h2>
다중 컬럼 레이아웃은 신문이나 잡지에서 흔히 볼 수 있는 형태로,
텍스트를 여러 열로 나누어 배치하면 가독성이 높아지고 화면 공간을
효율적으로 활용할 수 있습니다. CSS3의 다중 컬럼 모듈을 사용하면
JavaScript 없이 순수 CSS만으로 이러한 레이아웃을 손쉽게 구현할 수
있으며, 컬럼 개수와 간격, 구분선 스타일까지 세부적으로 조절할 수
있습니다.
</div>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 본문 텍스트가 4개의 컬럼으로 나뉘어 표시되고, <h2> 제목은 column-span: all 설정 덕분에 모든 컬럼에 걸쳐 가로로 확장되어 나타납니다. 컬럼 사이에는 40px의 간격이 적용되며, 핑크색(#ff00ff) 5px 실선 구분선이 그려지는 것도 확인할 수 있습니다.
브라우저 호환성 팁
column-span 속성은 최신 브라우저 대부분에서 지원되지만, 구버전 Chrome·Safari·Opera 등 웹킷 계열 브라우저에서는 -webkit- 접두사를 붙여야 정상적으로 동작합니다. 위 예제처럼 표준 속성과 벤더 접두사 속성을 함께 작성해 두면 다양한 환경에서 호환성 문제 없이 사용할 수 있습니다.