HTML - Headers & Caption

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 HTML 헤더와 캡션의 흥미로운 세계로 접수합니다. 이 내용을 몇 년 동안 가르쳐온 사람으로서, 이 요소들을 마스터하면 여러분의 테이블이 프로페셔널하고 정리된 모습을 갖출 것입니다. 그럼 시작해보겠습니다!

문법

자, 구체적인 것에 들어가기 전에 사용할 문법에 대해 이야기해보겠습니다. HTML에서 우리는 테이블의 헤더와 캡션을 정의하기 위해 특정 태그를 사용합니다. 간단한 개요를 보여드리겠습니다:

태그	설명
`<thead>`	테이블에 헤더 그룹을 정의합니다
`<th>`	테이블에 헤더 셀을 정의합니다
`<caption>`	테이블에 캡션을 지정합니다

이제 이게 알파벳 스튜프 Looks처럼 보일 수도 있지만, 조금씩 설명드리면 곧 이 태그들을 프로처럼 사용할 수 있을 것입니다!

HTML 헤더와 캡션의 예제

간단한 예제를 시작해보겠습니다. 이 태그들이 어떻게 작동하는지 보세요.

<table>
<caption>내가 좋아하는 책들</caption>
<thead>
<tr>
<th>제목</th>
<th>저자</th>
<th>년도</th>
</tr>
</thead>
<tbody>
<tr>
<td>킬링 어 mockingbird</td>
<td>Harper Lee</td>
<td>1960</td>
</tr>
<tr>
<td>1984</td>
<td>George Orwell</td>
<td>1949</td>
</tr>
</tbody>
</table>

이를 간단히 설명드리겠습니다:

<table> 태그로 테이블을 생성합니다.
<caption> 태그로 테이블에 제목을 부여합니다: "내가 좋아하는 책들".
<thead> 섹션에는 우리의 헤더 행이 포함됩니다.
<thead> 내부에는 <tr> (테이블 행)에 세 개의 <th> (테이블 헤더) 셀이 있습니다.
<tbody> 섹션에는 우리의 데이터 행이 포함됩니다. 각 행은 <td> (테이블 데이터) 셀을 포함합니다.

이 테이블이 렌더링되면, 헤더 행에 볼드 글씨로 표시되어 각 열이 무엇을 나타내는지 쉽게 이해할 수 있습니다.

''과 ' '와의 결합

이제 한 단계 더 나아가 <tfoot> 태그를 사용하여 테이블에 푸터를 추가해보겠습니다.

<table>
<caption>도서 판매량</caption>
<thead>
<tr>
<th>제목</th>
<th>저자</th>
<th>판매량</th>
</tr>
</thead>
<tbody>
<tr>
<td>대agle Gatsby</td>
<td>F. Scott Fitzgerald</td>
<td>25,000,000</td>
</tr>
<tr>
<td>캐쳐 인 더 Rye</td>
<td>J.D. Salinger</td>
<td>65,000,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">총 판매량:</th>
<td>90,000,000</td>
</tr>
</tfoot>
</table>

이 예제에서:

우리는 <tbody> 후에 <tfoot> 섹션을 추가했습니다.
푸터 행은 <th colspan="2">를 사용하여 두 열을 가로跨깁니다.
푸터의 마지막 셀에는 총 판매량이 표시됩니다.

이 구조는 주요 내용 (<tbody>)와 요약 정보 (<tfoot>)를 분리하여 테이블을 더 정리되고 읽기 쉽게 만듭니다.

''과 ''의 차이

이제 학생들이 자주 혼동하는 <thead>과 <th>의 차이를 설명해드리겠습니다:

<thead>: 이는 테이블의 헤더 콘텐츠를 그룹화하는 컨테이너입니다.
<th>: 이는 테이블 내부의 개별 헤더 셀을 정의합니다.

<thead>을 헤더 정보를 포함하는 상자로 생각하고, <th>는 그 상자 내부의 각 레이블로 생각하면 됩니다.

이를 실제로 보겠습니다:

<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>국가</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>25</td>
<td>USA</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>Canada</td>
</tr>
</tbody>
</table>

이 예제에서:

<thead>은 전체 헤더 섹션을 감싸고 있습니다.
<thead> 내부에는 단일 <tr> (테이블 행)이 있습니다.
그 행 내부에는 세 개의 <th> 셀로 구성된 열 헤더가 있습니다.

<thead> 내에 필요에 따라 여러 행을 가질 수 있습니다.

마무리로, 우리가 배운 태그들을 요약한 테이블을 보여드리겠습니다:

태그	목적	예제
`<table>`	테이블 생성	`<table>...</table>`
`<caption>`	테이블에 제목 추가	`<caption>My Table</caption>`
`<thead>`	헤더 콘텐츠 그룹화	`<thead>...</thead>`
`<th>`	헤더 셀 정의	`<th>Column Name</th>`
`<tbody>`	본문 콘텐츠 그룹화	`<tbody>...</tbody>`
`<tfoot>`	푸터 콘텐츠 그룹화	`<tfoot>...</tfoot>`
`<tr>`	테이블 행 생성	`<tr>...</tr>`
`<td>`	표준 데이터 셀 생성	`<td>Data</td>`

이제 여러분은 HTML에서 잘 구조화된, 읽기 쉬운 테이블을 만드는 지식을 갖추었습니다. 연습이 완벽을 만들어요, 그러니 이 태그들을 실험해보지 마세요. 얼마 지나지 않아 데이터 분석가를 자랑스럽게 만들 테이블을 만들 수 있을 것입니다!

Credits: Image by storyset