2021.12.14

binary·2021년 12월 15일

html 일팔공캠프

일팔공

목록 보기

2/20

HTML5 시맨틱 태그로 구조화한 웹 페이지

시맨틱 태그

페이지나 섹션의 머리말 표현
페이지 제목, 페이지를 소개하는 간단한 설명

<nav>

하이퍼링크들을 모아 놓은 섹션
페이지 내 목차

<section>

문서의 장 혹은 절을 구성
여러번 <section> 사용 가능

<article>

본문과 연관 있지만 보조기사, 블로그 포스트, 댓글과 같은 독립적인 콘텐트를 담는 영역

<aside>

본문에서 약간 벗어난 노트나 팁, 신문으로 따지면 주요 기사 옆 관련 기사 영역

꼬리말 영역, 주로 저자나 저작권 정보

<header>, <section>, <article>, <aside> 등에는 꼭 헤딩 태그를 이용하여 제목을 붙여야 한다.

구조화된 웹 페이지

시맨틱 태그를 사용한다고 해서 위처럼 위치와 모양이 자동으로 결정되지 않는다. CSS를 이용하여 직접 위치와 모양을 지정해주어야 한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>구조화된 웹 페이지</title>
    <!-- css 영역 -->
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }
      .header {
        width: 100%;
        height: 15%;
        background-color: plum;
      }
      .nav {
        width: 15%;
        height: 70%;
        background-color: orange;
        float: left;
      }
      .section {
        width: 70%;
        height: 70%;
        background-color: blue;
        float: left;
      }
      .aside {
        width: 15%;
        height: 70%;
        background-color: pink;
        float: left;
      }
      .footer {
        width: 100%;
        height: 15%;
        background-color: rgb(230, 192, 176);
        clear: both;
      }
    </style>
  </head>
  <body>
  <!-- 시맨틱 태그 이용 영역 -->
    <header class="header">header</header>
    <nav class="nav">nav</nav>
    <section class="section">section</section>
    <aside class="aside">aside</aside>
    <footer class="footer">footer</footer>
  </body>
</html>