HTML - 시맨틱 태그와 표 만들기

🧐 시맨틱 태그

1. <header> 태그

사이트 전체/특정 영역의 헤더 영역을 나타낸다. 

헤더는 주로 맨 위쪽이나 왼쪽에 위치한다.

 

2. <nav> 태그

같은 웹문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만든다.

헤더나 푸터 안에 포함할 수도 있고, 독립적으로 사용할 수도 있다.

 

3. <main> 태그

핵심/메인 콘텐츠를 담는다. 

main 태그는 웹 문서에서 한 번만 사용할 수 있다.

 

4. <article> 태그

블로그의 포스트, 뉴스 사이트의 기사처럼 독립된 웹 콘텐츠 항목을 담는다.

article 태그를 여러 개 사용할 수 있고, 안에 <section> 태그를 넣을 수도 있다.

 

5. <section> 태그

웹 문서에서 콘텐츠 영역을 나타낸다. 

<article> 태그와 비슷해 보이지만, <section> 태그는 몇 개의 콘텐츠를 묶는 용도로 사용한다.

단순히 스타일 적용을 위해 콘텐츠를 묶는 경우에는 <div> 태그를 사용한다.

 

6. <aside> 태그

사이드 바 영역을 나타낸다.

필수 요소가 아니므로 필요한 경우에만 사용한다.

 

7. <footer> 태그

웹 문서 맨 아래에 있는 푸터 영역을 만든다.

이 푸터 영역에는 사이트 정보, 저작권 정보, 연락처 등을 넣는다.

푸터 영역에는 <header>, <section>, <article> 등 다른 시맨틱 태그 모두 사용 가능하다.

 

8. <div> 태그

여러 소스를 묶을 때 사용한다.

영역을 구별하거나 스타일을 적용할 때 사용한다.

 

 

🧐 표 만들기

표 만들 땐 <table> 태그

표에 제목을 붙이려면 <caption> 태그

행을 만들 땐 <tr> 태그

셀을 만들 땐 <td> 태그, 셀 중에서 제목 셀을 표시하려면 <th> 태그

<table border="1">
        <caption>표 만들기</caption>
        <tr>
            <th>1행 & 1열</th>
            <td>2열</td>
            <td>3열</td>
        </tr>
        <tr>
            <th>2행 & 1열</th>
            <td>2열</td>
            <td>3열</td>
        </tr>
    </table>

 

+) 행이나 열을 합치고 싶다면 rowspan, colspan을 사용하면 된다.

<td rowspan="합칠 셀의 개수"></td>

<td colspan="합칠 셀의 개수"></td>

 

위의 코드에서 2행의 2열에서 colspan="2"를 해 준 결과