CSS3

2278 No

Tailwind 타일윈드로 가격표 만들기

2024-08-26 23:39:34 By 라이트 0 137 댓글수 0 포스트 하기
11월 2024
일월화수목금토
     12
3456789
10111213141516
17181920212223
24252627282930

 

 

 

 

 

1. 프로젝트 설정

먼저 Tailwind CDN을 포함한 HTML 파일을 설정합니다.

 

  • 프로젝트는 화면의 중앙에 배치됩니다. 이를 위해 flexbox를 사용해 items-center, justify-center, 그리고 min-h-screen 클래스를 적용하여 화면 전체 높이를 사용하도록 설정합니다.
  • 배경색은 bg-slate-800으로 설정합니다.

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pricing Cards</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-800 min-h-screen flex items-center justify-center">
  <!-- 여기에 가격 카드를 추가할 것입니다 -->
  <div id="pricing-container" class="container mx-auto">
    <!-- 카드들이 들어갈 컨테이너 -->
  </div>
</body>
</html>

 

위 코드에서 Tailwind CSS를 설정하고, 카드들이 들어갈 컨테이너를 추가했습니다.

 

 

2. 전체 레이아웃 설정

카드들을 Flexbox로 배치합니다. 모바일 우선 접근 방식을 사용하므로 기본적으로 세로 정렬(flex-col)로 시작하고, 중간 크기 이상(md)에서 가로 정렬(flex-row)로 변경됩니다.

<div class="flex flex-col md:flex-row space-y-6 md:space-y-0 md:space-x-6">
  <!-- 카드 1 -->
  <div class="bg-slate-700 rounded-xl text-white flex-1 p-8">
    <!-- 카드 내용 -->
  </div>
  <!-- 카드 2 -->
  <div class="bg-slate-700 rounded-xl text-white flex-1 p-8">
    <!-- 카드 내용 -->
  </div>
  <!-- 카드 3 -->
  <div class="bg-slate-700 rounded-xl text-white flex-1 p-8">
    <!-- 카드 내용 -->
  </div>
</div>
  •  
  • 세 개의 컬럼(가격 카드)을 담을 컨테이너를 설정합니다. 모바일 우선 접근법을 사용하여 작은 화면에서는 세로로 쌓이고, 중간 크기 이상의 화면에서는 가로로 배치되도록 설정합니다.
  • 이를 위해 기본적으로 flex-col을 적용하고, 중간 크기 화면부터는 md:flex-row를 적용합니다. 여백은 space-y-6과 space-x-6 클래스로 조절합니다.

  • 첫 번째 컬럼 구성:

    • 각 컬럼은 외부 박스(bg-slate-700), 상단 컨테이너, 구분선(border), 하단 컨테이너로 구성됩니다.
    • 상단 컨테이너에는 카드의 기본 정보(패키지 이름, 용량, 가격)가 포함됩니다.
    • 상단 컨테이너의 스타일:
      • rounded-t-xl을 사용해 위쪽 모서리를 둥글게 만듭니다.
      • 배경색은 bg-slate-800, 텍스트는 중앙 정렬(text-center) 및 대문자(uppercase)로 설정합니다.
    • 버튼은 중앙에 배치(justify-center)되며, 호버 시 색상이 바뀌도록 설정합니다.

  • 구분선(Border):

    • 구분선은 단순히 border-t 클래스를 사용해 추가합니다. 색상은 border-slate-700으로 설정합니다.

 

3. 각 카드 내용 구성

이제 각 카드의 상단, 하단으로 구성된 콘텐츠를 설정합니다. 예를 들어, 첫 번째 카드에는 기본적인 정보와 구매 버튼이 있습니다.

<div class="bg-slate-700 rounded-xl text-white flex-1 p-8">
  <!-- 상단 콘텐츠 -->
  <div class="bg-slate-800 rounded-t-xl p-6 text-center">
    <h3 class="uppercase text-lg">Basic</h3>
    <h2 class="font-serif text-5xl my-4">100GB</h2>
    <p class="text-xl">₩1,990 / 월</p>
  </div>

  <!-- 중간 경계선 -->
  <div class="border-t border-slate-600 my-4"></div>

  <!-- 하단 콘텐츠 (옵션 목록) -->
  <ul class="space-y-2">
    <li class="flex items-center">
      <!-- 체크 아이콘 -->
      <svg class="w-6 h-6 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 00-1.414 0L9 11.586 6.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l7-7a1 1 0 000-1.414z" clip-rule="evenodd"></path>
      </svg>
      100GB 저장 공간
    </li>
    <li class="flex items-center">
      <svg class="w-6 h-6 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 00-1.414 0L9 11.586 6.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l7-7a1 1 0 000-1.414z" clip-rule="evenodd"></path>
      </svg>
      멤버 추가 옵션
    </li>
    <li class="flex items-center">
      <svg class="w-6 h-6 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 00-1.414 0L9 11.586 6.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l7-7a1 1 0 000-1.414z" clip-rule="evenodd"></path>
      </svg>
      추가 멤버 혜택
    </li>
  </ul>

  <!-- 구매 버튼 -->
  <div class="mt-6 text-center">
    <a href="#" class="inline-block px-10 py-3 border border-violet-600 rounded-lg text-center hover:bg-violet-800 hover:border-violet-800 transition duration-200">구매</a>
  </div>
</div>

 

4. 두 번째 카드 강조

두 번째 카드는 색상을 변경해 강조합니다.

 

 

<div class="bg-violet-600 rounded-xl text-white flex-1 p-8">
  <!-- 콘텐츠는 첫 번째 카드와 동일 -->
</div>

 

 

5. 결과 확인 및 사용자 정의

이제 각 카드의 디자인과 내용을 자유롭게 변경하거나 더 많은 기능을 추가해보세요.

이와 같은 과정을 반복하면서 Tailwind의 다양한 유틸리티 클래스들을 익힐 수 있습니다. 코드와 결과 화면을 확인하면서 실습해보시면 이해가 더 잘 될 것입니다.

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>가격 카드</title>
  </head>
  <body>
    <!-- 전체 컨테이너 -->
    <div class="flex items-center justify-center min-h-screen bg-slate-800">
      <!-- 내부 컨테이너 -->
      <div
        class="flex flex-col my-6 space-y-6 md:space-y-0 md:space-x-6 md:flex-row md:my-0"
      >
        <!-- 첫 번째 열 -->
        <div class="bg-slate-700 rounded-xl text-white">
          <!-- 상단 컨테이너 -->
          <div class="p-8 mx-3 mt-3 rounded-t-xl bg-slate-800">
            <div class="text-center uppercase">기본</div>
            <h2 class="mt-10 font-serif text-5xl text-center">100GB</h2>
            <h3 class="mt-2 text-center">월 $1.99</h3>
            <div class="flex justify-center">
              <a
                href="#"
                class="inline-block px-10 py-3 my-6 text-center border border-violet-600 rounded-lg duration-200 hover:bg-violet-800 hover:border-violet-800"
                >구매하기</a
              >
            </div>
          </div>

          <!-- 경계선 -->
          <div class="border-t border-slate-700"></div>

          <!-- 하단 컨테이너 -->
          <div class="p-8 mx-3 mb-3 rounded-b-xl bg-slate-800">
            <!-- 목록 컨테이너 -->
            <div class="flex flex-col space-y-2">
              <!-- 항목 1 -->
              <div class="flex justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M5 12l5 5l10 -10" />
                </svg>
                <span class="text-sm ml-1">100GB 저장 공간</span>
              </div>

              <!-- 항목 2 -->
              <div class="flex justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M5 12l5 5l10 -10" />
                </svg>
                <span class="text-sm ml-1">멤버 추가 가능</span>
              </div>

              <!-- 항목 3 -->
              <div class="flex justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M5 12l5 5l10 -10" />
                </svg>
                <span class="text-sm ml-1">추가 멤버 혜택</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 두 번째 열 -->
        <div class="bg-violet-600 rounded-xl text-white">
          <!-- 상단 컨테이너 -->
          <div class="p-8 mx-3 mt-3 rounded-t-xl bg-slate-800">
            <div class="text-center uppercase">표준</div>
            <h2 class="mt-10 font-serif text-5xl text-center">200GB</h2>
            <h3 class="mt-2 text-center">월 $3.99</h3>
            <div class="flex justify-center">
              <a
                href="#"
                class="inline-block px-10 py-3 my-6 text-center border border-violet-600 rounded-lg duration-200 bg-violet-600 hover:bg-violet-800 hover:border-violet-800"
                >구매하기</a
              >
            </div>
          </div>

          <!-- 경계선 -->
          <div class="border-t border-slate-700"></div>

          <!-- 하단 컨테이너 -->
          <div class="p-8 mx-3 mb-3 rounded-b-xl bg-slate-800">
            <!-- 목록 컨테이너 -->
            <div class="flex flex-col space-y-2">
              <!-- 항목 1 -->
              <div class="flex justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M5 12l5 5l10 -10" />
                </svg>
                <span class="text-sm ml-1">200GB 저장 공간</span>
              </div>

              <!-- 항목 2 -->
              <div class="flex justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M5 12l5 5l10 -10" />
                </svg>
                <span class="text-sm ml-1">멤버 추가 가능</span>
              </div>

              <!-- 항목 3 -->
              <div class="flex justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M5 12l5 5l10 -10" />
                </svg>
                <span class="text-sm ml-1">추가 멤버 혜택</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 세 번째 열 -->
        <div class="bg-slate-700 rounded-xl text-white">
          <!-- 상단 컨테이너 -->
          <div class="p-8 mx-3 mt-3 rounded-t-xl bg-slate-800">
            <div class="text-center uppercase">프리미엄</div>
            <h2 class="mt-10 font-serif text-5xl text-center">2TB</h2>
            <h3 class="mt-2 text-center">월 $8.99</h3>
            <div class="flex justify-center">
              <a
                href="#"
                class="inline-block px-10 py-3 my-6 text-center border border-violet-600 rounded-lg duration-200 hover:bg-violet-800 hover:border-violet-800"
                >구매하기</a
              >
            </div>
          </div>

          <!-- 경계선 -->
          <div class="border-t border-slate-700"></div>

          <!-- 하단 컨테이너 -->
          <div class="p-8 mx-3 mb-3 rounded-b-xl bg-slate-800">
            <!-- 목록 컨테이너 -->
            <div class="flex flex-col space-y-2">
              <!-- 항목 1 -->
              <div class="flex justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M5 12l5 5l10 -10" />
                </svg>
                <span class="text-sm ml-1">2TB 저장 공간</span>
              </div>

              <!-- 항목 2 -->
              <div class="flex justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M5 12l5 5l10 -10" />
                </svg>
                <span class="text-sm ml-1">멤버 추가 가능</span>
              </div>

              <!-- 항목 3 -->
              <div class="flex justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M5 12l5 5l10 -10" />
                </svg>
                <span class="text-sm ml-1">추가 멤버 혜택</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

about author

PHRASE

Level 60  라이트

자유를 위해서라면 명예와 마찬가지로, 생명을 걸 수도 있으며 또 걸어야 한다. -세르반테스

댓글 ( 0)

댓글 남기기

작성

CSS3 목록    more

? Copyright 2016 JunHo | Powered by Codeigniter | Powered by jQuery Rain

| Powered by Bootstrap

macaronics.net 는 그어떠한 동영상, 이미지, 파일등을 직접적으로 업로드 제공을 하지 않습니다. 페이스북, 트위터 등 각종 SNS 처럼 macaronics.net 는 웹서핑을 통하여 각종 페이지위치등을 하이퍼링크, 다이렉트링크, 직접링크등으로 링크된 페이지 주소만을 수집 저장하여 제공하고 있습니다. 저장된 각각의 주소에 연결된 페이지등은 그 페이지에서 제공하는 "서버, 사이트" 상황에 따라 페이지와 내용이 삭제 중단 될 수 있으며 macaronics.net 과는 어떠한 연관 관련이 없음을 알려드립니다. 또한, 저작권에 관련된 문제있는 글이나 기타 저작권에 관련된 문제가 있는 것은 연락주시면 바로 삭제해 드리겠습니다.

개인정보 처리방침 | 서비스 이용약관

관리자 문의: braverokmc79@gmail.com 혹은 가입후 관리자 1:1 게시판