HTML DOM columns 속성 완벽 가이드 – 다단 레이아웃 동적 제어하기

HTML DOM의 columns 속성은 CSS의 column-width(열 너비)와 column-count(열 개수) 속성을 한 번에 설정하고 조작할 수 있는 단축(shorthand) 속성입니다. JavaScript를 활용하면 버튼 클릭과 같은 사용자 이벤트에 반응하여 요소의 다단(multi-column) 레이아웃을 실시간으로 변경할 수 있습니다.

columns 속성 문법

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

object.style.columns = "auto | column-width column-count | initial | inherit";

속성 값 설명

columns 속성에 사용할 수 있는 값과 각각의 의미는 아래 표와 같습니다.

값	설명
auto	열 너비(column-width)와 열 개수(column-count)를 모두 자동으로 설정합니다. 기본값입니다.
columnWidth	각 열의 너비를 지정합니다. 예: `"100px"`, `"5rem"`
columnCount	표시할 열의 개수를 지정합니다. 예: `"3"`
initial	해당 속성을 초기값(기본값)으로 되돌립니다.
inherit	부모 요소의 속성 값을 상속받습니다.

참고로 column-width와 column-count를 함께 지정하면, 브라우저는 두 값을 모두 만족하는 최적의 레이아웃을 계산하여 적용합니다.

예제 코드

다음 예제는 이미지 목록이 담긴 div 요소의 columns 속성을 버튼 클릭 시 동적으로 변경하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
    #DIV1 {
        columns: 5rem auto;
    }
    img {
        border: 1px solid brown;
    }
</style>
<script>
    function changeColumns() {
        document.getElementById("DIV1").style.columns = "10px 3";
        document.getElementById("Sample").innerHTML = "열 레이아웃이 변경되었습니다.";
    }
</script>
</head>
<body>
    <div id="DIV1">
        <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/home_time_series.png"><br/>
        <img src="https://www.tutorialspoint.com/images/microsoftproject.png"><br/>
    </div>
    <p>아래 버튼을 클릭하면 위 div의 columns 속성이 변경됩니다.</p>
    <button onclick="changeColumns()">Change Columns</button>
    <p id="Sample"></p>
</body>
</html>

코드 설명

초기 CSS에서 #DIV1 요소는 columns: 5rem auto;로 설정되어 있어, 각 열의 너비가 5rem으로 지정되고 열 개수는 콘텐츠에 따라 자동 결정됩니다.
Change Columns 버튼을 클릭하면 changeColumns() 함수가 실행되어 columns 속성이 "10px 3"으로 변경됩니다. 즉, 열 너비는 10px, 열 개수는 3개로 설정됩니다.
동시에 id가 Sample인 단락에 변경 완료 메시지가 출력됩니다.

실행 결과

페이지를 처음 열면 이미지들이 여러 열에 걸쳐 배치되어 표시됩니다.

Change Columns 버튼을 클릭한 후에는 다음과 같이 열 너비 10px, 열 개수 3개의 새로운 레이아웃으로 즉시 변경됩니다.

이처럼 DOM의 columns 속성을 활용하면 별도의 페이지 새로고침 없이도 다단 레이아웃을 유연하게 제어할 수 있으며, 반응형 웹 디자인이나 갤러리, 신문 스타일의 콘텐츠 배치 등에 유용하게 활용할 수 있습니다.