웹 프로젝트 기초집LESSON 03

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

난이도입문

예상 시간40분

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

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

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

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

2. 학습 목표

3. 핵심 개념

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

시맨틱 요소는 이름만 다른 div가 아닙니다. 브라우저와 스크린 리더가 "여기는 주요 메뉴", "여기가 본문", "이 단위는 독립적인 프로젝트 글"이라고 파악할 수 있는 정보를 제공합니다. CSS가 없어도 문서 구조와 키보드 기본 동작이 유지되는 것이 출발점입니다.

용어 정리

요소/용어	역할	포트폴리오에서 사용할 곳
랜드마크	페이지의 큰 탐색 영역	`header`, `nav`, `main`, `footer`
`section`	하나의 주제로 묶인 문서 구역	소개, 프로젝트, 연락처
`article`	따로 떼어도 의미 있는 독립 콘텐츠	프로젝트 카드 한 개
제목 계층	콘텐츠의 포함 관계를 나타내는 `h1`~`h6`	페이지 `h1` → 섹션 `h2` → 카드 `h3`
앵커 링크	다른 URL 또는 같은 문서 위치로 이동	`<a href="#projects">`
`id`	한 문서에서 요소를 유일하게 식별	`id="projects"`

가장 작은 예제로 시작하기

<nav aria-label="주요 메뉴">
  <a href="#projects">프로젝트</a>
</nav>

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

링크를 누르면 브라우저가 id="projects"인 요소로 이동합니다. JavaScript가 없어도 동작합니다. aria-label은 화면에 별도 글자를 추가하지 않지만 보조 기술에서 이 내비게이션의 목적을 구분합니다.

4. 단계별 실습

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

교체 전 기존 head의 문자 인코딩, viewport, CSS와 defer 스크립트 연결은 유지합니다. 이번 단계는 화면 내용을 담는 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>

중요한 줄을 따라가기

skip-link는 키보드 사용자가 반복 메뉴를 건너뛰고 main으로 바로 이동하게 합니다.
nav aria-label="주요 메뉴"는 여러 내비게이션이 생겨도 목적을 구분할 이름을 제공합니다.
href="#about"은 같은 문서의 id="about"과 연결됩니다. 철자와 대소문자가 일치해야 합니다.
main은 페이지의 핵심 콘텐츠를 한 곳에만 표시합니다.
각 section에는 그 구역을 설명하는 h1 또는 h2가 있습니다.
article은 한 프로젝트 소개를 독립 단위로 묶고 내부 h3가 카드 제목이 됩니다.
footer에는 페이지나 사이트의 보조 정보를 둡니다.

실행 결과와 동작 흐름

CSS를 잠시 꺼도 김개발, 대표 소개, 소개·프로젝트·연락처, 저작권 문구 순서로 읽을 수 있어야 합니다. Tab 키의 첫 포커스는 본문 바로가기 링크이고, 메뉴의 프로젝트를 실행하면 URL 끝이 #projects로 바뀌며 프로젝트 섹션으로 이동합니다.

접근성 트리에서는 대략 다음 계층을 확인할 수 있습니다.

banner
  navigation "주요 메뉴"
main
  heading level 1
  heading level 2 "소개"
  heading level 2 "프로젝트"
    article → heading level 3 "Parcel Rush"
  heading level 2 "연락처"
contentinfo

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

5. 코드가 동작하는 이유

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

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

7. 직접 실습

직접 실습

실습 목표

자신의 콘텐츠를 시맨틱 구조에 넣고 링크·제목 계층·키보드 이동을 확인합니다.

시작 전 상태

2강의 index.html에서 head 연결은 보존하고 body를 예제로 교체합니다. CSS를 잠시 비활성화해도 읽을 수 있는지 먼저 확인합니다.

1단계: 따라 하기

예제 구조를 입력하고 메뉴 링크 세 개를 차례로 실행합니다. 주소의 fragment와 이동한 섹션 id가 일치하는지 확인합니다.

2단계: 내용을 바꾸고 비교하기

소개 문장과 Parcel Rush 프로젝트를 자신의 내용으로 바꿉니다. 프로젝트를 하나 더 추가하고 각 카드를 article로 묶으며 제목은 h3를 사용합니다.

3단계: 직접 적용

기술 섹션을 새로 설계해 메뉴에도 연결합니다. 기존 h1을 반복하지 말고 페이지-섹션-카드의 제목 계층에 맞는 수준을 스스로 정합니다.

4단계: 스스로 확인

Tab과 Enter만으로 본문 바로가기와 메뉴 링크를 사용할 수 있나요?
한 문서에 main과 대표 h1이 하나씩 있나요?
접근성 트리에서 navigation 이름과 제목 수준이 예상대로 보이나요?

막혔을 때

링크를 눌러도 이동하지 않음: href의 # 뒤 문자열과 대상 id를 한 글자씩 비교합니다.
같지 않은 위치로 이동: 문서에 중복 id가 없는지 검색합니다.
제목 단계가 건너뜀: 글자 크기가 아니라 콘텐츠 포함 관계로 h1→h2→h3을 정합니다.
Tab으로 클릭 요소에 갈 수 없음: 클릭용 div·span 대신 목적에 맞는 a 또는 button을 사용합니다.

8. 이해 점검 질문 3개

9. 핵심 요약

다음 강의 연결

구조가 의미만으로 읽히는 상태를 만들었습니다. 4강. CSS 기초에서 이 구조는 유지한 채 선택자·상속·박스 모델로 화면 표현을 추가합니다.

MINI QUIZ