안녕하세요 이번시간에는 TailwindCSS로 카드 컴포넌트를 만드는 예제를 작성해보겠습니다.
1. 프로젝트 초기화 및 TailwindCSS 설치
npm init -y
npm install tailwindcss
2. TailwindCSS 설정 파일 생성
npx tailwindcss init- 위 명령어 결과로 tailwind.config.js 파일 생성
3. tailwind.config.js 파일 수정
module.exports = {
content: ['./**/*.html'], // 프로젝트의 HTML 파일을 대상으로 합니다.
// 다른 설정들...
}4. TailwindCSS 스타일 파일 생성
styles.css 파일을 생성한 후, 이 파일 안에 아래의 내용을 추가합니다
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';5. TailwindCSS 빌드
npx tailwindcss build -i styles.css -o output.css6. 카드 컴포넌트 HTML 생성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>세련된 카드 컴포넌트</title>
<link rel="stylesheet" href="output.css" />
</head>
<body class="bg-gray-200 flex items-center justify-center min-h-screen">
<div
class="bg-white p-6 rounded-lg shadow-xl max-w-sm transition-transform transform hover:scale-105"
>
<div class="relative">
<img
src="image.jpeg"
alt="Placeholder Image"
class="rounded-t-lg mb-4 w-full"
/>
<div class="absolute bottom-0 bg-black bg-opacity-60 text-white p-3">
<h3 class="font-semibold">이미지 타이틀</h3>
</div>
</div>
<h2 class="text-2xl mb-2">제목</h2>
<p class="text-gray-700">여기에 설명을 작성하세요.</p>
<a
href="#"
class="mt-4 inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition-colors duration-300"
>더 보기</a
>
</div>
</body>
</html>
7. 결과
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS]카드 컴포넌트 캐러셀 구현 (0) | 2023.11.26 |
|---|---|
| [HTML/CSS]간단한 메모장 만들기 (0) | 2023.11.16 |
| [HTML/CSS] Tailwind로 Mac Terminal 만들기 (0) | 2023.11.05 |
| [HTML/CSS] 다양한 hover effect를 가진 버튼 만들기 (2) | 2023.10.30 |
| [HTML/CSS]스켈레톤 UI: 로딩 애니메이션 (0) | 2023.10.27 |
