HTML DOM ColumnGroup 객체 완벽 가이드: 테이블 열 스타일링의 핵심

HTML DOM의 ColumnGroup 객체는 HTML <colgroup> 요소와 연결되어 있습니다. <colgroup> 요소는 테이블의 특정 열 또는 모든 열에 CSS 스타일을 일괄 적용할 때 사용됩니다. 이를 통해 개발자는 테이블 내 각 열을 더욱 세밀하고 유연하게 제어할 수 있습니다.

ColumnGroup 객체의 속성

ColumnGroup 객체가 제공하는 속성은 다음과 같습니다.

속성	설명
span	열 그룹(column group)의 span 속성 값을 설정하거나 반환합니다. span 값은 해당 스타일이 적용될 열의 개수를 의미합니다.

문법(Syntax)

ColumnGroup 객체를 새로 생성하는 문법은 다음과 같습니다.

var x = document.createElement("COLGROUP");

document.createElement() 메서드에 "COLGROUP"을 전달하면 새로운 <colgroup> 요소가 메모리에 생성됩니다.

예제

ColumnGroup 객체의 실제 동작을 확인해 보겠습니다. 아래 예제에서는 버튼을 클릭하면 span 속성이 2로 설정된 <colgroup> 요소가 동적으로 생성되어 테이블에 추가됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
    table, th, td {
        border: 1px solid black;
    }
    #DIV1{
        background-color:pink;
    }
</style>
</head>
<body>
<table id="TABLE1">
<tr>
<th>FRUIT</th>
<th>COLOR</th>
<th>Price</th>
</tr>
<tr>
<td>MANGO</td>
<td>YELLOW</td>
<td>100RS</td>
</tr>
<tr>
<td>GUAVA</td>
<td>GREEN</td>
<td>50RS</td>
</tr>
</table>
<p>아래 버튼을 클릭하면 span = 2인 colgroup 요소가 생성됩니다.</p>
<button onclick="colFun()">COLGROUP</button>
<script>
    function colFun() {
        var x = document.createElement("COLGROUP");
        x.setAttribute("id","DIV1");
        x.setAttribute("span","2");
        document.getElementById("TABLE1").appendChild(x);
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM ColumnGroup 객체 완벽 가이드: 테이블 열 스타일링의 핵심

COLGROUP 버튼 클릭 후:

HTML DOM ColumnGroup 객체 완벽 가이드: 테이블 열 스타일링의 핵심

예제 코드 상세 분석

위 예제가 어떻게 동작하는지 단계별로 살펴보겠습니다.

1단계: 테이블 생성 및 스타일 적용

먼저 3개의 행과 3개의 열로 구성된 테이블을 만들고, id를 "TABLE1"로 지정했습니다. 또한 CSS를 통해 테이블과 하위 요소들에 테두리 스타일을 적용했습니다.

table, th, td {
    border: 1px solid black;
}
<table id="TABLE1">
<tr>
<th>FRUIT</th>
<th>COLOR</th>
<th>Price</th>
</tr>
<tr>
<td>MANGO</td>
<td>YELLOW</td>
<td>100RS</td>
</tr>
<tr>
<td>GUAVA</td>
<td>GREEN</td>
<td>50RS</td>
</tr>
</table>

2단계: 버튼 생성 및 이벤트 연결

다음으로 사용자가 클릭하면 colFun() 함수를 실행하는 COLGROUP 버튼을 만들었습니다.

<button onclick="colFun()">COLGROUP</button>

3단계: colFun() 함수의 동작 원리

colFun() 함수는 <colgroup> 요소를 생성하여 변수 x에 할당합니다. 이후 setAttribute() 메서드를 사용해 새로 생성된 <colgroup> 요소에 id와 span=2 속성을 부여합니다. 마지막으로 appendChild() 메서드를 통해 해당 <colgroup> 요소를 <table> 요소의 자식 노드로 추가합니다.

function colFun() {
    var x = document.createElement("COLGROUP");
    x.setAttribute("id","DIV1");
    x.setAttribute("span","2");
    document.getElementById("TABLE1").appendChild(x);
}

여기서 span="2"로 설정했기 때문에 생성된 열 그룹은 테이블의 첫 번째 열부터 두 개의 열(FRUIT, COLOR)에 영향을 미치며, id "DIV1"에 지정된 분홍색 배경 스타일이 해당 열들에 적용됩니다.

마무리

HTML DOM ColumnGroup 객체를 활용하면 JavaScript만으로 테이블 열의 스타일을 동적으로 제어할 수 있습니다. 특히 여러 열에 공통 스타일을 적용해야 할 때 개별 셀마다 클래스를 지정하는 것보다 훨씬 효율적이며, 코드의 유지보수성도 크게 향상됩니다.