HTML DOM 스타일 columnRule 속성 – 다단 레이아웃 구분선 제어 방법

HTML DOM의 columnRule 속성은 요소의 column-rule 스타일을 가져오거나 설정하는 데 사용됩니다. 이 속성은 columnRuleWidth(구분선 너비), columnRuleStyle(구분선 스타일), columnRuleColor(구분선 색상) 세 가지 하위 속성을 한 번에 지정할 수 있는 단축(shorthand) 속성입니다.

문법

columnRule 속성을 설정하는 기본 문법은 다음과 같습니다.

object.style.columnRule = "column-rule-width column-rule-style column-rule-color|initial|inherit"

각 값의 의미는 아래 표와 같습니다.

값	설명
columnRuleWidth	열(column) 사이 구분선의 너비를 설정합니다. 기본값은 medium입니다.
columnRuleStyle	열 사이 구분선의 스타일(실선, 점선 등)을 설정합니다. 기본값은 none입니다.
columnRuleColor	열 사이 구분선의 색상을 설정합니다. 기본값은 해당 요소의 글자색(color) 값입니다.
initial	이 속성을 초기값으로 설정합니다.
inherit	부모 요소의 속성 값을 상속받습니다.

이제 columnRule 속성을 실제로 활용한 예제를 살펴보겠습니다.

예제

다음 예제에서는 이미지 목록을 4개의 단으로 나누어 표시하고, 버튼을 클릭하면 자바스크립트를 통해 구분선의 너비, 스타일, 색상을 동적으로 변경합니다.

<!DOCTYPE html>
<html>
<head>
<style>
    #DIV1 {
        column-count: 4;
        column-rule: 4px dashed darkolivegreen;
    }
</style>
<script>
    function changeColumnRule(){
        document.getElementById("DIV1").style.columnRule="10px solid red";
        document.getElementById("Sample").innerHTML="column rule 속성이 변경되었습니다";
    }
</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">
    </div>
    <p>아래 버튼을 클릭하면 위 div 요소의 column rule 속성이 변경됩니다</p>
    <button onclick="changeColumnRule()">Change Column Rule</button>
    <p id="Sample"></p>
</body>
</html>

실행 결과

페이지를 처음 열면 이미지들이 4개의 단으로 나뉘고, 각 단 사이에 4px 두께의 짙은 올리브색(darkolivegreen) 점선 구분선이 표시됩니다.

HTML DOM 스타일 columnRule 속성 – 다단 레이아웃 구분선 제어 방법

이후 “Change Column Rule” 버튼을 클릭하면 자바스크립트 함수가 실행되어 구분선이 10px 두께의 빨간색(red) 실선으로 즉시 변경되며, 그 결과가 아래와 같이 화면에 반영됩니다.

HTML DOM 스타일 columnRule 속성 – 다단 레이아웃 구분선 제어 방법

이처럼 columnRule 속성을 활용하면 CSS만으로 정적인 다단 구분선을 만들 수 있을 뿐 아니라, 자바스크립트와 함께 사용해 사용자 인터랙션에 따라 레이아웃 스타일을 동적으로 제어할 수 있습니다.