colgroup element - by. UXKM

Publishing
HTML
표 데이터(Tabular data)
colgroup element

요약 설명
<colgroup> 요소는 <table> 요소 내에서 열(column) 단위의 구조를 정의하고 스타일을 적용하기 위한 시맨틱 태그입니다.
내부에 <col> 요소를 포함하여 여러 열에 공통된 속성(예: 너비, 배경색 등)을 지정할 수 있으며, 반복적인 스타일을 간단하게 처리할 수 있도록 도와줍니다. <thead>, <tbody>, <tfoot>처럼 콘텐츠를 담는 구조는 아니지만, 표의 열 레이아웃과 시각적 표현을 제어할 때 유용하게 사용됩니다.
<table> 내에서는 <thead>보다 먼저 위치해야 하며, 시멘틱 구조를 보완하는 역할을 합니다.

보다 유연한 스타일링을 위해 개별 <td> 또는 <th> 요소에 CSS로 스타일을 지정하는 방법이 일반적으로 권장됩니다.
그러나 <colgroup> 및 <col> 요소를 완전히 배제해야 한다는 의미는 아니며, 특정 열 전체에 일괄적인 스타일을 적용할 때는 여전히 유용하게 사용할 수 있습니다.

주요 역할 및 특징

열(Columns)의 그룹 정의
- <colgroup>은 여러 개의 열을 하나의 그룹으로 묶어, 공통된 스타일이나 속성을 적용할 수 있습니다.
- 예를 들어, 특정 열에만 배경색을 지정하거나 너비를 일괄 설정할 수 있습니다.
HTML 구조와 스타일을 분리하여 유지보수 용이
<colgroup>을 활용하면 개별 <td> 요소에 스타일을 직접 적용하는 대신, 특정 열 전체에 일괄 적용할 수 있습니다.
자식 요소로 <col> 요소를 포함
- <colgroup> 내부에는 <col> 요소만 포함할 수 있으며, 개별 <col> 요소에 속성을 부여하여 특정 열에 스타일을 적용할 수 있습니다.
- 단, <colgroup> 자체에는 스타일을 직접 적용할 수 없습니다.
반복적인 스타일 적용 최소화
특정 열에 반복적으로 적용되는 스타일이나 속성을 한 번에 처리할 수 있습니다.
CSS와 함께 사용 가능
<colgroup>을 통해 정의된 열에 CSS를 적용하면, 일관성 있는 스타일링이 가능합니다.
표의 레이아웃을 설정하는 데 유용
<colgroup>을 사용하면 특정 열의 너비(width), 가시성(visibility), 배경색(background-color) 등을 설정할 수 있습니다.

CSS 기본 값

<colgroup> 요소는 아래와 같은 기본값이 적용되며, 기본적으로 화면에 표시되지 않습니다.

<colgroup>은 레이아웃 요소이며, 자체적인 스타일은 적용되지 않습니다.
자식 요소(<col>)를 통해 스타일을 지정해야 합니다.

							colgroup {
								display: table-column-group;
							}

기본 문법

							<table>
								<colgroup> <!--col 요소와 함께 사용 -->
									<col>
									<col>
								</colgroup>
								<tr>
									<th>제목 셀</th>
									<th>제목 셀</th>
								</tr>
								<tr>
									<td>데이터 셀</td>
									<td>데이터 셀</td>
								</tr>
							</table>

속성

<colgroup> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.
<colgroup>의 자식 요소인 <col> 요소를 사용하여 특정 열에 스타일을 적용할 수 있습니다.

예제

<colgroup> 요소는 단독으로 사용하면 의미가 없습니다. <colgroup> 요소는 내부에 <col> 요소와 함께 사용되어, 테이블의 각 열에 대한 스타일을 설정하거나 특정 열을 그룹화하는 역할을 합니다.
다음 섹션(col element)에서 <col> 요소와 함께 사용하는 예제를 확인할 수 있습니다.

col element 비로가기

주의사항

<colgroup>은 <col> 요소와 함께 사용해야 합니다.
<colgroup>을 선언했지만 내부에 <col> 요소가 없다면, 어떤 영향도 미치지 않습니다. 반드시 <col>을 사용하여 스타일을 적용해야 합니다.
<colgroup>과 <col>을 사용한 스타일링은 모든 셀에 적용되는 것이 아니므로, 필요에 따라 CSS로 테이블을 제어하는 것이 더 간편할 수 있습니다.
span 속성은 전체 열의 개수를 초과할 수 없습니다.
span="3"을 사용할 때, 최소한 3개의 열이 존재해야 합니다.
<colgroup>은 스타일이나 속성 지정만 가능하고, 데이터를 직접 포함할 수 없습니다.