이번 편의 결과물: index.html·projects.html·contact.html 세 파일이 모두 만들어지고, 각 파일에 header(nav 포함)·main·footer 골격이 들어갑니다(내용은 다음 편들에서 채웁니다). 다루는 개념: header/nav/main/footer/section/article/aside의 의미와 선택 기준, div와 시맨틱 요소 중 무엇을 쓸지 판단하는 법
이 편에서 만드는 파일
web-practice/portfolio/
~ index.html (header·main·footer 골격 추가)
+ projects.html
+ contact.html개념 정리
시맨틱 섹셔닝 요소
| 요소 | 의미 | 페이지당 개수 |
|---|---|---|
header | 사이트 또는 섹션의 도입부(로고·내비 등) | 페이지 최상단에 보통 1개 |
nav | 주요 내비게이션 링크 묶음 | 1개 이상 |
main | 그 페이지의 고유한 본문 | 페이지당 정확히 1개 |
section | 주제로 묶이는 콘텐츠 구역(보통 제목 동반) | 필요한 만큼 |
article | 그 자체로 독립 배포 가능한 콘텐츠(카드·게시물 등) | 필요한 만큼 |
aside | 본문과 간접적으로만 관련된 부가 콘텐츠 | 필요한 만큼 |
footer | 사이트 또는 섹션의 마무리(저작권·연락 등) | 보통 1개 |
div는 언제 쓰는가
시맨틱 요소는 “이 구역이 무엇인지” 스크린 리더와 검색 엔진에 알립니다. div는 아무 의미도 전달하지 않는 순수 그룹핑 요소입니다. 판단 기준은 한 가지입니다.
| 질문 | 답이 예이면 | 답이 아니오이면 |
|---|---|---|
| 이 구역에 이름을 붙일 수 있는가(소개, 내비게이션, 카드 등) | 시맨틱 요소 사용 | div 사용(스타일링 훅 전용) |
이 과목은 CSS를 쓰지 않으므로 div가 거의 등장하지 않습니다. div는 css_fundamentals에서 레이아웃을 잡을 때 필요한 자리에만 추가합니다.
이 사이트의 공통 header·footer 구조
design-spec.md 1절에 따라 세 페이지 모두 같은 header·footer를 씁니다.
| 영역 | 구조 |
|---|---|
| header | <header class="site-header"> 안에 <a class="logo"> + <nav class="site-nav">(링크 3개, 현재 페이지에 aria-current="page") |
| footer | <footer class="site-footer"> 안에 저작권 문구 + SNS 링크 리스트 |
실습
1. 파일 준비
index.html은 02편 파일을 이어 씁니다. projects.html·contact.html은 새로 만들고, index.html의 head 부분(doctype·meta·favicon)을 그대로 복사한 뒤 title만 페이지에 맞게 바꿉니다.
2. 코드 작성 — index.html
<!-- portfolio/index.html -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Zeno Kim — 소개</title>
</head>
<body>
<header class="site-header">
<a class="logo" href="index.html">Zeno Kim</a>
<nav class="site-nav">
<a href="index.html" aria-current="page">소개</a>
<a href="projects.html">프로젝트</a>
<a href="contact.html">연락</a>
</nav>
</header>
<main>
<section class="hero">
<!-- 04편: 히어로 제목·부제 -->
</section>
<section class="about">
<!-- 04편: 자기소개 문단 -->
</section>
<section class="skills">
<!-- 07편: 기술 스택 리스트 -->
</section>
<section class="career">
<!-- 07편: 경력 표 -->
</section>
</main>
<footer class="site-footer">
<p>© 2026 Zeno Kim. 이 사이트는 학습용으로 제작되었습니다.</p>
</footer>
</body>
</html>3. 코드 작성 — projects.html
<!-- portfolio/projects.html -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Zeno Kim — 프로젝트</title>
</head>
<body>
<header class="site-header">
<a class="logo" href="index.html">Zeno Kim</a>
<nav class="site-nav">
<a href="index.html">소개</a>
<a href="projects.html" aria-current="page">프로젝트</a>
<a href="contact.html">연락</a>
</nav>
</header>
<main>
<div class="project-grid">
<!-- 06·08편: 프로젝트 카드(article) 6개 -->
</div>
</main>
<footer class="site-footer">
<p>© 2026 Zeno Kim. 이 사이트는 학습용으로 제작되었습니다.</p>
</footer>
</body>
</html>4. 코드 작성 — contact.html
<!-- portfolio/contact.html -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Zeno Kim — 연락</title>
</head>
<body>
<header class="site-header">
<a class="logo" href="index.html">Zeno Kim</a>
<nav class="site-nav">
<a href="index.html">소개</a>
<a href="projects.html">프로젝트</a>
<a href="contact.html" aria-current="page">연락</a>
</nav>
</header>
<main>
<form class="contact-form">
<!-- 10~12편: 연락 폼 -->
</form>
<aside class="faq">
<!-- modern_html: FAQ 아코디언 -->
</aside>
</main>
<footer class="site-footer">
<p>© 2026 Zeno Kim. 이 사이트는 학습용으로 제작되었습니다.</p>
</footer>
</body>
</html>5. 실행
세 파일을 각각 브라우저로 열거나 npx serve web-practice/portfolio로 서버를 띄운 뒤 index.html·projects.html·contact.html을 차례로 엽니다.
6. 확인
- 세 페이지 모두 상단에 로고
Zeno Kim과 내비게이션 링크 3개가 보입니다. - 각 페이지에서 내비게이션 링크를 눌러 세 페이지 사이를 이동할 수 있습니다(05편에서 링크 문법을 더 깊게 다룹니다).
- 화면 하단에 저작권 문구가 보입니다.
- 페이지 소스에서
main이 페이지당 정확히 1개인지 확인합니다.
직접 해보기
contact.html의aside.faq를main바깥,footer바로 앞으로 옮겨도 되는지 생각해 보세요.
답 보기
aside는 main 안에도, main 밖에도 놓을 수 있습니다. 다만 FAQ가 연락 폼과 같은 페이지의 보조 정보이므로 이 실습에서는 main 안에 두어 “이 페이지 안의 부가 콘텐츠”라는 관계를 명확히 합니다.
projects.html에header를 하나 더 추가해도 되는지header요소의 콘텐츠 모델을 생각해 보세요.
답 보기
가능합니다. header는 페이지 전체뿐 아니라 article이나 section 같은 sectioning 요소 안에도 각각 둘 수 있습니다. 다만 08편에서 만들 프로젝트 카드(article)에는 카드 내부 제목만 있으면 충분하므로 별도 header를 추가하지 않습니다.
자주 하는 실수
| 증상 | 원인 | 고치는 법 |
|---|---|---|
Nu HTML Checker가 main이 여러 개라고 경고(15편에서 발견) | body에 main을 실수로 두 번 작성 | 페이지당 main을 정확히 1개만 유지 |
모든 구역을 div로 채움 | 시맨틱 요소 존재를 잊음 | 이름 붙일 수 있는 구역인지 먼저 판단 |
nav를 header 밖에 단독으로 둠 | header와 nav의 포함 관계를 헷갈림 | 사이트 공통 내비게이션은 header 안에 배치 |
세 페이지의 aria-current="page" 값이 자기 페이지가 아닌 곳에 붙음 | 복사·붙여넣기 후 위치를 안 바꿈 | 각 페이지 nav에서 현재 페이지 링크에만 aria-current="page" 부여 |