1. HTML 구조와 Tailwind CSS 적용
HTML 구조를 먼저 작성한 후 Tailwind CSS의 유틸리티 클래스를 적용하여 스타일을 지정합니다. Tailwind는 유틸리티 클래스 기반으로 작동하므로, 각 HTML 요소에 클래스를 추가하여 스타일을 정의할 수 있습니다.
1.1 전체 컨테이너 설정
전체 레이아웃을 중앙에 배치하기 위해 flex, items-center, justify-center, min-h-screen, bg-slate-100 클래스를 사용하여 화면 중앙에 정렬된 컨테이너를 만듭니다.
<div class="flex items-center justify-center min-h-screen bg-slate-100">
1.2 카드 컨테이너 설정
카드 컨테이너는 제품 정보를 담는 부분입니다. flex, flex-col, p-6, m-3, space-y-10, bg-white, rounded-2xl, shadow-2xl, md:flex-row, md:space-y-0, md:space-x-10, md:m-0, md:p-16 클래스들을 사용하여 카드의 레이아웃과 스타일을 지정합니다.
<div class="flex flex-col p-6 m-3 space-y-10 bg-white rounded-2xl shadow-2xl md:flex-row md:space-y-0 md:space-x-10 md:m-0 md:p-16">
1.3 이미지 섹션
제품 이미지를 보여주는 부분으로, w-60, hover:scale-105 클래스를 사용하여 이미지 크기와 호버 시 확대되는 효과를 적용합니다.
<div>
<img src="images/headphone.png" alt="헤드폰 이미지" class="mx-auto duration-200 w-60 hover:scale-105" />
</div>
1.4 내용 섹션
제품 정보(레이블, 제목, 가격, 재고 상태 등)를 표시하는 섹션입니다. 각 부분에 대해 flex, flex-col, space-y-3, text-center, md:text-left, max-w-sm, text-2xl, font-medium, text-5xl, font-bold, text-gray-400, text-sm, font-light 등의 클래스를 사용하여 적절한 간격과 스타일을 적용합니다.
<div class="flex flex-col space-y-6">
<!-- 레이블 및 제목 섹션 -->
<div class="flex flex-col mb-4 space-y-3 text-center md:text-left">
<div>
<div class="inline-block px-3 py-1 text-sm text-white bg-black rounded-full">
무료 배송
</div>
</div>
<!-- 제목 -->
<div class="max-w-sm text-2xl font-medium">
레이저 크라켄 키티 에디션 게이밍 헤드셋 퀄츠
</div>
</div>
<!-- 가격 섹션 -->
<div class="flex flex-col mb-4 space-y-3 text-center md:text-left">
<p class="line-through">$799</p>
<p class="text-5xl font-bold">$599</p>
<p class="text-sm font-light text-gray-400">
이 할인은 4월 3일까지 유효하며, 재고가 소진될 때까지 유효합니다!
</p>
</div>
</div>
1.5 버튼 섹션
버튼 섹션에서는 group, group-hover, bg-blue-700, text-white, border-b-8, rounded-lg, transition-all, duration-150, hover:bg-opacity-30, hover:shadow-lg, hover:-translate-y-0.5 등의 클래스를 사용하여 버튼의 스타일과 호버 효과를 구현합니다. group 클래스는 자식 요소에 호버 효과를 전달하기 위해 사용됩니다.
<div class="group">
<button class="w-full transition-all duration-150 bg-blue-700 text-white border-b-8 border-b-blue-700 rounded-lg group-hover:border-t-8 group-hover:border-b-0 group-hover:bg-blue-700 group-hover:border-t-blue-700 group-hover:shadow-lg">
<div class="px-8 py-4 duration-150 bg-blue-500 rounded-lg group-hover:bg-blue-700">
장바구니에 담기
</div>
</button>
</div>
2. 개발 방법 종합
Tailwind CSS를 사용하여 이런 스타일링을 할 때는:
- HTML 구조 설계: 먼저 기본 HTML 구조를 설계합니다.
- Tailwind 클래스 적용: 각 요소에 Tailwind의 유틸리티 클래스를 적용하여 스타일을 지정합니다.
- 유연한 레이아웃: 미디어 쿼리(md:, lg: 등)를 활용해 반응형 레이아웃을 구현합니다.
- 호버 및 그룹 호버: hover:와 group-hover: 클래스를 사용해 사용자 인터랙션을 추가합니다.
<!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-100">
<!-- 카드 컨테이너 -->
<div
class="flex flex-col p-6 m-3 space-y-10 bg-white rounded-2xl shadow-2xl md:flex-row md:space-y-0 md:space-x-10 md:m-0 md:p-16"
>
<!-- 이미지 섹션 -->
<div>
<img
src="images/headphone.png"
alt="헤드폰 이미지"
class="mx-auto duration-200 w-60 hover:scale-105"
/>
</div>
<!-- 내용 섹션 -->
<div class="flex flex-col space-y-6">
<!-- 레이블 및 제목 섹션 -->
<div class="flex flex-col mb-4 space-y-3 text-center md:text-left">
<div>
<div
class="inline-block px-3 py-1 text-sm text-white bg-black rounded-full"
>
무료 배송
</div>
</div>
<!-- 제목 -->
<div class="max-w-sm text-2xl font-medium">
레이저 크라켄 키티 에디션 게이밍 헤드셋 퀄츠
</div>
</div>
<!-- 가격 섹션 -->
<div class="flex flex-col mb-4 space-y-3 text-center md:text-left">
<p class="line-through">₩7,990</p>
<p class="text-5xl font-bold">₩5,990</p>
<p class="text-sm font-light text-gray-400">
이 할인은 4월 3일까지 유효하며, 재고가 소진될 때까지 유효합니다!
</p>
</div>
<!-- 버튼 그룹 -->
<div class="group">
<button
class="w-full transition-all duration-150 bg-blue-700 text-white border-b-8 border-b-blue-700 rounded-lg group-hover:border-t-8 group-hover:border-b-0 group-hover:bg-blue-700 group-hover:border-t-blue-700 group-hover:shadow-lg"
>
<div
class="px-8 py-4 duration-150 bg-blue-500 rounded-lg group-hover:bg-blue-700"
>
장바구니에 담기
</div>
</button>
</div>
<!-- 재고 상태 -->
<div class="flex items-center space-x-3 group">
<div
class="w-3 h-3 bg-green-400 rounded-full group-hover:animate-ping"
></div>
<div class="text-sm">50+ 개의 재고 있음</div>
</div>
<!-- 하단 버튼 컨테이너 -->
<div
class="flex flex-col space-y-4 md:space-y-0 md:space-x-4 md:flex-row"
>
<button
class="flex items-center justify-center py-3 px-5 space-x-3 border-2 border-gray-300 rounded-lg shadow-sm hover:bg-opacity-30 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-150"
>
<img src="images/weight.png" alt="무게 아이콘" class="w-8" />
<span>장바구니에 담기</span>
</button>
<button
class="flex items-center justify-center py-3 px-5 space-x-3 border-2 border-gray-300 rounded-lg shadow-sm hover:bg-opacity-30 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-150"
>
<img src="images/heart.png" alt="하트 아이콘" class="w-8" />
<span>위시리스트에 추가</span>
</button>
</div>
</div>
</div>
</div>
</body>
</html>
댓글 ( 0)
댓글 남기기