JavaScript에서 columnRule 속성은 다단(multi-column) 레이아웃의 열 사이에 구분선(열 규칙)을 설정할 때 사용됩니다. 이 속성 하나로 구분선의 너비(width), 스타일(style), 색상(color)을 한 번에 지정할 수 있습니다.
columnRule 속성이란?
CSS의 column-rule 단축 속성과 동일한 역할을 하며, JavaScript에서는 DOM 요소의 style 객체를 통해 동적으로 적용할 수 있습니다. 예를 들어 뉴스 사이트나 잡지처럼 텍스트를 여러 열로 나누어 배치할 때, 각 열 사이에 시각적인 구분선을 추가하면 가독성이 크게 향상됩니다.
사용 예제
아래 코드를 실행하고 버튼을 클릭하면, 텍스트가 4개의 열로 나뉘면서 각 열 사이에 빨간색 구분선이 나타납니다.
<!DOCTYPE html>
<html>
<body>
<p>아래 버튼을 클릭하여 4개의 열을 만들어 보세요</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.columnCount = "4";
document.getElementById("myID").style.columnRule = "2px outset red";
}
</script>
</body>
</html>코드 설명
style.columnCount = "4": 해당 요소의 텍스트를 4개의 열로 분할합니다.style.columnRule = "2px outset red": 열 사이에 너비 2px, 입체적인 outset 스타일, 빨간색 구분선을 설정합니다.
columnRule 값은 CSS에서처럼 width style color 순서로 작성하며, 각 값을 개별적으로 설정하고 싶다면 columnRuleWidth, columnRuleStyle, columnRuleColor 속성을 따로 사용할 수도 있습니다.