랜딩 페이지란?

웹 코딩을 배우면 특정한 목적을 가진 나만의 랜딩 페이지(Landing page)를 직접 만들 수 있습니다.

랜딩페이지는 검색 엔진, 광고 등을 통해 방문한 사용자가 최초로 보게 되는 웹페이지를 뜻하며, 방문자의 행동을 유도하는 특정한 목적을 갖습니다.

이렇게 방문자의 행동을 유도하는 버튼을 CTA(Call To Action)라고 합니다.

오른쪽에서 인테리어 업체의 회사 소개 랜딩페이지 예시를 확인해보세요 :)

참고 : 코드 예시는 학습의 용이성을 위해 전체 코드가 아닌 코드의 일부만 표시하고 있습니다. 아직 코드를 자세히 이해할 필요 없이, 코드의 구조와 각 부분이 어떤 역할을 하는지 파악하는 것에 집중해 주세요!

회사 소개 랜딩 페이지 예시

<div class="intro-text-box">
  <h1>
    We Love
    <br />
    Minimalism.
  </h1>
  <p class="subtitle-1 margin-top-20">가장 감각적인 인테리어</p>
  <span class="margin-top-20 text-bold">코드프렌즈입니다</span>
  <button class="button intro-button margin-top-40">둘러보기</button>
</div>

위 랜딩 페이지 예시는 We Love Minimalism이라는 제목(h1)과 가장 감각적인 인테리어라는 부제목(p)이 있으며, 둘러보기라는 CTA 버튼(button)으로 구성되어 있습니다.