시맨틱 태그 (+ 테이블 생성, 합치기)

시맨틱 태그(Semantic Tags)는 HTML5에서 도입된 태그들로, 요소의 의미를 명확하게 설명해주는 태그들입니다. 즉, 단순히 레이아웃을 구성하는 역할을 넘어, 태그 자체가 그 내용의 의미를 나타내는 기능을 합니다.

시맨틱 태그를 사용하는 이유

1. 코드 가독성: 시맨틱 태그는 코드의 의미를 명확히 표현해주므로, 개발자나 유지보수자가 코드를 읽을 때 쉽게 이해할 수 있습니다. 예를 들어, div 태그 대신 header, footer 등을 사용하면, 해당 부분이 어떤 역할을 하는지 명확히 알 수 있습니다.
2. SEO(Search Engine Optimization): 검색 엔진은 시맨틱 태그를 통해 웹 페이지의 구조를 더 잘 이해할 수 있습니다. **검색 엔진 최적화(SEO)**에 유리하게 작용하며, 웹 페이지가 검색 결과에서 더 잘 노출될 수 있습니다.
3. 접근성(Accessibility): 스크린 리더와 같은 보조 기술을 사용하는 사용자들에게 더 좋은 경험을 제공합니다. 시맨틱 태그를 통해 페이지의 구조를 쉽게 이해하고 탐색할 수 있습니다.
4. 표준 준수: HTML5에서는 시맨틱 태그를 사용하는 것이 권장되며, 웹 표준을 준수하는 웹사이트를 만드는 데 도움이 됩니다.

시맨틱 태그의 용도

• <header>: 페이지나 섹션의 머리글(헤더)을 나타냅니다. 일반적으로 로고, 네비게이션 링크, 제목 등을 포함합니다.
• <nav>: 네비게이션 영역을 나타냅니다. 주로 페이지 간의 링크 목록을 포함하는 부분입니다.
• <section>: 문서 내의 섹션을 정의합니다. 관련된 콘텐츠를 묶어서 표현할 때 사용됩니다.
• <article>: 독립적인 글이나 기사를 나타냅니다. 다른 페이지에서 따로 읽혀도 의미가 통하는 콘텐츠에 사용합니다.
• <aside>: 본문과 관련된 추가 정보를 제공할 때 사용합니다. 주로 사이드바나 관련 링크, 광고 등을 포함합니다.
• <footer>: 페이지나 섹션의 바닥글(푸터)을 나타냅니다. 저작권 정보나 링크, 연락처 등을 포함할 수 있습니다.
• <main>: 웹 페이지의 주요 콘텐츠 부분을 나타냅니다. 한 페이지에서 고유하고 중요한 내용이 있는 영역에 사용됩니다.

---

HTML에서 테이블(table)을 생성하고 데이터를 정리할 때 사용하는 주요 태그들은 다음과 같습니다:

1. <table>

• 용도: HTML에서 테이블을 정의할 때 사용합니다.
• 설명: <table> 태그는 테이블의 시작과 끝을 나타내며, 그 안에 테이블 구조를 정의할 수 있습니다.
• <table> <!-- 테이블 콘텐츠 --> </table>

2. <tr> (Table Row)

• 용도: 행(Row)을 정의할 때 사용됩니다.
• 설명: 테이블의 한 줄을 나타내며, <tr> 안에 데이터 셀을 배치합니다.
• <table> <tr> <!-- 데이터 셀 --> </tr> </table>

3. <td> (Table Data)

• 용도: 테이블의 각 셀(데이터)을 정의합니다.
• 설명: 각 셀의 데이터 값이 들어가는 곳이며, <tr> 태그 안에 위치합니다.
• <table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table>

4. <th> (Table Header)

• 용도: 테이블의 헤더 셀을 정의할 때 사용됩니다.
• 설명: 머리글에 들어가는 데이터를 나타내며, 기본적으로 굵게 표시되고 중앙 정렬됩니다. 주로 열(Column)의 제목을 정의할 때 사용됩니다.
• <table> <tr> <th>Name</th> <th>Age</th> </tr> </table>

5. <thead> (Table Head)

• 용도: 테이블의 머리 부분을 그룹화할 때 사용됩니다.
• 설명: <th> 태그와 함께 테이블의 헤더(표의 상단)를 명확하게 구분합니다.
• <table> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> </table>

6. <tbody> (Table Body)

• 용도: 테이블의 본문 부분을 정의할 때 사용됩니다.
• 설명: 실제 데이터가 들어가는 부분을 그룹화하는 데 사용됩니다.
• <table> <tbody> <tr> <td>Alice</td> <td>25</td> </tr> <tr> <td>Bob</td> <td>30</td> </tr> </tbody> </table>

7. <tfoot> (Table Footer)

• 용도: 테이블의 하단(푸터) 부분을 정의할 때 사용됩니다.
• 설명: 주로 테이블에서 요약 정보나 합계를 표시하는 데 사용됩니다.
• <table> <tfoot> <tr> <td colspan="2">Total</td> </tr> </tfoot> </table>

예시 전체 테이블 코드

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total: 2 People</td>
    </tr>
  </tfoot>
</table>

요약

• <table>: 테이블을 정의.
• <tr>: 행을 정의.
• <td>: 데이터 셀을 정의.
• <th>: 테이블 헤더 셀을 정의.
• <thead>: 테이블의 머리 부분을 그룹화.
• <tbody>: 테이블 본문을 그룹화.
• <tfoot>: 테이블 하단(푸터)을 그룹화.

이러한 태그들을 사용하여 HTML에서 테이블 구조를 생성하고, 데이터를 쉽게 표시할 수 있습니다.

---

행과 열 합치기

HTML에서 테이블의 행(Row)과 열(Column)을 합칠 때는 각각 rowspan과 colspan 속성을 사용합니다.

1. 열 합치기 (Column Spanning) - colspan

• 용도: 한 셀이 여러 열을 가로로 합칠 때 사용됩니다.
• 설명: colspan 속성에 숫자를 지정하면, 그 셀이 몇 개의 열을 차지할지 결정합니다.결과: 두 번째 행에서 Contact라는 셀이 두 개의 열을 합쳐 차지합니다.
• <table border="1"> <tr> <th>Name</th> <th colspan="2">Contact</th> <!-- 2개의 열을 합침 --> </tr> <tr> <td>Alice</td> <td>Email</td> <td>Phone</td> </tr> </table>
• 예시: 두 개의 열을 합친 셀

2. 행 합치기 (Row Spanning) - rowspan

• 용도: 한 셀이 여러 행을 세로로 합칠 때 사용됩니다.
• 설명: rowspan 속성에 숫자를 지정하면, 그 셀이 몇 개의 행을 차지할지 결정합니다.결과: 첫 번째 열에서 Name 셀이 두 개의 행을 합쳐 차지합니다.
• <table border="1"> <tr> <th rowspan="2">Name</th> <!-- 2개의 행을 합침 --> <th>Age</th> </tr> <tr> <td>25</td> </tr> </table>
• 예시: 두 개의 행을 합친 셀

행과 열을 동시에 합치는 예시

<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Contact Info</th> <!-- 열 합침 -->
  </tr>
  <tr>
    <td rowspan="2">Alice</td> <!-- 행 합침 -->
    <td>Email</td>
    <td>alice@example.com</td>
  </tr>
  <tr>
    <td>Phone</td>
    <td>123-456-7890</td>
  </tr>
</table>

• Name 셀은 두 개의 행을 차지하고, Contact Info 셀은 두 개의 열을 차지합니다.

요약

• colspan: 열을 합칠 때 사용.
• rowspan: 행을 합칠 때 사용.

이 속성들을 활용하면 테이블 레이아웃을 더 유연하게 만들 수 있습니다.