JavaScript에서 columnRuleWidth 속성을 사용하면 다단(multi-column) 레이아웃에서 열과 열 사이에 표시되는 구분선(rule)의 너비를 동적으로 설정할 수 있습니다.
이 속성은 CSS의 column-rule-width 속성에 대응하며, 버튼 클릭과 같은 사용자 이벤트에 반응해 열 구분선의 두께를 실시간으로 변경할 때 유용합니다. 아래 예제 코드를 직접 실행해 보면서 확인해 보세요.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
#myID {
column-count: 4;
column-rule: 4px solid yellow;
}
</style>
</head>
<body>
<p>아래 버튼을 클릭하면 열 사이 구분선의 너비가 변경됩니다.</p>
<button onclick="display()">열 사이 너비 변경하기</button>
<div id="myID">
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>
<script>
function display() {
document.getElementById("myID").style.columnRuleWidth = "8px";
}
</script>
</body>
</html>코드 설명
위 예제의 핵심 부분을 살펴보면 다음과 같습니다.
- column-count: 4; – 해당 요소의 텍스트를 4개의 단(열)으로 나누어 표시합니다.
- column-rule: 4px solid yellow; – 열 사이에 노란색 실선 구분선을 4px 두께로 초기 설정합니다.
- style.columnRuleWidth = "8px"; – 버튼을 클릭하면
display()함수가 실행되어 구분선의 너비가 8px로 변경됩니다.
이처럼 columnRuleWidth 속성은 DOM 요소의 인라인 스타일을 통해 열 구분선의 두께를 자유롭게 제어할 수 있으며, thin, medium, thick 같은 키워드 값이나 px 단위의 숫자 값을 모두 사용할 수 있습니다.