HTML DOM의 columnRuleStyle 속성은 CSS 다단(multi-column) 레이아웃에서 각 단(column) 사이를 구분하는 컬럼 규칙(column rule), 즉 구분선의 스타일을 설정하거나 현재 적용된 스타일 값을 반환하는 데 사용됩니다.
이 속성을 활용하면 자바스크립트만으로도 페이지 새로고침 없이 동적으로 구분선의 모양을 변경할 수 있습니다.
문법(Syntax)
columnRuleStyle 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.columnRuleStyle = "none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit";
속성 값 설명
사용할 수 있는 주요 속성 값과 그 의미는 아래 표와 같습니다.
| 값 | 설명 |
|---|---|
| none | 기본값입니다. 구분선을 표시하지 않습니다. |
| hidden | 'none'과 유사하지만 구분선이 차지하는 공간은 그대로 유지됩니다. 즉, 보이지 않지만 공간적으로는 존재합니다. |
| dotted | 점선(dotted) 형태의 구분선을 정의합니다. |
| dashed | 파선(dashed) 형태의 구분선을 정의합니다. |
| solid | 실선(solid) 형태의 구분선을 정의합니다. |
| double | 이중선(double) 형태의 구분선을 정의합니다. |
| groove | 3D 홈(groove) 효과가 있는 구분선을 정의하며, ridge의 반대 효과를 나타냅니다. |
| ridge | 3D 융기(ridge) 효과가 있는 구분선을 정의하며, groove의 반대 효과를 나타냅니다. |
| inset | 구분선이 안쪽으로 파여 들어간 것처럼 보이는 3D 효과를 정의하며, outset의 반대 효과를 나타냅니다. |
| outset | 구분선이 바깥쪽으로 돌출된 것처럼 보이는 3D 효과를 정의합니다. |
| initial | 속성 값을 기본값(none)으로 초기화합니다. |
| inherit | 부모 요소로부터 해당 속성 값을 상속받습니다. |
예제(Example)
다음 예제는 버튼을 클릭하면 div 요소의 컬럼 구분선 스타일이 실선(solid)에서 파선(dashed)으로 변경되는 코드입니다.
<!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 changeColumnRuleStyle(){
document.getElementById("DIV1").style.columnRuleStyle="dashed";
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="changeColumnRuleStyle()">Change Column Rule Style</button>
<p id="Sample"></p>
</body>
</html>출력 결과(Output)
위 코드를 실행하면 여러 이미지가 5개의 단으로 나뉘어 배치되고, 각 단 사이에 연한 파란색 실선 구분선이 표시됩니다.
이후 “Change Column Rule Style” 버튼을 클릭하면 구분선이 다음과 같이 파선(dashed) 스타일로 변경됩니다.
정리
columnRuleStyle 속성은 다단 레이아웃에서 시각적인 구분을 강조하고 싶을 때 유용하게 활용할 수 있습니다. 일반적으로 column-rule-width(두께)와 column-rule-color(색상) 속성과 함께 사용하면 더욱 완성도 높은 디자인을 구현할 수 있습니다.