웹 프로젝트 기초집LESSON 03

HTML 기초: 시맨틱 태그로 페이지 뼈대 만들기

난이도입문

예상 시간40분

선수지식2강 프로젝트 준비

3강. HTML 기초: 시맨틱 태그로 페이지 뼈대 만들기

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

div만 반복하면 브라우저와 보조 기술이 각 영역의 목적을 알기 어렵습니다. 콘텐츠 의미에 맞는 요소로 페이지 뼈대를 만듭니다.

2. 학습 목표

3. 핵심 개념

header, nav, main, section, article, footer는 영역의 의미를 전달합니다. h1은 페이지 주제, h2는 주요 섹션 제목입니다. 버튼처럼 동작하면 button, 다른 위치로 이동하면 a를 씁니다.

4. 단계별 실습

HTML · 파일 경로: game-dev-portfolio/index.html의 body 교체

game-dev-portfolio/index.html
<body>
  <a class="skip-link" href="#main">본문 바로가기</a>
  <header class="site-header">
    <a class="brand" href="#home">김개발</a>
    <nav aria-label="주요 메뉴">
      <a href="#about">소개</a>
      <a href="#projects">프로젝트</a>
      <a href="#contact">연락처</a>
    </nav>
  </header>
  <main id="main">
    <section id="home"><h1>플레이 경험을 코드로 만드는 게임 개발자</h1></section>
    <section id="about"><h2>소개</h2><p>Unity와 Unreal을 공부합니다.</p></section>
    <section id="projects">
      <h2>프로젝트</h2>
      <article><h3>Parcel Rush</h3><p>Unity 2D 분류 게임</p></article>
    </section>
    <section id="contact"><h2>연락처</h2><p>문의 폼 준비 중</p></section>
  </main>
  <footer><p>© 2026 김개발</p></footer>
</body>

기존 <head>의 CSS와 defer 스크립트 연결은 유지합니다. 개발자 도구 확인: Elements의 Accessibility 또는 접근성 트리에서 navigation, main, 제목 계층을 확인하고 각 메뉴 링크가 올바른 섹션으로 이동하는지 봅니다.

5. 코드가 동작하는 이유

랜드마크 요소는 문서의 큰 구역을 브라우저에 전달합니다. href="#projects"는 같은 문서에서 id="projects"인 요소로 이동합니다. 올바른 요소는 별도 JavaScript 없이 키보드와 보조 기술의 기본 동작을 제공합니다.

6. 자주 하는 실수와 해결법

7. 직접 실습

8. 이해 점검 질문 3개

9. 핵심 요약

MINI QUIZ