웹 개발 기초집LESSON 04

시맨틱 HTML로 페이지 영역 나누기

난이도입문

예상 시간25분

선수지식이전 강의

4강. 시맨틱 HTML로 페이지 영역 나누기

이번 강의의 결과물은 머리말, 내비게이션, 핵심 콘텐츠, 주제별 영역, 독립 프로젝트, 바닥글의 역할이 HTML에 드러나는 포트폴리오입니다.

1. 이번 강의에서 해결할 문제

3강에서 제목과 문단의 계층을 만들었지만, 현재 HTML만으로는 어디까지가 소개 영역이고 어디부터 프로젝트 영역인지 명확하게 묶여 있지 않습니다.

모든 영역을 div로 만들면 CSS를 적용할 상자는 생기지만 그 상자가 무엇을 의미하는지는 전달되지 않습니다. 이번 강의에서는 콘텐츠의 역할에 맞는 시맨틱 요소로 페이지 영역을 구분합니다.

학습 목표

모든 영역을 div로 만들면 CSS를 적용할 상자는 생기지만 그 상자가 무엇을 의미하는지는 전달되지 않습니다. 이번 강의에서는 콘텐츠의 역할에 맞는 시맨틱 요소로 페이지 영역을 구분합니다.
핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

2. 핵심 개념

시맨틱 HTML은 요소의 이름만으로 콘텐츠의 역할을 표현하는 HTML입니다.

요소	역할	포트폴리오에서의 사용 예
`header`	페이지 또는 콘텐츠의 도입부	이름, 소개 문장, 주요 메뉴
`nav`	페이지나 사이트의 주요 이동 링크	소개·기술·프로젝트 메뉴
`main`	현재 페이지의 핵심 콘텐츠	소개부터 프로젝트까지
`section`	하나의 주제로 묶인 콘텐츠 영역	소개, 기술, 프로젝트 영역
`article`	따로 떼어도 이해되는 독립 콘텐츠	개별 프로젝트 카드
`footer`	페이지 또는 콘텐츠의 마무리 정보	작성자나 저작권 정보

페이지 구조는 다음과 같이 표현할 수 있습니다.

body
├─ header
│  └─ nav
├─ main
│  ├─ section: 소개
│  ├─ section: 기술
│  └─ section: 프로젝트
│     ├─ article: 게임 프로젝트
│     └─ article: 웹 프로젝트
└─ footer

section과 article을 구분하는 질문은 간단합니다.

다른 내용에서 떼어 내도 하나의 완성된 콘텐츠라면 article
더 큰 문서 안에서 특정 주제를 나누는 부분이라면 section
의미 없이 CSS나 JavaScript용 상자만 필요하다면 div

HTML 표준은 section을 보통 제목이 있는 주제별 묶음으로, article을 독립적으로 재사용하거나 배포할 수 있는 콘텐츠로 설명합니다. 각 요소의 기준은 WHATWG 페이지 영역 표준에서 확인할 수 있습니다.

3. 코드 예시

파일 위치:

D:\WebProject\StartBook\dev-foundations\web-basics\portfolio\index.html

3강의 콘텐츠를 영역별로 묶은 전체 파일입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 개발 포트폴리오</title>
  </head>
  <body>
    <header>
      <h1>게임과 웹을 공부하는 개발자</h1>
      <p>Unreal C++과 웹 개발 학습 과정을 기록합니다.</p>

      <nav aria-label="주요 메뉴">
        <ul>
          <li><a href="#about">소개</a></li>
          <li><a href="#skills">기술</a></li>
          <li><a href="#projects">프로젝트</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <section id="about">
        <h2>소개</h2>
        <p>AI정보공학을 전공하며 게임과 웹 서비스를 공부하고 있습니다.</p>
      </section>

      <section id="skills">
        <h2>학습 중인 기술</h2>
        <ul>
          <li>Unreal Engine과 C++</li>
          <li>HTML, CSS, JavaScript</li>
          <li>Git과 HTTP</li>
        </ul>
      </section>

      <section id="projects">
        <h2>프로젝트</h2>

        <article>
          <h3>게임플레이 기능 프로젝트</h3>
          <p>Unreal C++로 플레이어 상호작용 기능을 구현합니다.</p>
        </article>

        <article>
          <h3>반응형 포트폴리오</h3>
          <p>HTML, CSS, JavaScript로 여러 화면 크기에 대응하는 웹을 만듭니다.</p>
        </article>
      </section>
    </main>

    <footer>
      <p>게임과 웹 개발 학습 기록</p>
    </footer>
  </body>
</html>

a, href, id는 메뉴를 눌렀을 때 해당 영역으로 이동하게 합니다. 이번 강의에서는 nav가 이동 링크를 묶는 영역이라는 점만 확인하고, 링크와 경로는 5강에서 자세히 다룹니다.

실행 위치:

D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

PowerShell 실행 명령:

cd D:\WebProject\StartBook\dev-foundations\web-basics\portfolio
python -m http.server 5500

브라우저 주소:

http://localhost:5500/

4. 코드가 동작하는 이유

header가 페이지의 대표 제목과 도입 정보, 주요 메뉴를 하나의 머리말로 묶습니다.
nav가 내부 링크 목록의 목적이 페이지 탐색임을 나타냅니다.
main이 이 페이지에서 가장 중요한 콘텐츠의 범위를 표시합니다.
소개, 기술, 프로젝트는 각각 하나의 주제를 가지므로 별도의 section으로 묶습니다.
각 프로젝트 설명은 다른 위치에 옮겨도 하나의 콘텐츠로 이해할 수 있으므로 article로 표현합니다.
footer가 핵심 콘텐츠가 끝난 뒤 페이지의 마무리 정보를 제공합니다.

이 요소들은 기본적으로 화면을 화려하게 바꾸지 않습니다. 중요한 효과는 HTML 자체에 영역의 의미가 생기는 것입니다. 브라우저와 보조 기술은 이런 영역을 탐색 지점으로 활용할 수 있습니다. W3C WAI 페이지 영역 안내도 header, nav, main, footer 등으로 영역을 식별하도록 안내합니다.

네이티브 HTML 요소가 이미 의미를 제공한다면 nav role="navigation", main role="main"처럼 같은 역할을 반복해서 적을 필요는 없습니다.

5. 자주 하는 실수

모든 상자를 section으로 만듦: 주제와 제목이 없는 단순 스타일용 묶음은 div가 더 적합합니다.
모든 링크를 nav로 감쌈: nav는 주요 탐색 링크 묶음에 사용하며 본문 속 링크 하나마다 사용하지 않습니다.
section에 주제를 설명하는 제목이 없음: 대부분의 section에는 해당 영역을 설명하는 제목이 필요합니다.
article과 section을 모양으로 구분함: 카드처럼 보여서 article인 것이 아니라 독립된 콘텐츠이기 때문에 article입니다.
페이지의 모든 내용을 main에 넣음: 반복되는 페이지 머리말, 주요 탐색, 바닥글은 일반적으로 main 밖에 둡니다.
시맨틱 요소에 불필요한 ARIA 역할을 반복함: 먼저 적절한 HTML 요소 자체를 사용합니다.

6. 짧은 실습 과제

자신의 index.html을 header, main, footer의 세 영역으로 나눕니다.
소개, 기술, 프로젝트 내용을 각각 제목이 있는 section으로 묶습니다.
프로젝트를 두 개 이상 작성하고 각각 별도의 article로 묶습니다.
header 안에 소개·기술·프로젝트 영역으로 이동하는 nav를 작성합니다.
각 요소의 시작 태그 옆에 잠시 주석을 작성해 선택 이유를 설명합니다.

<article> <!-- 다른 위치에서도 독립적으로 이해되는 프로젝트 -->

설명이 끝나면 주석을 지우고, 개발자 도구의 Elements 탭에서 다음 구조가 만들어졌는지 확인합니다.

body > header
body > main > section
section > article
body > footer

완료 기준은 각 영역을 선택한 이유를 “위에 있어서”, “상자처럼 보여서”가 아니라 콘텐츠의 역할로 설명할 수 있는 것입니다.

7. 이해 점검 질문 3개

프로젝트 하나에는 section보다 article이 더 적합할 수 있는 이유는 무엇인가요?
div와 시맨틱 요소가 화면에서 똑같이 보이더라도 시맨틱 요소를 사용하는 이유는 무엇인가요?
header와 footer는 페이지 전체에서 한 번만 사용할 수 있을까요? 그렇게 생각한 이유도 함께 설명해 보세요.

핵심 요약

이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.

MINI QUIZ