23강. 실전 — 랜딩 페이지 | HTML·CSS 웹 입문 24강 · 입문 — 누구나패스

🎯 학습 목표

이 강을 마치면 여러분은 강좌에서 배운 모든 것을 종합해, 완전한 한 페이지짜리 랜딩 페이지를 만들 수 있게 됩니다. 랜딩 페이지란 방문자가 처음 만나는, 서비스나 제품을 소개하는 대표 페이지입니다. 지난 강의 헤더에 이어 히어로·특징·푸터 섹션을 더해, 그럴듯한 페이지 하나를 완성하는 것이 이번 강의 목표입니다.

구체적으로는 세 개의 섹션을 만듭니다. 첫째, 첫인상을 결정하는 히어로 섹션입니다. 둘째, 특징을 카드로 보여 주는 특징 섹션입니다. 셋째, 마무리하는 푸터와 반응형 적용입니다.

🏗️ 전체 구조 잡기

이 섹션에서는 랜딩 페이지의 전체 뼈대를 살펴보겠습니다.

8강에서 배운 시맨틱 태그로 페이지를 큰 구역으로 나눕니다. 지난 강의 <header> 아래에 본문(<main>)과 바닥글(<footer>)을 두고, 본문 안을 여러 <section>으로 나눕니다.

<header> ... (지난 강의 헤더) ... </header>
<main>
  <section class="hero"> ... </section>
  <section class="features"> ... </section>
</main>
<footer> ... </footer>

이렇게 헤더 → 히어로 → 특징 → 푸터로 이어지는 구조가 전형적인 랜딩 페이지의 뼈대입니다. 코드만 봐도 페이지의 큰 흐름이 한눈에 들어옵니다. 이제 각 섹션을 하나씩 채워 봅시다. 참고로 21강에서 배운 CSS 변수를 :root에 정의해 두고 색과 여백을 일관되게 쓰면 좋습니다.

🦸 히어로 섹션 만들기

이 섹션에서는 페이지의 첫인상을 좌우하는 히어로 섹션을 만들겠습니다.

히어로 섹션은 페이지 맨 위의 큰 영역으로, 굵직한 제목·설명·버튼으로 방문자의 시선을 사로잡습니다. 내용을 화면 가운데에 놓는 것이 핵심인데, 16강에서 배운 Flexbox의 가운데 정렬 3종 세트가 딱 맞습니다.

<section class="hero">
  <h1>더 나은 웹을 만드세요</h1>
  <p>HTML과 CSS로 시작하는 나만의 웹사이트</p>
  <a href="#" class="btn">시작하기</a>
</section>

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 400px;
  gap: 20px;
  background-color: #f5f7fa;
}

이 CSS를 봅시다. display: flex에 flex-direction: column으로 제목·설명·버튼을 세로로 쌓고, justify-content: center와 align-items: center로 정중앙에 배치합니다. height: 400px으로 큼직한 영역을 만들고, text-align: center로 글자도 가운데 정렬합니다. 여기에 20강에서 배운 호버 효과를 버튼(.btn)에 주면 더욱 생동감이 생깁니다. 이렇게 몇 줄로 시선을 끄는 히어로 영역이 완성됩니다.

🗂️ 특징 섹션 — Grid로 카드 배치

이 섹션에서는 서비스의 특징을 카드로 보여 주는 특징 섹션을 만들겠습니다.

특징 섹션은 보통 서비스의 장점 몇 가지를 나란한 카드로 보여 줍니다. 여러 카드를 격자로 배치하는 것이니, 18강에서 배운 Grid가 제격입니다.

<section class="features">
  <div class="card">
    <h3>쉬운 시작</h3>
    <p>기초부터 차근차근 배웁니다.</p>
  </div>
  <div class="card">
    <h3>반응형 지원</h3>
    <p>모든 기기에서 잘 보입니다.</p>
  </div>
  <div class="card">
    <h3>실전 예제</h3>
    <p>직접 만들며 익힙니다.</p>
  </div>
</section>

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 60px 32px;
}
.card {
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

여기서 grid-template-columns: repeat(3, 1fr)로 똑같은 너비의 카드 세 개를 한 줄에 배치하고, gap: 24px으로 간격을 줍니다. 각 .card에는 21강에서 본 것처럼 패딩·둥근 모서리·그림자를 주어 카드다운 모양을 만듭니다. 이렇게 Grid 한 번으로 정갈한 3단 카드 배치가 완성됩니다.

🦶 푸터와 반응형 마무리

이 섹션에서는 푸터를 만들고 전체에 반응형을 적용해 페이지를 완성하겠습니다.

마지막으로 페이지 하단에 푸터를 둡니다. 보통 저작권 표시나 간단한 링크가 들어갑니다.

<footer>
  <p>© 2026 MySite. All rights reserved.</p>
</footer>

footer {
  text-align: center;
  padding: 24px;
  background-color: #333;
  color: white;
}

이제 19강에서 배운 반응형을 적용해 마무리합니다. 특징 섹션의 카드 3개는 넓은 화면에서는 좋지만, 좁은 휴대폰에서는 답답합니다. 미디어 쿼리로 좁은 화면에서는 카드를 한 줄로 바꿔 줍니다.

@media (max-width: 768px) {
  .features {
    grid-template-columns: 1fr;
  }
}

이 코드는 화면이 768px 이하일 때 특징 섹션을 한 열(1fr)로 바꿔, 카드가 세로로 하나씩 쌓이게 합니다. 이렇게 헤더 + 히어로 + 특징 + 푸터를 갖추고 반응형까지 적용한, 하나의 완결된 랜딩 페이지가 완성되었습니다. 지난 22개 강에서 배운 시맨틱 태그·박스 모델·Flexbox·Grid·호버·반응형·변수가 모두 어우러진 결과물입니다. 스스로 이런 페이지를 만들 수 있다면, 여러분은 이미 웹의 기초를 단단히 다진 것입니다.

⚠️ 랜딩 페이지를 만들 때의 주의점

이 섹션에서는 실전에서 유의할 점을 정리하겠습니다.

첫 번째, 한 번에 완성하려 하지 않는 것입니다. 페이지 전체를 처음부터 완벽하게 만들려 하면 막막합니다. 섹션 하나씩 만들고 브라우저로 확인하며 나아가면, 복잡한 페이지도 차근차근 완성할 수 있습니다.

두 번째, 도구를 상황에 맞게 고르는 것입니다. 이번 강에서 히어로의 세로 가운데 정렬에는 Flexbox를, 특징 카드의 격자 배치에는 Grid를 썼습니다. 18강에서 배운 대로 1차원은 Flex, 2차원 격자는 Grid라는 기준을 떠올리면 선택이 쉬워집니다.

세 번째, 일관성을 지키는 것입니다. 색·여백·글꼴이 섹션마다 제각각이면 조잡해 보입니다. 21강의 CSS 변수로 값을 통일하면, 페이지 전체가 하나의 디자인으로 정돈됩니다.

📝 핵심 요약

이번 강에서는 완전한 랜딩 페이지를 만들었습니다.

전체 구조 — 시맨틱 태그로 header → 히어로 → 특징 → footer의 뼈대를 세웁니다.
히어로 — Flexbox의 가운데 정렬로 제목·설명·버튼을 화면 중앙에 큼직하게 배치합니다.
특징 — Grid의 repeat(3, 1fr)로 같은 크기의 카드 세 개를 나란히 놓습니다.
마무리 — 푸터를 두고, 미디어 쿼리로 좁은 화면에서 카드를 한 줄로 바꿔 반응형을 완성합니다.

축하합니다. 여러분은 이제 스스로 웹 페이지를 만들 수 있습니다! 마지막 강에서는 이렇게 만든 페이지를 세상에 공개(배포)하는 법과, 앞으로의 학습 방향을 안내하며 강좌를 마무리하겠습니다. 다음 강 「배포와 다음 단계」에서 이어가겠습니다.

실전 — 랜딩 페이지