HTML 독학 가이드 10 - 실전 웹페이지 만들기
드디어 마지막 시간이에요! 지금까지 배운 모든 HTML 지식을 총동원해서 진짜 웹사이트를 만들어볼 거예요. 포트폴리오, 블로그, 랜딩 페이지까지 실전 프로젝트로 실력을 완성해봅시다!
프로젝트 1: 개인 포트폴리오 사이트
개발자 포트폴리오를 만들어볼게요.
전체 구조
portfolio/
index.html
about.html
projects.html
contact.html
css/
style.css
images/
profile.jpg
project1.jpgindex.html - 메인 페이지
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="웹 개발자 홍길동의 포트폴리오입니다.">
<!-- Open Graph -->
<meta property="og:title" content="홍길동 - 웹 개발자 포트폴리오">
<meta property="og:description" content="3년차 프론트엔드 개발자의 프로젝트를 소개합니다.">
<meta property="og:image" content="https://myportfolio.com/images/og-image.jpg">
<meta property="og:type" content="website">
<title>홍길동 - 웹 개발자 포트폴리오</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
}
/* 헤더 */
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
nav {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
nav h1 {
font-size: 24px;
}
nav ul {
list-style: none;
display: flex;
gap: 30px;
}
nav a {
color: white;
text-decoration: none;
font-weight: 500;
transition: opacity 0.3s;
}
nav a:hover {
opacity: 0.8;
}
/* 히어로 섹션 */
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 150px 20px 100px;
margin-top: 64px;
}
.hero h2 {
font-size: 48px;
margin-bottom: 20px;
}
.hero p {
font-size: 20px;
margin-bottom: 30px;
}
.btn {
display: inline-block;
background: white;
color: #667eea;
padding: 12px 30px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: transform 0.3s;
}
.btn:hover {
transform: translateY(-2px);
}
/* 소개 섹션 */
.about {
max-width: 1200px;
margin: 80px auto;
padding: 0 20px;
display: flex;
align-items: center;
gap: 60px;
}
.about img {
width: 300px;
height: 300px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.about-content h2 {
font-size: 36px;
margin-bottom: 20px;
color: #333;
}
.about-content p {
font-size: 18px;
color: #666;
margin-bottom: 15px;
}
/* 스킬 섹션 */
.skills {
background: #f8f9fa;
padding: 80px 20px;
}
.skills-container {
max-width: 1200px;
margin: 0 auto;
}
.skills h2 {
text-align: center;
font-size: 36px;
margin-bottom: 50px;
color: #333;
}
.skill-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.skill-item {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
text-align: center;
}
.skill-item h3 {
margin-bottom: 15px;
color: #667eea;
}
/* 푸터 */
footer {
background: #333;
color: white;
text-align: center;
padding: 40px 20px;
}
footer a {
color: #667eea;
text-decoration: none;
}
/* 반응형 */
@media (max-width: 768px) {
.hero h2 {
font-size: 32px;
}
.about {
flex-direction: column;
text-align: center;
}
nav ul {
gap: 15px;
font-size: 14px;
}
}
</style>
</head>
<body>
<!-- 헤더 -->
<header>
<nav>
<h1>홍길동</h1>
<ul>
<li><a href="index.html">홈</a></li>
<li><a href="about.html">소개</a></li>
<li><a href="projects.html">프로젝트</a></li>
<li><a href="contact.html">연락처</a></li>
</ul>
</nav>
</header>
<!-- 히어로 섹션 -->
<section class="hero">
<h2>안녕하세요, 웹 개발자 홍길동입니다</h2>
<p>사용자 경험을 최우선으로 생각하는 프론트엔드 개발자</p>
<a href="projects.html" class="btn">프로젝트 보기</a>
</section>
<!-- 소개 -->
<section class="about">
<img src="images/profile.jpg" alt="프로필 사진">
<div class="about-content">
<h2>About Me</h2>
<p>
안녕하세요! 3년차 프론트엔드 개발자 홍길동입니다.
</p>
<p>
React, Vue.js, JavaScript를 사용하여 사용자 친화적인
웹 애플리케이션을 만듭니다.
</p>
<p>
깔끔한 코드와 아름다운 UI/UX를 추구하며,
끊임없이 새로운 기술을 배우고 있습니다.
</p>
</div>
</section>
<!-- 스킬 -->
<section class="skills">
<div class="skills-container">
<h2>Skills</h2>
<div class="skill-grid">
<div class="skill-item">
<h3>Frontend</h3>
<p>HTML, CSS, JavaScript</p>
<p>React, Vue.js, Next.js</p>
</div>
<div class="skill-item">
<h3>Backend</h3>
<p>Node.js, Express</p>
<p>MongoDB, PostgreSQL</p>
</div>
<div class="skill-item">
<h3>Tools</h3>
<p>Git, GitHub</p>
<p>VS Code, Figma</p>
</div>
<div class="skill-item">
<h3>Others</h3>
<p>Responsive Design</p>
<p>REST API, GraphQL</p>
</div>
</div>
</div>
</section>
<!-- 푸터 -->
<footer>
<p>© 2025 홍길동. All rights reserved.</p>
<p>
<a href="mailto:hong@example.com">hong@example.com</a> |
<a href="https://github.com/honggildong" target="_blank">GitHub</a>
</p>
</footer>
</body>
</html>projects.html - 프로젝트 페이지
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>프로젝트 - 홍길동 포트폴리오</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding-top: 80px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 60px 20px;
}
h1 {
text-align: center;
font-size: 42px;
margin-bottom: 60px;
color: #333;
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
}
.project-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.project-card:hover {
transform: translateY(-10px);
}
.project-card img {
width: 100%;
height: 250px;
object-fit: cover;
}
.project-info {
padding: 30px;
}
.project-info h3 {
font-size: 24px;
margin-bottom: 15px;
color: #667eea;
}
.project-info p {
color: #666;
margin-bottom: 20px;
line-height: 1.6;
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.tag {
background: #e9ecef;
padding: 5px 12px;
border-radius: 15px;
font-size: 14px;
color: #495057;
}
.project-links {
display: flex;
gap: 15px;
}
.project-links a {
padding: 8px 20px;
border-radius: 5px;
text-decoration: none;
font-weight: 500;
transition: opacity 0.3s;
}
.demo-btn {
background: #667eea;
color: white;
}
.code-btn {
background: #333;
color: white;
}
.project-links a:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div class="container">
<h1>Projects</h1>
<div class="projects-grid">
<!-- 프로젝트 1 -->
<article class="project-card">
<img src="images/project1.jpg" alt="쇼핑몰 프로젝트">
<div class="project-info">
<h3>이커머스 쇼핑몰</h3>
<p>
React와 Redux를 사용한 풀스택 전자상거래 플랫폼입니다.
결제, 장바구니, 상품 관리 기능을 구현했습니다.
</p>
<div class="tags">
<span class="tag">React</span>
<span class="tag">Redux</span>
<span class="tag">Node.js</span>
<span class="tag">MongoDB</span>
</div>
<div class="project-links">
<a href="#" class="demo-btn">데모 보기</a>
<a href="#" class="code-btn">코드 보기</a>
</div>
</div>
</article>
<!-- 프로젝트 2 -->
<article class="project-card">
<img src="images/project2.jpg" alt="블로그 프로젝트">
<div class="project-info">
<h3>개인 블로그 플랫폼</h3>
<p>
마크다운 기반 블로그 시스템입니다.
댓글, 태그, 검색 기능을 포함하고 있습니다.
</p>
<div class="tags">
<span class="tag">Vue.js</span>
<span class="tag">Express</span>
<span class="tag">PostgreSQL</span>
</div>
<div class="project-links">
<a href="#" class="demo-btn">데모 보기</a>
<a href="#" class="code-btn">코드 보기</a>
</div>
</div>
</article>
<!-- 프로젝트 3 -->
<article class="project-card">
<img src="images/project3.jpg" alt="날씨 앱">
<div class="project-info">
<h3>실시간 날씨 앱</h3>
<p>
OpenWeather API를 사용한 날씨 정보 애플리케이션입니다.
위치 기반 날씨 정보를 제공합니다.
</p>
<div class="tags">
<span class="tag">JavaScript</span>
<span class="tag">API</span>
<span class="tag">CSS</span>
</div>
<div class="project-links">
<a href="#" class="demo-btn">데모 보기</a>
<a href="#" class="code-btn">코드 보기</a>
</div>
</div>
</article>
</div>
</div>
</body>
</html>
프로젝트 2: 랜딩 페이지
제품이나 서비스를 소개하는 랜딩 페이지를 만들어볼게요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="TaskMaster - 최고의 할 일 관리 앱">
<title>TaskMaster - 할 일 관리의 새로운 기준</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* 헤더 */
.header {
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 20px 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #667eea;
}
.nav-menu {
display: flex;
gap: 30px;
list-style: none;
}
.nav-menu a {
text-decoration: none;
color: #333;
font-weight: 500;
}
.cta-button {
background: #667eea;
color: white;
padding: 10px 25px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
}
/* 히어로 섹션 */
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 150px 20px 100px;
margin-top: 64px;
}
.hero h1 {
font-size: 56px;
margin-bottom: 20px;
}
.hero p {
font-size: 24px;
margin-bottom: 40px;
opacity: 0.9;
}
.hero-buttons {
display: flex;
gap: 20px;
justify-content: center;
}
.btn-primary {
background: white;
color: #667eea;
padding: 15px 40px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
font-size: 18px;
}
.btn-secondary {
background: transparent;
color: white;
border: 2px solid white;
padding: 15px 40px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
font-size: 18px;
}
/* 기능 섹션 */
.features {
max-width: 1200px;
margin: 100px auto;
padding: 0 20px;
}
.features h2 {
text-align: center;
font-size: 42px;
margin-bottom: 60px;
color: #333;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 50px;
}
.feature-item {
text-align: center;
}
.feature-icon {
font-size: 48px;
margin-bottom: 20px;
}
.feature-item h3 {
font-size: 24px;
margin-bottom: 15px;
color: #333;
}
.feature-item p {
color: #666;
line-height: 1.6;
}
/* 가격 섹션 */
.pricing {
background: #f8f9fa;
padding: 100px 20px;
}
.pricing-container {
max-width: 1200px;
margin: 0 auto;
}
.pricing h2 {
text-align: center;
font-size: 42px;
margin-bottom: 60px;
color: #333;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.pricing-card {
background: white;
padding: 40px;
border-radius: 10px;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.pricing-card.featured {
border: 3px solid #667eea;
transform: scale(1.05);
}
.pricing-card h3 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
.price {
font-size: 48px;
font-weight: bold;
color: #667eea;
margin-bottom: 10px;
}
.price span {
font-size: 18px;
color: #666;
}
.pricing-card ul {
list-style: none;
margin: 30px 0;
text-align: left;
}
.pricing-card li {
padding: 10px 0;
color: #666;
}
.pricing-card li::before {
content: "✓ ";
color: #667eea;
font-weight: bold;
}
.pricing-btn {
display: block;
background: #667eea;
color: white;
padding: 12px 30px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
}
/* CTA 섹션 */
.cta-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 100px 20px;
}
.cta-section h2 {
font-size: 42px;
margin-bottom: 20px;
}
.cta-section p {
font-size: 20px;
margin-bottom: 40px;
}
/* 푸터 */
footer {
background: #333;
color: white;
padding: 60px 20px 30px;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 40px;
}
.footer-section h3 {
margin-bottom: 20px;
}
.footer-section ul {
list-style: none;
}
.footer-section a {
color: #ccc;
text-decoration: none;
line-height: 2;
}
.copyright {
text-align: center;
padding-top: 30px;
border-top: 1px solid #555;
color: #999;
}
</style>
</head>
<body>
<!-- 헤더 -->
<header class="header">
<div class="nav-container">
<div class="logo">TaskMaster</div>
<ul class="nav-menu">
<li><a href="#features">기능</a></li>
<li><a href="#pricing">가격</a></li>
<li><a href="#about">소개</a></li>
</ul>
<a href="#" class="cta-button">무료 시작하기</a>
</div>
</header>
<!-- 히어로 -->
<section class="hero">
<h1>할 일 관리의 새로운 기준</h1>
<p>TaskMaster로 생산성을 극대화하세요</p>
<div class="hero-buttons">
<a href="#" class="btn-primary">무료로 시작하기</a>
<a href="#" class="btn-secondary">더 알아보기</a>
</div>
</section>
<!-- 기능 -->
<section class="features" id="features">
<h2>왜 TaskMaster인가?</h2>
<div class="features-grid">
<div class="feature-item">
<div class="feature-icon">🎯</div>
<h3>쉽고 직관적</h3>
<p>복잡한 설정 없이 바로 시작할 수 있습니다. 누구나 쉽게 사용할 수 있는 인터페이스</p>
</div>
<div class="feature-item">
<div class="feature-icon">📱</div>
<h3>모든 기기에서</h3>
<p>PC, 모바일, 태블릿 어디서든 동기화됩니다. 언제 어디서나 할 일을 관리하세요</p>
</div>
<div class="feature-item">
<div class="feature-icon">👥</div>
<h3>팀 협업</h3>
<p>팀원과 함께 프로젝트를 관리하고 진행 상황을 공유할 수 있습니다</p>
</div>
</div>
</section>
<!-- 가격 -->
<section class="pricing" id="pricing">
<div class="pricing-container">
<h2>요금제</h2>
<div class="pricing-grid">
<div class="pricing-card">
<h3>무료</h3>
<div class="price">₩0<span>/월</span></div>
<ul>
<li>개인 프로젝트 3개</li>
<li>할 일 50개</li>
<li>기본 기능</li>
<li>모바일 앱</li>
</ul>
<a href="#" class="pricing-btn">시작하기</a>
</div>
<div class="pricing-card featured">
<h3>프로</h3>
<div class="price">₩9,900<span>/월</span></div>
<ul>
<li>무제한 프로젝트</li>
<li>무제한 할 일</li>
<li>고급 기능</li>
<li>우선 지원</li>
<li>팀 협업 기능</li>
</ul>
<a href="#" class="pricing-btn">시작하기</a>
</div>
<div class="pricing-card">
<h3>팀</h3>
<div class="price">₩29,000<span>/월</span></div>
<ul>
<li>모든 프로 기능</li>
<li>최대 20명 팀원</li>
<li>팀 대시보드</li>
<li>전담 지원</li>
<li>API 접근</li>
</ul>
<a href="#" class="pricing-btn">시작하기</a>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-section">
<h2>지금 바로 시작하세요</h2>
<p>신용카드 정보 없이 무료로 사용해보세요</p>
<a href="#" class="btn-primary">무료 체험 시작</a>
</section>
<!-- 푸터 -->
<footer>
<div class="footer-container">
<div class="footer-section">
<h3>TaskMaster</h3>
<p>최고의 할 일 관리 도구</p>
</div>
<div class="footer-section">
<h3>제품</h3>
<ul>
<li><a href="#">기능</a></li>
<li><a href="#">가격</a></li>
<li><a href="#">업데이트</a></li>
</ul>
</div>
<div class="footer-section">
<h3>회사</h3>
<ul>
<li><a href="#">소개</a></li>
<li><a href="#">채용</a></li>
<li><a href="#">연락처</a></li>
</ul>
</div>
<div class="footer-section">
<h3>지원</h3>
<ul>
<li><a href="#">도움말</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">커뮤니티</a></li>
</ul>
</div>
</div>
<div class="copyright">
<p>© 2025 TaskMaster. All rights reserved.</p>
</div>
</footer>
</body>
</html>프로젝트 3: 블로그 글 페이지
블로그 게시글 페이지를 만들어볼게요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTML 독학 가이드 - 실전에서 바로 쓸 수 있는 HTML 완벽 정리">
<meta name="author" content="홍길동">
<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:title" content="HTML 독학 가이드 - 실전 웹페이지 만들기">
<meta property="og:description" content="지금까지 배운 HTML을 총동원하여 실제 웹사이트를 만들어봅니다">
<meta property="og:image" content="https://blog.com/images/html-guide.jpg">
<meta property="og:url" content="https://blog.com/html-guide-practical">
<title>HTML 독학 가이드 - 실전 웹페이지 만들기 | 내 블로그</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.8;
color: #333;
}
/* 헤더 */
header {
background: white;
border-bottom: 1px solid #e9ecef;
padding: 20px 0;
}
.header-container {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.blog-title {
font-size: 28px;
color: #667eea;
text-decoration: none;
}
/* 아티클 */
article {
max-width: 800px;
margin: 60px auto;
padding: 0 20px;
}
.post-header {
margin-bottom: 40px;
}
.post-title {
font-size: 42px;
margin-bottom: 20px;
line-height: 1.3;
}
.post-meta {
color: #666;
font-size: 16px;
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.post-meta span {
display: flex;
align-items: center;
gap: 5px;
}
.featured-image {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 40px;
}
.post-content {
font-size: 18px;
}
.post-content h2 {
font-size: 32px;
margin: 40px 0 20px;
color: #333;
}
.post-content h3 {
font-size: 24px;
margin: 30px 0 15px;
color: #495057;
}
.post-content p {
margin-bottom: 20px;
}
.post-content ul,
.post-content ol {
margin: 20px 0;
padding-left: 30px;
}
.post-content li {
margin-bottom: 10px;
}
.post-content code {
background: #f8f9fa;
padding: 2px 6px;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 16px;
}
.post-content pre {
background: #282c34;
color: #abb2bf;
padding: 20px;
border-radius: 5px;
overflow-x: auto;
margin: 20px 0;
}
.post-content pre code {
background: none;
padding: 0;
color: inherit;
}
.post-content blockquote {
border-left: 4px solid #667eea;
padding-left: 20px;
margin: 20px 0;
color: #666;
font-style: italic;
}
/* 태그 */
.tags {
margin: 40px 0;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.tag {
background: #e9ecef;
padding: 6px 15px;
border-radius: 15px;
font-size: 14px;
color: #495057;
text-decoration: none;
}
.tag:hover {
background: #dee2e6;
}
/* 작성자 정보 */
.author-box {
background: #f8f9fa;
padding: 30px;
border-radius: 10px;
margin: 60px 0;
display: flex;
gap: 20px;
align-items: center;
}
.author-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
}
.author-info h3 {
margin-bottom: 10px;
font-size: 20px;
}
.author-info p {
color: #666;
font-size: 16px;
}
/* 댓글 */
.comments {
margin-top: 60px;
}
.comments h2 {
font-size: 28px;
margin-bottom: 30px;
}
.comment-form textarea {
width: 100%;
padding: 15px;
border: 1px solid #dee2e6;
border-radius: 5px;
font-family: inherit;
font-size: 16px;
resize: vertical;
min-height: 100px;
}
.comment-form button {
background: #667eea;
color: white;
padding: 12px 30px;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
margin-top: 15px;
}
/* 푸터 */
footer {
background: #f8f9fa;
padding: 40px 20px;
text-align: center;
margin-top: 80px;
}
</style>
</head>
<body>
<!-- 헤더 -->
<header>
<div class="header-container">
<a href="/" class="blog-title">내 블로그</a>
</div>
</header>
<!-- 아티클 -->
<article>
<div class="post-header">
<h1 class="post-title">HTML 독학 가이드 - 실전 웹페이지 만들기</h1>
<div class="post-meta">
<span>📅 2025-11-25</span>
<span>👤 홍길동</span>
<span>⏱️ 25분 읽기</span>
<span>👁️ 1,234 조회</span>
</div>
</div>
<img src="images/featured.jpg" alt="썸네일" class="featured-image">
<div class="post-content">
<p>
드디어 마지막 시간이에요! 지금까지 배운 모든 HTML 지식을 총동원해서
진짜 웹사이트를 만들어볼 거예요.
</p>
<h2>프로젝트 1: 개인 포트폴리오</h2>
<p>
첫 번째로 개인 포트폴리오 사이트를 만들어볼게요.
포트폴리오는 개발자에게 필수예요!
</p>
<h3>주요 기능</h3>
<ul>
<li>반응형 디자인</li>
<li>프로젝트 갤러리</li>
<li>연락 폼</li>
<li>스킬 섹션</li>
</ul>
<pre><code><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내 포트폴리오</title>
</head>
<body>
<h1>안녕하세요!</h1>
</body>
</html></code></pre>
<blockquote>
실전 프로젝트를 통해 배운 지식을 확실하게 다질 수 있어요.
</blockquote>
<h2>다음 단계</h2>
<p>
이제 CSS를 배워서 더 아름답게 만들어보세요!
JavaScript로 동적인 기능도 추가할 수 있습니다.
</p>
</div>
<!-- 태그 -->
<div class="tags">
<a href="#" class="tag">#HTML</a>
<a href="#" class="tag">#웹개발</a>
<a href="#" class="tag">#실전프로젝트</a>
<a href="#" class="tag">#포트폴리오</a>
</div>
<!-- 작성자 -->
<div class="author-box">
<img src="images/author.jpg" alt="작성자" class="author-avatar">
<div class="author-info">
<h3>홍길동</h3>
<p>3년차 프론트엔드 개발자입니다. 쉽고 재미있게 웹 개발을 알려드려요.</p>
</div>
</div>
<!-- 댓글 -->
<section class="comments">
<h2>댓글</h2>
<form class="comment-form">
<textarea placeholder="댓글을 입력하세요..."></textarea>
<button type="submit">댓글 작성</button>
</form>
</section>
</article>
<!-- 푸터 -->
<footer>
<p>© 2025 내 블로그. All rights reserved.</p>
</footer>
</body>
</html>체크리스트
실전 웹페이지를 만들 때 꼭 확인하세요!
HTML 구조
-
<!DOCTYPE html>선언했나요? -
<html lang="ko">설정했나요? -
<meta charset="UTF-8">넣었나요? -
<meta name="viewport">넣었나요? - 시맨틱 태그 사용했나요?
SEO
-
<title>태그가 의미있나요? - meta description 작성했나요?
- Open Graph 태그 넣었나요?
- 이미지에 alt 속성 넣었나요?
- 제목 태그 순서가 올바른가요?
접근성
- 색상 대비가 충분한가요?
- 키보드로 탐색 가능한가요?
- 링크 텍스트가 명확한가요?
- form에 label이 있나요?
성능
- 이미지 크기 최적화했나요?
- 불필요한 코드 제거했나요?
- CSS/JS를 압축했나요?
학습 로드맵
HTML을 마스터했다면 다음 단계로!
1단계: CSS 마스터
기초 → Flexbox → Grid → 반응형 → 애니메이션2단계: JavaScript 기초
변수/함수 → DOM 조작 → 이벤트 → API → ES6+3단계: 프레임워크
React / Vue.js / Svelte 중 하나 선택4단계: 백엔드 기초
Node.js → Express → 데이터베이스마치며
HTML 독학 가이드를 모두 완료하셨네요!
지금까지 배운 내용:
- HTML 기본 구조와 문법
- 텍스트, 링크, 이미지, 멀티미디어
- 리스트, 테이블, 폼
- 시맨틱 태그와 레이아웃
- 메타 태그와 SEO
- 실전 웹페이지 제작
중요한 건 계속 만들어보는 거예요!
- 개인 프로젝트 시작하기
- 코드펜(CodePen)에서 실험하기
- 다른 사이트 분석하고 따라 만들기
- 매일 조금씩 코딩하기
HTML은 웹의 시작이에요. 여기서 멈추지 말고 CSS, JavaScript로 계속 나아가세요!
화이팅!
HTML 독학 가이드 시리즈:
- 이전: HTML 독학 가이드 - 메타 태그와 SEO
- 시리즈 처음부터: HTML 독학 가이드 - 소개 및 시작하기