[HTML] 구조를 잡을 때 사용하는 태그

✔ HTML 태그 구성 요소

✔ 목차

<header>  <!-- 상단 영역 -->
    <img src="jinseon'log.png" alt="진선 블로그 로고">
    <nav> <!-- 메뉴 영역 -->
        <ul>
            <li>홈</li>
            <li>전체 목록</li>
        </ul>
    </nav>
</header>

• <header>
  • 웹사이트의 머리글을 담는 공간 (목차)
    • <nav>
      • 메뉴 버튼을 담는 공간
      • <ul>, <li>, <a>와 함께 사용 (특정 버튼을 눌렀을 때 이동)

 

✔ 본문

<main role="main">    <!-- 본문 영역 -->
    <article>    <!-- 정보 영역 -->
    ...
    </article>
</main>

• <main>
  • 문서의 주요 내용을 담는 태그
  • IE (Internet Explorer)은 지원하지 않으므로 role="main" 속성을 필수로 입력
    • <article>
      • 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그
      • 태그 내에 구역을 대표하는 타이틀 <h> 태그가 존재해야 함

 

✔ 부록

<footer>    <!-- 하단 영역 -->
    <div>   <!-- jinseon's log 정보 -->
        <p>블로그 이름: jinseon's log</p>
        <a href="https://digital-acc.tistory.com/" target="_blank">jinseon's log</a>
    </div>
    <div>
        <p>블로그 생성일: 2022-11-21
    </div>
</footer>

• <footer>
  • 가장 하단에 들어가는 정보를 표기할 때 사용
    • <div>
      • 임의의 공간을 만들 때 사용