LEVEL 18 QUEST

멀티페이지 사이트 완성하기

헤더, 푸터, 네비게이션을 만들고 완성도 높은 멀티페이지 사이트를 구축해보세요!

LEVEL 18 · LESSON 4

진짜 웹사이트처럼 만들어보자!

단순한 한 페이지가 아니라, 여러 페이지가 연결된 진짜 웹사이트를 구축해봅시다.
헤더·네비게이션·푸터를 만들고 4개의 페이지를 완성하는 여정을 시작합니다.

🔝 <header> + <nav>

📄 <main> 콘텐츠

📐 레이아웃 구조

🗺️ 사이트맵 설계

🏗️ 멀티페이지 사이트 완성!

🏗️ 웹사이트 구조 설계

비유로 이해하기

웹사이트는 건물과 같습니다. 건물을 지을 때 먼저 설계도(도면)를 그리듯이, 웹사이트를 만들기 전에도 어떤 페이지가 있을지, 어떻게 연결될지를 미리 설계해야 합니다.

벽도 없이 방부터 짓는다면 어떻게 될까요? 나중에 전부 뜯어고쳐야 합니다. 웹사이트도 마찬가지입니다. 처음에 구조를 잘 잡아두면 나중에 수정이 훨씬 편해집니다!

웹사이트 설계의 첫 단계는 사이트맵(Sitemap)을 만드는 것입니다. 사이트맵이란 사이트에 어떤 페이지가 있고, 어떻게 연결되는지를 트리(나무) 구조로 정리한 문서입니다. 우리는 4개의 페이지로 구성된 간단한 포트폴리오 사이트를 만들 예정입니다.

📍 우리가 만들 사이트맵

카드를 클릭하면 각 페이지의 역할을 확인할 수 있어요.

🌐 mysite.com

🏠

Home

index.html

사이트의 대문 페이지입니다. 방문자가 처음 보게 되는 페이지로, 사이트를 소개하고 다른 페이지로 안내합니다.

👤

About

about.html

나를 소개하는 페이지입니다. 자기소개, 기술 스택, 경력 등을 담습니다.

💼

Portfolio

portfolio.html

내가 만든 작품들을 모아두는 페이지입니다. 프로젝트 카드, 스크린샷, 링크 등을 보여줍니다.

✉️

Contact

contact.html

연락처를 안내하는 페이지입니다. 이메일, SNS, 연락 폼 등을 담습니다.

💡 왜 index.html이 홈 페이지인가요?

웹 서버는 파일 이름을 지정하지 않으면 자동으로 index.html을 찾아서 보여줍니다. 그래서 mysite.com에 접속하면 자동으로 mysite.com/index.html이 열립니다. 마치 책의 목차처럼, index라는 단어 자체가 "여기서 시작"을 의미합니다!

🔒

여기까지는 미리보기입니다

멀티페이지 사이트 완성하기
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)