HTML DOM Style의 columnGap 속성은 요소 내부의 다단(multi-column) 레이아웃에서 열(column)과 열 사이의 간격을 지정하는 데 사용됩니다. CSS의 column-gap 속성과 동일한 역할을 하며, JavaScript를 통해 동적으로 열 간격을 변경할 수 있습니다.
문법(Syntax)
columnGap 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.columnGap = "length|normal|initial|inherit";
속성 값 설명
| 값 | 설명 |
|---|---|
| length | px, em 등 단위를 사용하여 열 사이의 간격을 직접 지정합니다. 예: "10px", "2em" |
| normal | 기본값(default)으로, 브라우저 기본 간격인 약 1em이 적용됩니다. |
| initial | 해당 속성을 초기값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
예제 코드
아래 예제는 버튼을 클릭하면 div 요소의 열 간격이 50px에서 10px로 줄어들도록 구현한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
column-count: 4;
column-gap: 50px;
font-size: 1.2rem;
}
</style>
<script>
function changeColumnGap(){
document.getElementsByTagName("div")[0].style.columnGap="10px";
document.getElementById("Sample").innerHTML="열 간격이 줄어들었습니다.";
}
</script>
</head>
<body>
<div>
This is some sample text inside div. This is the second div line.This is the third div
line.This is the fourth div line. This is the fifth div line.This is the sixth div line.
This is the seventh div line. This is the eigtth div line.This is the ninth div line. This is
the tenth div line.This is the eleventh div line. This is the twelth div line.This is the thirteenth div
line.This is the fourteen line. This is the fifteen div line.This is the sixteen div line. This is the seventeen div line. This is the eighteen div line.
</div>
<p>아래 버튼을 클릭하면 위 div의 열 간격이 변경됩니다.</p>
<button onclick="changeColumnGap()">Change Column Gap</button>
<p id="Sample"></p>
</body>
</html>실행 결과
페이지를 처음 실행하면 4개의 단으로 나뉜 텍스트가 50px 간격으로 표시됩니다.
“Change Column Gap” 버튼을 클릭하면 JavaScript에 의해 열 간격이 10px로 줄어들면서 텍스트 배치가 더 촘촘하게 변경되는 것을 확인할 수 있습니다.
정리
columnGap 속성은 다단 레이아웃의 가독성을 조절할 때 유용하게 활용됩니다. 버튼 클릭, 사용자 입력 등 이벤트에 따라 열 간격을 실시간으로 조정해야 하는 인터랙티브한 웹 페이지를 만들 때 특히 효과적입니다.