지식 도서관HTML/CSS 웹페이지 만들기12강

12강

종합 실습: 한 페이지 사이트

5분 조회 1

이번 강에서 배울 것

  • 한 페이지 포트폴리오 사이트 전체 구조 설계
  • Hero 섹션, About, Skills, Contact 4개 섹션 구현
  • 네비게이션 고정 + 스크롤 링크
  • Flexbox + Grid 실전 조합
  • 완성 코드 전체 — 복사해서 바로 사용 가능

1. 완성 목표 사이트 구조

my-portfolio/
├── index.html
└── style.css

페이지 구성:
┌─────────────────────────────────────┐
│  HEADER (고정 네비게이션)             │
├─────────────────────────────────────┤
│  HERO — 이름, 소개, CTA 버튼         │
├─────────────────────────────────────┤
│  ABOUT — 사진 + 자기소개             │
├─────────────────────────────────────┤
│  SKILLS — 기술 카드 격자             │
├─────────────────────────────────────┤
│  CONTACT — 이메일, 링크              │
├─────────────────────────────────────┤
│  FOOTER                             │
└─────────────────────────────────────┘

2. index.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="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- 네비게이션 -->
  <header class="navbar">
    <div class="nav-logo">Portfolio</div>
    <nav>
      <ul class="nav-links">
        <li><a href="#about">소개</a></li>
        <li><a href="#skills">기술</a></li>
        <li><a href="#contact">연락처</a></li>
      </ul>
    </nav>
  </header>

  <!-- 히어로 섹션 -->
  <section class="hero">
    <div class="hero-content">
      <p class="hero-sub">안녕하세요, 저는</p>
      <h1 class="hero-name">홍길동입니다</h1>
      <p class="hero-desc">프론트엔드 개발자를 꿈꾸는 웹 개발 입문자입니다.</p>
      <a href="#contact" class="btn-primary">연락하기</a>
    </div>
  </section>

  <!-- 소개 섹션 -->
  <section id="about" class="section about-section">
    <h2 class="section-title">About Me</h2>
    <div class="about-grid">
      <div class="about-img">
        <img src="https://via.placeholder.com/300x300" alt="프로필 사진">
      </div>
      <div class="about-text">
        <h3>웹을 배우는 중입니다</h3>
        <p>HTML, CSS, JavaScript를 공부하며 나만의 웹사이트를 만들어가고 있습니다. 사용자 친화적인 인터페이스를 만드는 것에 관심이 많습니다.</p>
      </div>
    </div>
  </section>

  <!-- 기술 섹션 -->
  <section id="skills" class="section skills-section">
    <h2 class="section-title">Skills</h2>
    <div class="skills-grid">
      <div class="skill-card"><span>🌐</span><p>HTML5</p></div>
      <div class="skill-card"><span>🎨</span><p>CSS3</p></div>
      <div class="skill-card"><span>⚡</span><p>JavaScript</p></div>
      <div class="skill-card"><span>📱</span><p>반응형</p></div>
      <div class="skill-card"><span>🗃️</span><p>Git</p></div>
      <div class="skill-card"><span>🎯</span><p>Figma</p></div>
    </div>
  </section>

  <!-- 연락처 섹션 -->
  <section id="contact" class="section contact-section">
    <h2 class="section-title">Contact</h2>
    <p>프로젝트 제안이나 질문이 있으시면 연락 주세요.</p>
    <a href="mailto:your@email.com" class="btn-primary">이메일 보내기</a>
  </section>

  <footer class="footer">
    <p>© 2024 홍길동. Built with HTML & CSS.</p>
  </footer>
</body>
</html>

3. style.css — 전체 CSS 코드

/* ===== 리셋 & 기본 설정 ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --text: #1f2937;
  --text-light: #6b7280;
  --bg: #ffffff;
  --bg-gray: #f9fafb;
}
html { scroll-behavior: smooth; }
body { font-family: 'Noto Sans KR', sans-serif; color: var(--text); }

/* ===== 네비게이션 ===== */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 40px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 12px rgba(0,0,0,0.08);
}
.nav-logo { font-weight: 700; font-size: 1.25rem; color: var(--primary); }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a { text-decoration: none; color: var(--text); font-weight: 500;
               transition: color 0.2s; }
.nav-links a:hover { color: var(--primary); }

/* ===== 히어로 ===== */
.hero {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #eef2ff 0%, #f0f9ff 100%);
  text-align: center; padding: 100px 20px 60px;
}
.hero-sub { color: var(--text-light); margin-bottom: 8px; }
.hero-name { font-size: clamp(2rem, 6vw, 4rem); font-weight: 700;
             color: var(--primary); margin-bottom: 16px; }
.hero-desc { font-size: 1.125rem; color: var(--text-light);
             margin-bottom: 32px; max-width: 500px; }

/* ===== 버튼 ===== */
.btn-primary {
  display: inline-block; padding: 14px 32px;
  background: var(--primary); color: white;
  border-radius: 8px; text-decoration: none; font-weight: 600;
  transition: background 0.2s, transform 0.2s;
}
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); }

/* ===== 공통 섹션 ===== */
.section { padding: 80px 40px; }
.section-title {
  font-size: 2rem; font-weight: 700; text-align: center;
  margin-bottom: 48px; color: var(--text);
}
.section-title::after {
  content: ''; display: block; width: 48px; height: 4px;
  background: var(--primary); margin: 12px auto 0; border-radius: 2px;
}

/* ===== About ===== */
.about-section { background: var(--bg-gray); }
.about-grid {
  display: grid; grid-template-columns: 1fr 2fr;
  gap: 48px; align-items: center; max-width: 900px; margin: 0 auto;
}
.about-img img { width: 100%; border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.about-text h3 { font-size: 1.5rem; margin-bottom: 16px; }
.about-text p { color: var(--text-light); line-height: 1.8; }

/* ===== Skills ===== */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px; max-width: 800px; margin: 0 auto;
}
.skill-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 16px; background: white;
  border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}
.skill-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.skill-card span { font-size: 2.5rem; margin-bottom: 8px; }
.skill-card p { font-weight: 600; }

/* ===== Contact ===== */
.contact-section { background: var(--bg-gray); text-align: center; }
.contact-section p { color: var(--text-light); margin-bottom: 24px; }

/* ===== Footer ===== */
.footer { background: #1f2937; color: #9ca3af; text-align: center; padding: 24px; }

/* ===== 반응형 ===== */
@media (max-width: 767px) {
  .navbar { padding: 14px 20px; }
  .nav-links { gap: 16px; }
  .section { padding: 60px 20px; }
  .about-grid { grid-template-columns: 1fr; text-align: center; }
  .about-img img { max-width: 200px; margin: 0 auto; display: block; }
}

12강 핵심 요약 — HTML/CSS 완결!

  • CSS 변수(:root)로 색상을 한 곳에서 관리 → 테마 변경 용이
  • position: fixed + z-index로 스크롤해도 유지되는 네비게이션
  • scroll-behavior: smooth로 앵커 클릭 시 부드러운 스크롤
  • ::after 유사 요소로 섹션 제목 아래 장식선 추가
  • auto-fit + minmax로 기술 카드 반응형 자동 배치

이 시리즈 전체를 마쳤습니다! 웹 동작 원리(1강) → HTML 구조(2강) → 태그(3~5강) → CSS 기초(6~8강) → Flexbox(9강) → Grid(10강) → 반응형(11강) → 종합 실습(12강) 완전 정복!

관련 검색어  ·  HTML CSS포트폴리오, 한페이지사이트만들기, CSS종합실습, 포지션fixed네비게이션, CSS변수, 반응형포트폴리오, 웹개발입문완성

Advertisement

이전 강

반응형 디자인

댓글 0

커리큘럼으로 돌아가기
홈
채용정보
공지사항
인사이트
MY