레슨 8 / 9·25분
실전 웹 페이지 만들기
프로젝트: 포트폴리오 페이지
지금까지 배운 HTML과 CSS를 종합하여 간단한 포트폴리오 페이지를 만들어 봅니다. 시맨틱 구조, Flexbox/Grid, 반응형 디자인, 트랜지션을 모두 활용합니다.
HTML 구조
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>홍길동 | 포트폴리오</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- 네비게이션 -->
<header class="header">
<nav class="nav">
<a href="#" class="logo">Portfolio</a>
<ul class="nav-links">
<li><a href="#about">소개</a></li>
<li><a href="#skills">기술</a></li>
<li><a href="#projects">프로젝트</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
</header>
<main>
<!-- 히어로 섹션 -->
<section class="hero">
<h1>안녕하세요,<br /><strong>홍길동</strong>입니다</h1>
<p>프론트엔드 개발자 | UI/UX에 관심이 많습니다</p>
<a href="#projects" class="btn">프로젝트 보기</a>
</section>
<!-- 기술 스택 -->
<section id="skills" class="skills">
<h2>기술 스택</h2>
<div class="skill-grid">
<div class="skill-card">
<h3>HTML & CSS</h3>
<p>시맨틱 마크업, 반응형 레이아웃</p>
</div>
<div class="skill-card">
<h3>JavaScript</h3>
<p>ES6+, DOM 조작, 비동기 처리</p>
</div>
<div class="skill-card">
<h3>React</h3>
<p>컴포넌트 설계, 상태 관리</p>
</div>
</div>
</section>
<!-- 프로젝트 -->
<section id="projects" class="projects">
<h2>프로젝트</h2>
<div class="project-grid">
<article class="project-card">
<img src="project1.jpg" alt="프로젝트 1" />
<div class="project-info">
<h3>날씨 앱</h3>
<p>OpenWeather API를 활용한 날씨 조회 앱</p>
<div class="project-tags">
<span>React</span>
<span>API</span>
</div>
</div>
</article>
<article class="project-card">
<img src="project2.jpg" alt="프로젝트 2" />
<div class="project-info">
<h3>할 일 관리</h3>
<p>드래그 앤 드롭 기반 투두 리스트</p>
<div class="project-tags">
<span>TypeScript</span>
<span>CSS Grid</span>
</div>
</div>
</article>
</div>
</section>
</main>
<footer class="footer">
<p>© 2024 홍길동. All rights reserved.</p>
</footer>
</body>
</html>CSS 스타일
css
/* ── 리셋 & 기본 ── */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Pretendard', -apple-system, sans-serif;
line-height: 1.6;
color: #1f2937;
}
/* ── 네비게이션 ── */
.header {
position: sticky;
top: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid #e5e7eb;
z-index: 100;
}
.nav {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-size: 1.25rem;
font-weight: 700;
color: #1f2937;
text-decoration: none;
}
.nav-links {
display: flex;
gap: 32px;
list-style: none;
}
.nav-links a {
text-decoration: none;
color: #6b7280;
transition: color 0.2s;
}
.nav-links a:hover {
color: #3b82f6;
}
/* ── 히어로 ── */
.hero {
min-height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 40px 24px;
}
.hero h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.2;
margin-bottom: 16px;
}
.hero h1 strong {
color: #3b82f6;
}
.btn {
display: inline-block;
margin-top: 24px;
padding: 12px 32px;
background: #3b82f6;
color: white;
text-decoration: none;
border-radius: 8px;
transition: background 0.2s, transform 0.2s;
}
.btn:hover {
background: #2563eb;
transform: translateY(-2px);
}
/* ── 기술 스택 ── */
.skills, .projects {
max-width: 1200px;
margin: 0 auto;
padding: 80px 24px;
}
.skills h2, .projects h2 {
font-size: 1.75rem;
text-align: center;
margin-bottom: 40px;
}
.skill-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 24px;
}
.skill-card {
padding: 32px;
background: #f9fafb;
border-radius: 12px;
text-align: center;
transition: transform 0.2s, box-shadow 0.2s;
}
.skill-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
/* ── 프로젝트 ── */
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 24px;
}
.project-card {
border-radius: 12px;
overflow: hidden;
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: transform 0.2s, box-shadow 0.2s;
}
.project-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.project-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.project-info {
padding: 20px;
}
.project-tags {
display: flex;
gap: 8px;
margin-top: 12px;
}
.project-tags span {
padding: 4px 12px;
background: #eff6ff;
color: #3b82f6;
border-radius: 20px;
font-size: 0.8rem;
}
/* ── 푸터 ── */
.footer {
text-align: center;
padding: 32px;
color: #9ca3af;
border-top: 1px solid #e5e7eb;
}
/* ── 반응형 ── */
@media (max-width: 768px) {
.nav-links { display: none; }
.project-grid {
grid-template-columns: 1fr;
}
}💡
이 과정에서 배운 모든 개념이 사용되었습니다: 시맨틱 태그(header, main, section, article, footer), Flexbox(네비게이션, 히어로), Grid(카드 레이아웃), 반응형(clamp, media query), 트랜지션(hover 효과). 실제 프로젝트에서는 이 기본 구조를 확장하며 페이지를 발전시켜 나가세요.