개발 공부/기타

[HTML/CSS 랜딩페이지 만들기] 1페이지 완성형 디자인 실전 예제

악마의 개발자 2025. 4. 2. 11:30
반응형

 

안녕하세요! 😊
이전 시간에는 포트폴리오 웹사이트를 만드는 실전 프로젝트를 진행했죠?

 

[HTML/CSS/JS 실전 프로젝트] 포트폴리오 미니 웹사이트 만들기

안녕하세요! 😊지난 시간까지 우리는 HTML/CSS의 기초부터 레이아웃, 반응형, 애니메이션, 성능 최적화까지 배워봤어요.이제 이 모든 걸 종합해서, ✨작고 완성도 높은 실전 웹사이트를 하나 만들

it-afternoon.tistory.com

 


이번엔 마케팅, 이벤트, 제품 홍보 등에 자주 사용되는 1페이지 랜딩페이지를 직접 만들어볼 거예요!

 

📌 오늘의 실습 목표
✔ HTML/CSS만으로 깔끔한 1페이지 디자인
✔ 버튼 클릭 유도(CTA) 디자인
✔ 배경 이미지, 텍스트 배치, 반응형 적용

지금 바로 시작해볼까요? 🎨💡

✅ 랜딩페이지란?

랜딩페이지(Landing Page)란 사용자가 광고/검색 등을 통해 처음 도착하는 단일 페이지를 말해요.
보통 1개의 목적(가입, 구매, 다운로드 등)을 달성하도록 디자인되며,
간결한 구조 + 시각적 집중이 핵심입니다.

1️⃣ 랜딩페이지 레이아웃 구성

🔷 기본 구성 요소

  1. Hero 섹션 – 강렬한 첫 인상 (배경 이미지 + 타이틀 + 버튼)
  2. 특징 소개 섹션 – 제품이나 서비스의 장점
  3. 콜 투 액션(Call to Action) – 사용자 행동 유도 (예: “지금 가입하기”)

2️⃣ HTML 구조 작성

<body>
  <section class="hero">
    <div class="hero-content">
      <h1>당신의 아이디어, 세상과 연결하세요.</h1>
      <p>지금 무료로 시작해보세요.</p>
      <a href="#" class="cta-button">무료 가입</a>
    </div>
  </section>

  <section class="features">
    <h2>왜 우리 서비스를 선택해야 할까요?</h2>
    <ul>
      <li>✅ 빠르고 안정적인 성능</li>
      <li>✅ 모바일 완벽 대응</li>
      <li>✅ 쉬운 사용성과 깔끔한 UI</li>
    </ul>
  </section>
</body>

3️⃣ CSS 디자인 적용

body {
  margin: 0;
  font-family: 'Noto Sans KR', sans-serif;
  color: #333;
  background: #fff;
}

.hero {
  background: url('https://via.placeholder.com/1600x800') no-repeat center center / cover;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

.hero-content {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 40px;
  border-radius: 10px;
}

.cta-button {
  background: #ff6b6b;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  font-size: 16px;
  margin-top: 20px;
  display: inline-block;
}

.features {
  padding: 60px 20px;
  text-align: center;
}

.features ul {
  list-style: none;
  padding: 0;
}

.features li {
  font-size: 18px;
  margin: 10px 0;
}

4️⃣ 반응형 적용 (media query)

@media (max-width: 768px) {
  .hero {
    padding: 20px;
    text-align: center;
  }

  .hero-content {
    width: 90%;
  }

  .features h2 {
    font-size: 22px;
  }
}

✅ 모바일 환경에서도 자연스럽게 콘텐츠가 줄어들고 보기 좋게 조정돼요!

✅ 완성된 구조 흐름

[ HERO SECTION ]
- 큰 제목
- 짧은 문장
- 가입 유도 버튼

[ FEATURES SECTION ]
- 왜 좋은지 3가지 이유

📌 마무리 & 다음 단계는?

오늘은 HTML/CSS만으로 1페이지 랜딩페이지를 만들었어요!
✅ 반응형 디자인
✅ CTA 버튼
✅ 간결한 메시지와 구성

📢 다음 글에서는?

👉 랜딩페이지에 애니메이션 추가해 더욱 돋보이게 만들기
👉 가입 폼 + 이메일 전송 기능까지 연결하는 실전 예제

 

다음 글도 기대해주세요! 😊

 

 

[랜딩페이지 업그레이드] 애니메이션 + 가입 폼으로 전환율 높이기!

안녕하세요! 😊지난 시간에는 HTML/CSS만으로 기본적인 1페이지 랜딩페이지를 만들어봤어요.이번엔 여기에 생동감을 주는 애니메이션과 실제 사용자 행동을 유도하는 가입 폼을 추가해서✨전환

it-afternoon.tistory.com

 

반응형