드디어 완성 프로젝트!
HTML 시리즈 1편부터 9편까지 열심히 따라오셨습니다. 이번 편에서는 지금까지 배운 모든 것을 활용해 나를 소개하는 웹페이지를 완성합니다.
이 프로젝트를 마치면:
- HTML 구조와 시맨틱 태그를 실제 페이지에 적용할 수 있습니다.
- 다양한 태그를 조합해 원하는 화면을 만들 수 있습니다.
- CSS를 배울 준비가 됩니다. (CSS를 입히면 엄청나게 달라집니다!)
프로젝트 요구사항
아래 항목을 모두 포함해야 합니다.
| 구분 | 필수 내용 | 사용할 태그 |
|---|---|---|
| 구조 | 헤더, 메인, 푸터 구분 | header, main, footer |
| 네비게이션 | 페이지 내 섹션 이동 링크 | nav, a href="#id" |
| 자기소개 | 이름, 학교, 한 줄 소개 | h1, p, strong |
| 사진 | 본인 사진 또는 캐릭터 이미지 | img, alt |
| 좋아하는 것 | 취미·음악·게임 등 3개 이상 | ul, li |
| 학교 생활 | 좋아하는 과목·활동 설명 | section, h2, p |
| 꿈과 목표 | 장래 희망 또는 올해 목표 | article, ol |
| 연락처 | 이메일 또는 SNS 링크 | a, footer |
| 메타 정보 | description, OG 태그 | meta |
완성 코드 예시
이 코드는 예시입니다. 내용을 자신의 정보로 바꿔 작성하세요. 그대로 복사하면 의미가 없습니다!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>홍길동의 소개 페이지</title>
<meta name="description" content="중학교 2학년 홍길동입니다. 코딩과 게임을 좋아합니다." />
<meta property="og:title" content="홍길동의 소개 페이지" />
<meta property="og:description" content="코딩을 배우는 중학생 홍길동의 자기소개 페이지입니다." />
</head>
<body>
<!-- ===== 헤더 + 네비게이션 ===== -->
<header>
<h1>🦊 홍길동의 공간</h1>
<nav>
<ul>
<li><a href="#about">자기소개</a></li>
<li><a href="#hobbies">좋아하는 것</a></li>
<li><a href="#school">학교 생활</a></li>
<li><a href="#dream">꿈과 목표</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
</header>
<!-- ===== 메인 콘텐츠 ===== -->
<main>
<!-- 자기소개 섹션 -->
<section id="about">
<h2>자기소개</h2>
<img
src="https://picsum.photos/150/150?random=1"
alt="홍길동 프로필 사진"
width="150"
height="150"
/>
<h3>홍길동</h3>
<p>
안녕하세요! 저는 <strong>○○중학교 2학년 홍길동</strong>입니다.
코딩을 배우기 시작한 지 얼마 안 됐지만 정말 재미있어요!
</p>
<p>
이 페이지는 HTML만으로 만든 첫 번째 웹페이지입니다.
CSS를 배우면 더 예쁘게 꾸밀 예정이에요 😊
</p>
</section>
<!-- 좋아하는 것들 -->
<section id="hobbies">
<h2>좋아하는 것들</h2>
<h3>취미</h3>
<ul>
<li>🎮 롤플레잉 게임</li>
<li>🎵 K-POP 듣기</li>
<li>💻 코딩 (HTML 배우는 중!)</li>
<li>📚 판타지 소설 읽기</li>
</ul>
<h3>좋아하는 유튜버</h3>
<ul>
<li>
<a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer">
채널 이름 1
</a>
</li>
<li>
<a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer">
채널 이름 2
</a>
</li>
</ul>
</section>
<!-- 학교 생활 -->
<section id="school">
<h2>학교 생활</h2>
<article>
<h3>좋아하는 과목</h3>
<p>
<strong>수학</strong>과 <strong>정보</strong> 과목을 가장 좋아합니다.
수학은 논리적으로 생각하는 힘을 길러주고,
정보 시간에 처음으로 코딩을 접하게 됐어요.
</p>
</article>
<article>
<h3>동아리 활동</h3>
<p>코딩 동아리에서 활동하고 있습니다. 매주 목요일에 모여 같이 공부해요.</p>
</article>
<article>
<h3>이번 학기 성적 목표</h3>
<ol>
<li>수학 90점 이상</li>
<li>영어 듣기 만점</li>
<li>과학 실험 보고서 성실히 작성</li>
</ol>
</article>
</section>
<!-- 꿈과 목표 -->
<section id="dream">
<h2>꿈과 목표</h2>
<article>
<h3>장래 희망</h3>
<p>
웹 개발자가 되고 싶습니다. 직접 게임이나 앱을 만들어 많은 사람들이
쓰는 서비스를 개발하는 게 꿈이에요.
</p>
</article>
<article>
<h3>올해 코딩 목표</h3>
<ol>
<li>HTML 완전 정복 ✅ (달성!)</li>
<li>CSS 배우기</li>
<li>JavaScript로 간단한 게임 만들기</li>
</ol>
</article>
</section>
</main>
<!-- ===== 푸터 ===== -->
<footer id="contact">
<h2>연락처</h2>
<p>
이메일:
<a href="mailto:honggildong@example.com">honggildong@example.com</a>
</p>
<p>
GitHub:
<a href="https://github.com" target="_blank" rel="noopener noreferrer">github.com/honggildong</a>
</p>
<p>
<small>© 2026 홍길동. HTML만으로 만든 첫 번째 웹페이지.</small>
</p>
</footer>
</body>
</html>
완성 후 체크리스트
코드를 다 작성했다면 아래 항목을 하나씩 확인해 보세요.
- DOCTYPE, lang, charset, viewport 설정 완료
-
<title>에 본인 이름 포함 -
<meta name="description">작성 완료 -
<header>안에<nav>포함 -
<nav>링크 클릭 시 해당 섹션으로 이동 - 프로필 이미지에 적절한
alt텍스트 - 최소 1개의 순서 없는 목록 (
<ul>) - 최소 1개의 순서 있는 목록 (
<ol>) - 시맨틱 태그 (
<section>,<article>) 사용 -
<footer>에 연락처 정보 포함 - 외부 링크에
target="_blank" rel="noopener noreferrer"설정
다음 단계: CSS
지금 만든 페이지는 내용은 있지만 디자인이 없어 투박합니다. CSS 시리즈를 시작하면 이 페이지를 아래처럼 바꿀 수 있습니다.
- 배경색, 글자색, 글꼴 변경
- 카드 스타일 레이아웃
- 반응형 (스마트폰에서도 예쁘게)
- 마우스 오버 효과
- 애니메이션
HTML 시리즈 완료를 축하드립니다! 🎉
CSS 시리즈에서 만나요.