HTML DOM의 columnRuleColor 속성은 CSS 다단(multi-column) 레이아웃에서 열(column)과 열 사이에 표시되는 구분선(rule)의 색상을 설정하거나 현재 값을 반환하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트를 통해 동적으로 구분선 색상을 변경할 수 있습니다.
문법(Syntax)
columnRuleColor 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.columnRuleColor = "color|initial|inherit"
각 값의 의미는 아래와 같습니다.
- color – 구분선에 적용할 색상을 지정합니다. (예: blue, #ff0000, rgb(255,0,0) 등)
- initial – 속성값을 기본(default) 값으로 되돌립니다.
- inherit – 부모 요소의 속성값을 상속받습니다.
예제(Example)
다음 예제에서는 버튼을 클릭하면 div 요소의 다단 구분선 색상이 lightcoral에서 blue로 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
padding: 5px;
column-count: 5;
column-rule-width: 9px;
column-rule-style: solid;
column-rule-color: lightcoral;
}
</style>
<script>
function changeColumnRuleColor(){
document.getElementById("DIV1").style.columnRuleColor="blue";
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="changeColumnRuleColor()">구분선 색상 변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 이미지들이 5개의 단으로 나뉘어 표시되며, 각 단 사이에 연한 산호색(lightcoral)의 실선 구분선이 나타납니다.
이후 “구분선 색상 변경” 버튼을 클릭하면 자바스크립트 함수가 실행되어 구분선 색상이 파란색(blue)으로 즉시 변경됩니다.
정리
columnRuleColor 속성은 column-rule-style과 column-rule-width 속성과 함께 사용해야 화면에 구분선이 실제로 표시됩니다. 구분선의 스타일이 none으로 설정되어 있으면 색상을 지정해도 보이지 않으므로, 세 가지 속성을 함께 설정하는 것이 좋습니다. 또한 축약형 속성인 column-rule을 사용하면 너비, 스타일, 색상을 한 번에 지정할 수 있어 코드를 더 간결하게 작성할 수 있습니다.