HTML DOM Style columnCount 속성 – 사용법과 예제 코드 총정리

HTML DOM의 Style columnCount 속성은 요소의 콘텐츠를 몇 개의 열(column)로 나눌지 지정하는 데 사용되는 속성입니다. 신문이나 잡지처럼 텍스트를 여러 단으로 배치하고 싶을 때 유용하게 활용할 수 있습니다.

문법(Syntax)

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

object.style.columnCount = "number|auto|initial|inherit"

속성 값 설명

값	설명
Number	요소의 콘텐츠가 나뉠 열의 개수를 직접 숫자로 지정합니다.
Auto	column-width 등 다른 속성 값에 따라 열의 개수가 자동으로 결정됩니다. 이 값이 기본값(default)입니다.
Initial	해당 속성을 브라우저의 초기값으로 설정합니다.
Inherit	부모 요소의 속성 값을 그대로 상속받습니다.

예제 코드

다음 예제는 버튼을 클릭하면 div 요소의 열 개수를 2개에서 4개로 변경하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
    div {
        height: 120px;
        column-count: 2;
        border: 2px solid black;
        background-color: mediumvioletred;
    }
    div > div {
        background-color: yellow;
    }
</style>
<script>
    function changeColumnCount(){
        document.getElementsByTagName("div")[0].style.columnCount="4";
        document.getElementById("Sample").innerHTML="열 개수가 이제 4개로 늘어났습니다";
    }
</script>
</head>
<body>
    <div id="DIV1">
        <div></div>
    </div>
    <p>아래 버튼을 클릭하여 위 div의 column count 속성을 변경해 보세요</p>
    <button onclick="changeColumnCount()">Change Column Count</button>
    <p id="Sample"></p>
</body>
</html>

실행 결과

페이지를 처음 실행하면 div 요소가 2개의 열로 나뉘어 표시됩니다.

HTML DOM Style columnCount 속성 – 사용법과 예제 코드 총정리

이후 “Change Column Count” 버튼을 클릭하면 JavaScript 함수가 실행되어 열 개수가 4개로 즉시 변경됩니다.

HTML DOM Style columnCount 속성 – 사용법과 예제 코드 총정리

정리

columnCount 속성은 CSS의 multi-column 레이아웃을 동적으로 제어할 수 있는 강력한 도구입니다. 반응형 웹 디자인에서 화면 크기에 따라 단의 개수를 조절하거나, 사용자 인터랙션에 따라 레이아웃을 변경해야 할 때 활용하면 좋습니다.