2021.12.14

11316 단어 일팔공캠프htmlhtml

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

시맨틱 태그

<header>

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

<nav>

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

<section>

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

<article>

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

<aside>

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

<footer>

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

<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>
  • 실행화면

[React] 배포 오류 Uncaught (in promise) TypeError: Object(...) is not a function
[JavaScript] 이벤트 루프란?

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage