HTML 테이블 열 마스터하기 - 웹 디자인 튜토리얼

소개

HTML <col> 태그는 테이블의 각 열의 속성을 개별적으로 정의하는 데 사용됩니다. 이 랩에서는 <col> 태그를 사용하여 HTML 테이블의 열 스타일을 지정하는 방법을 배우게 됩니다.

참고: index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

HTML 테이블 생성하기

프로젝트의 index.html 파일에 다음 코드를 추가하여 기본적인 HTML 테이블을 생성합니다.

<table>
  <colgroup>
    <col />
    <col />
    <col />
  </colgroup>
  <tr>
    <th>Product Name</th>
    <th>Price</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Product 1</td>
    <td>$10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Product 2</td>
    <td>$20</td>
    <td>10</td>
  </tr>
</table>

태그로 열 스타일 지정하기

이제 <col> 태그를 추가하여 테이블의 열 스타일을 지정해 보겠습니다. 위의 코드에서 <colgroup> 태그를 다음 코드로 바꿉니다.

<colgroup>
  <col style="background-color: lightblue" />
  <col style="background-color: lightgreen" />
  <col style="background-color: lightpink" />
</colgroup>

위의 코드에서, 테이블의 각 열에 서로 다른 배경색을 적용하기 위해 style 속성을 가진 <col> 태그를 추가했습니다.

span 속성 사용하기

<col> 태그의 span 속성을 사용하여 여러 열을 한 번에 타겟팅할 수 있습니다. 예를 들어:

<colgroup>
  <col style="background-color: lightblue" />
  <col span="2" style="background-color: lightgreen" />
</colgroup>

이 예제에서 두 번째 <col> 태그는 span 속성을 값 2로 사용하여 두 개의 열을 한 번에 타겟팅합니다.

글로벌 및 이벤트 속성 사용하기

<col> 태그는 테이블 열에 추가적인 스타일과 기능을 추가하기 위해 전역 속성 (Global attributes) 및 이벤트 속성 (Event attributes) 을 지원합니다. 예를 들어, class 속성을 사용하여 CSS 클래스를 열에 추가할 수 있습니다.

<colgroup>
  <col style="background-color: lightblue" class="product-name" />
  <col span="2" style="background-color: lightgreen" class="price-quantity" />
</colgroup>

이제 .product-name 및 .price-quantity 클래스를 사용하여 테이블 열에 CSS 스타일을 적용할 수 있습니다.

테이블 열에 단위 추가하기

::before 및 ::after 의사 요소 (pseudo-elements) 와 CSS 를 사용하여 통화 또는 백분율 값과 같은 단위를 테이블 열에 추가할 수 있습니다. 예를 들어:

<colgroup>
  <col style="background-color: lightblue" class="product-name" />
  <col span="2" style="background-color: lightgreen" class="price-quantity" />
</colgroup>

td::before {
  content: "$";
}

td:last-of-type::after {
  content: "%";
}

위 코드에서 ::before 의사 요소는 처음 두 열의 값 앞에 달러 기호를 추가하고, ::after 의사 요소는 마지막 열의 값 뒤에 백분율 기호를 추가합니다.

요약

이 랩에서는 HTML <col> 태그를 사용하여 HTML 테이블의 열 스타일을 지정하는 방법을 배웠습니다. 또한 span 속성, 전역 속성 (Global attributes) 및 이벤트 속성 (Event attributes) 을 사용하여 테이블 열에 추가적인 스타일과 기능을 추가하는 방법도 배웠습니다. 마지막으로, CSS 와 의사 요소 (pseudo-elements) 를 사용하여 테이블 열에 단위를 추가하는 방법을 배웠습니다.