2277
No
1. 프로젝트 설정
- 새 폴더 생성: Tailwind Dash Projects라는 폴더를 만들고, 그 안에 email-subscribe라는 하위 폴더를 생성합니다.
- 코드 에디터 열기: Visual Studio Code를 열고, Tailwind Dash Projects 폴더를 열어줍니다.
- index.html 파일 생성: email-subscribe 폴더 안에 index.html 파일을 만듭니다.
- 이미지 추가: Tailwind Course 프로젝트의 assets 폴더에서 이메일 구독 이미지 폴더를 복사하여 email-subscribe 폴더에 붙여넣습니다.
2. 기본 HTML 구조 작성
- HTML Boilerplate 추가: index.html 파일에 기본 HTML 구조를 추가합니다.
- Tailwind CSS 링크 추가: <head> 섹션에 Tailwind CSS를 링크합니다:
<script src="https://cdn.tailwindcss.com"></script>
3. 페이지 스타일링
배경 컨테이너:
<div class="flex items-center justify-center h-screen bg-zinc-700">
- flex: Flexbox를 사용하여 요소를 정렬합니다.
- items-center: 수직 가운데 정렬.
- justify-center: 수평 가운데 정렬.
- h-screen: 화면 전체 높이.
2. 카드 컨테이너:
. <div class="bg-zinc-800 p-2 mx-6 rounded-2xl">
- bg-zinc-800: 카드 배경 색상.
- p-2: 카드 내부 패딩.
- mx-6: 수평 마진.
- rounded-2xl: 카드 모서리 둥글게.
3.플렉스 컨테이너:
<div class="flex flex-col md:flex-row rounded-l-xl">
- flex-col: 기본적으로 열 방향으로 배치.
- md:flex-row: 중간 화면 이상에서 행 방향으로 배치.
- rounded-l-xl: 왼쪽 모서리 둥글게.
4.이미지:
<img src="images/image.jpg" alt="" class="object-fit rounded-xl h-80 md:h-64 md:rounded-l-xl md:rounded-r-none transform hover:scale-105 hover:rounded-xl duration-200"/>
- object-fit: 이미지 비율 유지.
- rounded-xl: 작은 화면에서 둥글게.
- h-80: 기본 높이.
- md:h-64: 중간 화면 이상에서 높이 조정.
- md:rounded-l-xl: 중간 화면 이상에서 왼쪽 모서리 둥글게.
- md:rounded-r-none: 중간 화면 이상에서 오른쪽 모서리 둥글게 제거.
- hover:scale-105: 호버 시 이미지 확대.
- duration-200: 호버 효과의 지속 시간.
<div class="p-6 md:p-12"> <h2 class="font-serif text-xl font-medium text-center text-white md:text-left">
- p-6 md:p-12: 패딩 설정.
- font-serif: 세리프 글꼴.
- text-xl md:text-left: 텍스트 크기 및 정렬 조정.
6.입력란 및 버튼
<input type="text" placeholder="이메일 주소를 입력하세요" class="p-2 px-4 text-center text-white bg-zinc-800 border border-zinc-600 placeholder:text-xs placeholder:text-center md:text-left focus:outline-none"/> <button class="px-5 py-3 text-xs rounded-md text-zinc-800 bg-lime-500 hover:bg-lime-700 hover:text-white duration-500"> 구독하기 </button>
- p-2 px-4: 패딩 및 좌우 패딩.
- text-center md:text-left: 텍스트 정렬.
- bg-zinc-800 border border-zinc-600: 배경색 및 테두리 색상.
- focus:outline-none: 포커스 시 테두리 없음.
- hover:bg-lime-700 hover:text-white: 호버 시 배경색 및 텍스트 색상 변경.
- duration-500: 버튼 호버 효과의 지속 시간.
<!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 h-screen bg-zinc-700">
<!-- 카드 -->
<div class="bg-zinc-800 p-2 mx-6 rounded-2xl">
<!-- 플렉스 컨테이너 -->
<div class="flex flex-col md:flex-row rounded-l-xl">
<!-- 이미지 -->
<img
src="images/image.jpg"
alt=""
class="object-fit rounded-xl h-80 md:h-64 md:rounded-l-xl md:rounded-r-none transform hover:scale-105 hover:rounded-xl duration-200"
/>
<!-- 내용 -->
<div class="p-6 md:p-12">
<h2
class="font-serif text-xl font-medium text-center text-white md:text-left"
>
식이요법 및 피트니스 팁을 이메일로 받아보세요
</h2>
<p
class="max-w-xs my-4 text-xs leading-5 tracking-wide text-center text-white md:text-left"
>
더 나은 식사와 운동을 원하세요? Diet&Fitness 뉴스레터에 가입하세요.
</p>
<div
class="flex flex-col mt-5 space-y-4 md:space-x-3 md:flex-row md:space-y-0"
>
<input
type="text"
placeholder="이메일 주소를 입력하세요"
class="p-2 px-4 text-center text-white bg-zinc-800 border border-zinc-600 placeholder:text-xs placeholder:text-center md:text-left placeholder:md:text-left focus:outline-none"
/>
<button
class="px-5 py-3 text-xs rounded-md text-zinc-800 bg-lime-500 hover:bg-lime-700 hover:text-white duration-500"
>
구독하기
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
댓글 ( 0)
댓글 남기기