Tailwind CSS로 반응형 가격표 스타일 지정

10888 단어 tailwindcsscsstutorial
최신 Tailwind CSS 자습서 시리즈에 오신 것을 환영합니다. 이번 에디션에서는 반응형 가격표 구성 요소의 스타일을 지정할 것입니다. 이들은 일반적으로 사용자에게 SAAS 제품, 웹 호스팅 또는 구독 서비스에 대한 요금제 기능 및 가격에 대한 빠른 개요를 제공하는 데 사용됩니다.

다음은 우리가 생성할 가격표가 완료된 후의 모습입니다.



새 빈 HTML 파일을 만들고 CDN을 통해 Tailwind를 로드하여 시작하겠습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Responsive Pricing Table - Tailwind CSS</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
  </head>
  <body>
    <!-- responsive pricing table here -->
  </body>
</html>


참고 – 빠르고 쉽게 시작하고 실행할 수 있도록 이 자습서의 목적으로 CDN을 사용하고 있습니다. 실생활에서는 Tailwind를 PostCSS 플러그인으로 설치하는 것이 좋습니다. 이에 대한 자세한 내용과 다른 설치 방법을 찾을 수 있습니다here.

이제 모든 것을 수용할 컨테이너로 시작하는 가격표 작성을 시작할 수 있습니다.

<div class="container m-auto">        
  <div class="flex flex-wrap items-center justify-center w-full text-center">            
    <!-- 3 x pricing plan columns here -->
  </div>    
</div>

container m-auto를 사용하여 너비를 제한하고 가격표를 가운데 정렬합니다. 우리는 또한 flexbox를 사용하여 Tailwind에서 단순히 flex 클래스를 추가해야 하는 3열 레이아웃을 달성했습니다.

열 #1 – 기본 계획



첫 번째 열의 마크업은 다음과 같습니다.

<!-- basic plan -->
<div class="w-full md:w-1/2 lg:w-1/3 p-4">
  <div class="flex flex-col rounded border-2 border-blue-700 bg-blue-700">
    <div class="py-5 text-blue-700 bg-white">
      <h3>Basic</h3>
      <p class="text-5xl font-bold">
        $19.<span class="text-3xl">95</span>
      </p>
      <p class="text-xs uppercase">Per Month</p>
    </div>           
    <div class="py-5 bg-blue-700 text-white rounded-b">
      <p>Feature of the plan</p>
      <p>Another feature plan feature</p>
      <p>Yet another plan feature</p>
      <button class="px-5 py-2 mt-5 uppercase rounded bg-white text-blue-700 font-semibold hover:bg-blue-900 hover:text-white">
        Get Started
      </button>
    </div>            
  </div>
</div>


이것을 읽으면 대부분의 수업이 매우 자명하기 때문에 무슨 일이 일어나고 있는지 파악할 수 있습니다. 그러나 더 중요한 수업 중 일부를 자세히 살펴 보겠습니다.
  • w-full md:w-1/2 lg:w-1/3 - 작은 화면에서는 열을 전체 너비(최대 너비: 767px), 중간 화면에서는 컨테이너 너비의 1/2(최대 너비: 1023px)로 설정합니다. 더 큰 화면(최소 너비: 1024px).
  • hover:bg-blue-900 hover:text-white – Tailwind를 사용하면 클래스 앞에 hover를 추가하여 hover 스타일을 적용할 수 있습니다.
  • border-blue-700 bg-blue-700 text-blue-700 – Tailwind의 색상은 50-900 범위에서 조정할 수 있습니다. 눈금이 높아질수록 어두움이 증가합니다.

    • 열 #2 – 표준 계획



    다음과 같이 두 번째 열에 대한 마크업을 추가합니다.

    <!-- standard plan -->
<div class="w-full md:w-1/2 lg:w-1/3 p-4">
   <div class="flex flex-col rounded">
     <div class="py-7 bg-blue-700 text-white rounded-t">
       <h2 class="uppercase text-yellow-300 font-extrabold">
         Most Popular
       </h2>
       <h3>Standard</h3>
       <p class="text-5xl font-bold">
         $49.<span class="text-3xl">95</span>
       </p>
       <p class="text-xs uppercase">Per Month</p>
     </div>
     <div>
       <div class="pt-1 pb-7 bg-blue-700 text-white rounded-b">
         <p>Feature of the plan</p>
         <p>Another feature plan feature</p>
         <p>Yet another plan feature</p>
         <button class="px-5 py-2 mt-5 uppercase rounded bg-yellow-300 text-blue-700 font-semibold hover:bg-blue-900 hover:text-white">
            Get Started
         </button>
      </div>
    </div>
  </div>
</div>


    우리는 이 열에 어두운 배경을 지정하여 약간의 추가 패딩과 함께 더 눈에 띄도록 하여 다른 열보다 더 크게 보입니다. 우리는 플렉스 레이아웃을 사용하고 있기 때문에 모든 열은 가로 축을 따라 중앙에 잘 배치됩니다.

    열 #3 – 고급 계획



    다음과 같이 세 번째 열에 대한 마크업을 추가합니다.

    <!-- advanced plan -->
<div class="w-full md:w-1/2 lg:w-1/3 p-4">
  <div class="flex flex-col rounded border-2 border-blue-700 bg-blue-700">
   <div class="py-5 text-blue-700 bg-white">
      <h3>Advanced</h3>
      <p class="text-5xl font-bold">
        $99.<span class="text-3xl">95</span>
      </p>
      <p class="text-xs uppercase">Per Month</p>
    </div>          
    <div class="py-5 bg-blue-700 text-white rounded-b">
      <p>Feature of the plan</p>
      <p>Another feature plan feature</p>
      <p>Yet another plan feature</p>
      <button class="px-5 py-2 mt-5 uppercase rounded bg-white text-blue-700 font-semibold hover:bg-blue-900 hover:text-white">
        Get Started
      </button>
   </div>            
 </div>
</div>


    이 열의 마크업은 텍스트만 변경된 첫 번째 열과 동일합니다.

    가격표는 이제 브라우저에서 테스트할 준비가 되었습니다. 모든 것이 계획대로 진행된 경우 레이아웃은 모바일 장치에서는 단일 열, 태블릿에서는 엇갈린 레이아웃, 데스크톱 장치에서는 3열이어야 합니다.

    이것으로 이 튜토리얼을 마칩니다. 빠르게 뛰어들어 이 코드를 가지고 놀고 싶다면 GitHub에서 이 가격표의 작동 버전을 찾을 수 있습니다. 이 튜토리얼이 마음에 드셨다면 다른 튜토리얼Tailwind CSS tutorials도 확인하십시오.
    commons-pool2 대상 풀 사용
    Windows PPL 우회

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage