HTML DOM columnSpan 속성이란?
HTML DOM의 columnSpan 속성은 멀티 컬럼(multi-column) 레이아웃에서 특정 요소가 몇 개의 열(column)에 걸쳐 표시될지를 지정하는 데 사용됩니다. 예를 들어, 본문이 3개의 열로 나뉘어 있을 때 제목(h2) 요소를 모든 열에 걸쳐 가로지르게 배치하고 싶다면 이 속성을 활용할 수 있습니다.
문법(Syntax)
JavaScript에서 columnSpan 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.columnSpan = "1|all|initial|inherit";
속성 값 설명
| 값 | 설명 |
|---|---|
| 1 | 요소가 정확히 하나의 열에만 걸치도록 설정합니다. 기본값(default)입니다. |
| all | 요소가 해당 컬럼 컨테이너의 모든 열에 걸쳐 표시되도록 설정합니다. |
| initial | 해당 속성을 브라우저의 초기(initial) 값으로 되돌립니다. |
| inherit | 부모 요소의 columnSpan 속성 값을 상속받습니다. |
참고: CSS의 column-span 속성은 Chrome, Edge, Safari, Opera 등 주요 브라우저에서 지원되며, Firefox는 71 버전부터 지원합니다.
예제 코드
아래 예제는 3개의 열로 구성된 div 안에 있는 단락(p) 요소의 columnSpan 값을 버튼 클릭 한 번으로 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
column-count: 3;
background-color: papayawhip;
}
#P1 {
background-color: lightcyan;
font-size: 1.4em;
}
</style>
<script>
function changeColumnSpan() {
document.getElementById("P1").style.columnSpan = "all";
document.getElementById("Sample").innerHTML = "columnSpan 값이 'all'로 변경되었습니다.";
}
</script>
</head>
<body>
<div id="DIV1">
<p id="P1">샘플 단락 제목입니다</p>
div 요소 안에 들어 있는 임의의 텍스트입니다. 곧 의미 없는 문자열로 바뀌었다가 다시 정상적인 문장으로 돌아옵니다.
</div>
<p>아래 버튼을 클릭하면 위 div의 column span 속성이 변경됩니다.</p>
<button onclick="changeColumnSpan()">Column Span 변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과
처음 화면에서는 단락 제목(#P1)이 세 개의 열 중 하나에만 표시됩니다.
그러나 “Column Span 변경” 버튼을 클릭하면 해당 단락의 columnSpan 값이 all로 바뀌면서 단락 제목이 세 개의 열 전체에 걸쳐 표시되는 것을 확인할 수 있습니다.
정리
columnSpan 속성은 신문이나 잡지처럼 열이 나뉜 레이아웃에서 제목이나 강조 문구를 전체 폭에 걸쳐 배치할 때 유용합니다. 값은 1(기본값), all, initial, inherit 네 가지만 사용할 수 있으며, JavaScript의 style 객체를 통해 동적으로 변경할 수도 있습니다.