HTML DOM의 columnRuleWidth 속성은 다단(multi-column) 레이아웃에서 열과 열 사이를 구분하는 구분선(column rule)의 너비를 설정하거나 가져오는 데 사용됩니다.
문법(Syntax)
columnRuleWidth 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.columnRuleWidth = "medium|thin|thick|length|initial|inherit"
속성 값 설명
각 속성 값이 의미하는 바는 아래 표와 같습니다.
| 값 | 설명 |
|---|---|
| thin | 얇은(thin) 구분선을 지정합니다. |
| medium | 중간(medium) 두께의 구분선을 지정하며, 기본값(default)입니다. |
| thick | 두꺼운(thick) 구분선을 지정합니다. |
| length | px, em 등 길이 단위를 사용해 구분선의 너비를 직접 지정합니다. |
| initial | 이 속성을 초기값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
예제(Example)
다음 예제는 버튼을 클릭하면 JavaScript로 columnRuleWidth 속성을 변경하여 열 구분선의 너비를 조절하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
padding: 5px;
column-count: 5;
column-rule-width: 9px;
column-rule-color: lightblue;
column-rule-style: solid;
}
</style>
<script>
function changeColumnRuleWidth(){
document.getElementById("DIV1").style.columnRuleWidth="3px";
document.getElementById("Sample").innerHTML="열 구분선의 너비가 줄어들었습니다";
}
</script>
</head>
<body>
<div id="DIV1">
<img src="https://www.tutorialspoint.com/images/Swift.png"><br/>
<img src="https://www.tutorialspoint.com/images/xamarian.png"><br/>
<img src="https://www.tutorialspoint.com/images/pl-sql.png"><br/>
<img src="https://www.tutorialspoint.com/images/asp-net.png"><br/>
<img src="https://www.tutorialspoint.com/images/powerbi.png"><br/>
<img src="https://www.tutorialspoint.com/images/Tableau.png"><br/>
<img src="https://www.tutorialspoint.com/images/Big-Data-Analytics.png"><br/>
<img src="https://www.tutorialspoint.com/images/microsoftproject.png">
<img src="https://www.tutorialspoint.com/images/QlikView.png"><br/>
<img src="https://www.tutorialspoint.com/images/hadoop.png">
</div>
<p>아래 버튼을 클릭하면 위 div 요소의 열 구분선 너비가 변경됩니다</p>
<button onclick="changeColumnRuleWidth()">Change Column Rule Width</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 이미지들이 5개의 단으로 나뉘어 표시되고, 각 단 사이에 연한 파란색(lightblue) 실선 구분선이 9px 너비로 나타납니다.
그런 다음 “Change Column Rule Width” 버튼을 클릭하면 다음과 같이 구분선의 너비가 3px로 줄어든 것을 확인할 수 있습니다.
정리
columnRuleWidth 속성은 CSS의 column-rule-width 스타일을 JavaScript로 동적으로 제어할 수 있게 해주는 유용한 도구입니다. thin, medium, thick 같은 키워드뿐만 아니라 px 단위의 구체적인 값도 사용할 수 있으므로, 반응형 레이아웃이나 사용자 인터랙션에 따라 다단 레이아웃의 시각적 구분선을 유연하게 조정하고 싶을 때 활용하면 좋습니다.