2278
No
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>
댓글 ( 0)
댓글 남기기