도움말/자산 사용법

컴포넌트 끼워넣기

컴포넌트는 섹션 단위 독립 블록 — 기존 페이지 사이에 그대로 끼워넣습니다.

왜 충돌 없이 끼워지나

컴포넌트는 순수 Tailwind 유틸리티 클래스만 사용합니다. 전역 CSS·커스텀 클래스·스크립트가 없어서, 기존 페이지에 붙여넣어도 스타일 충돌이 일어나지 않습니다. 하나의 <section> 블록이 곧 컴포넌트 전체입니다.

삽입 순서

1. 1

   코드 탭에서 블록 복사

   상세 페이지 코드 탭에서 <section> … </section> 전체를 복사합니다.

2. 2

   원하는 위치에 붙여넣기

   내 페이지의 섹션과 섹션 사이, 원하는 자리에 그대로 붙여넣습니다.

3. 3

   색·문구를 페이지 톤에 맞추기

   강조색 클래스(bg-*-600 등)를 페이지의 브랜드 색으로 치환하고 문구를 교체합니다.

4. 4

   뷰포트 확인

   모바일(390) → 태블릿(768) → 데스크톱(1440) 순으로 접힘·겹침이 없는지 확인합니다.

<main>
  <section id="features"> … 기존 섹션 … </section>

  <!-- ▼ 복사해 온 컴포넌트를 그대로 삽입 -->
  <section class="py-20 bg-white">
    <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-3 gap-6">
      … 가격 카드 3장 …
    </div>
  </section>

  <section id="faq"> … 기존 섹션 … </section>
</main>