다단(multi-column) 레이아웃에서 열 사이의 간격을 조절하려면 columnGap 속성을 사용합니다. 이 속성은 CSS의 column-gap과 동일한 역할을 하며, JavaScript에서는 DOM 요소의 style 객체를 통해 동적으로 값을 지정할 수 있습니다.
예제
아래 코드를 실행한 후 버튼을 클릭하면 텍스트가 4개의 열로 나뉘고, 열 사이에 30px의 간격이 적용되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<p>아래 버튼을 클릭하면 4개의 열이 생성되고 열 사이 간격이 30px로 설정됩니다.</p>
<button onclick="display()">열 만들기</button>
<div id="myID">
이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다.
이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다.
이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다.
이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다.
이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다.
이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다.
이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다.
</div>
<script>
function display() {
document.getElementById("myID").style.columnCount = "4";
document.getElementById("myID").style.columnGap = "30px";
}
</script>
</body>
</html>
코드 설명
- columnCount: 콘텐츠를 나눌 열의 개수를 지정합니다. 이 예제에서는 4개의 열로 설정했습니다.
- columnGap: 열과 열 사이의 간격을 지정합니다. 여기서는 30px로 설정하여 열 사이에 일정한 여백을 만듭니다.
버튼을 클릭하면 display() 함수가 호출되어 id가 myID인 요소에 위 두 가지 스타일이 한 번에 적용되며, 변경 사항은 페이지를 새로고침하지 않고도 즉시 화면에 반영됩니다.