마카로닉스

2286 No

Tailwind CSS 미니 프로젝트 - 로그인 모달

2024-09-04 19:02:50 By 라이트 0 36 댓글수 0 포스트 하기

9월 2024
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

1. 프로젝트 설정

Tailwind CSS 설치

Tailwind CSS를 사용하려면 프로젝트에 Tailwind를 포함해야 합니다. 이미 포함된 <script> 태그를 사용하여 Tailwind를 CDN에서 불러옵니다:

<script src="https://cdn.tailwindcss.com"></script>

2. Tailwind 구성 설정

Tailwind 설정에서 사용자 정의 폰트를 추가합니다. 이를 위해 <script> 태그 안에 Tailwind의 테마 설정을 변경합니다:

tailwind.config = {
  theme: {
    fontFamily: {
      sans: ['Nanum Gothic', 'sans-serif'],
      mono: ['Nanum Gothic', 'monospace'],
    },
  },
}

이 설정은 Nanum Gothic 폰트를 기본 폰트로 사용하게 합니다.

3. HTML 구조 설계

전체 컨테이너

전체 모달을 중앙에 배치하고, 배경색을 지정합니다:

<div class="flex items-center justify-center min-h-screen bg-rose-50">

flex: 컨테이너를 플렉스 박스로 설정.
items-center: 수직 중앙 정렬.
justify-center: 수평 중앙 정렬.
min-h-screen: 화면 높이를 최소 100%로 설정.
bg-rose-50: 배경색을 연한 로즈 컬러로 설정.

카드 컨테이너

모달의 카드 컨테이너를 설정합니다. 좌우측 레이아웃을 지원하는 플렉스 박스를 사용하고, 그림자와 둥근 모서리를 추가합니다:

<div class="relative flex flex-col m-6 space-y-10 bg-white shadow-2xl rounded-2xl md:flex-row md:space-y-0 md:m-0">

relative: 카드 컨테이너를 기준으로 자식 요소 배치.
flex flex-col: 모바일에서는 세로 레이아웃.
m-6 space-y-10: 마진과 자식 요소 간의 간격 설정.
bg-white: 배경을 흰색으로 설정.
shadow-2xl: 강한 그림자 추가.
rounded-2xl: 모서리를 둥글게.
md:flex-row md:space-y-0 md:m-0: 데스크탑에서는 가로 레이아웃으로 전환.

왼쪽 영역

왼쪽 영역에 로그인 폼과 텍스트를 추가합니다:


<div class="p-6 md:p-20">

p-6 md:p-20: 모든 방향에 패딩을 추가하고, 데스크탑에서는 패딩을 더 크게.

상단 내용

타이틀과 설명을 포함합니다:

<h2 class="font-mono mb-5 text-4xl font-bold">로그인</h2>
<p class="max-w-sm mb-12 font-sans font-light text-gray-600">

font-mono: 모노스페이스 폰트 사용.
text-4xl font-bold: 큰 크기와 굵은 텍스트.
max-w-sm mb-12: 최대 너비와 하단 마진 설정.
font-light text-gray-600: 가벼운 글꼴 두께와 회색 텍스트.

입력 필드

로그인 폼의 이메일 입력 필드를 설정합니다:

<input
  type="text"
  class="w-full p-6 border border-gray-300 rounded-md placeholder:font-sans placeholder:font-light"
  placeholder="이메일 주소를 입력하세요"
/>

w-full p-6: 입력 필드를 전체 너비로 하고 패딩 추가.
border border-gray-300: 회색 테두리 추가.
rounded-md: 모서리를 약간 둥글게.
placeholder:font-sans placeholder:font-light: 플레이스홀더 텍스트에 폰트 적용.

중간 내용

비밀번호 찾기 링크와 다음 버튼을 추가합니다:

<div class="flex flex-col items-center justify-between mt-6 space-y-6 md:flex-row md:space-y-0">
  <div class="font-thin text-cyan-700">비밀번호를 잊으셨나요?</div>
  <button class="...">다음</button>
</div>

flex flex-col: 모바일에서는 세로 정렬.
items-center justify-between: 항목을 중앙 정렬하고, 양 끝에 배치.
text-cyan-700: 비밀번호 찾기 링크 색상.

구분선

구분선 추가:

<div class="mt-12 border-b border-b-gray-300"></div>

mt-12: 상단 마진 추가.
border-b border-b-gray-300: 하단 테두리 추가.

하단 내용

소셜 로그인 옵션을 추가합니다:

<p class="py-6 text-sm font-thin text-center text-gray-400">
  또는 다음으로 로그인
</p>

py-6: 상하단 패딩.
text-sm font-thin: 작은 크기의 얇은 글꼴.
text-center text-gray-400: 중앙 정렬 및 회색 텍스트.

소셜 로그인 버튼들

소셜 로그인 버튼 두 개를 가로로 배치합니다:

<div class="flex flex-col space-x-0 space-y-6 md:flex-row md:space-x-4 md:space-y-0">
  <button class="...">페이스북</button>
  <button class="...">구글</button>
</div>

flex flex-col: 모바일에서 세로 정렬.
space-y-6: 버튼 간의 수직 간격.
md:flex-row md:space-x-4 md:space-y-0: 데스크탑에서는 가로 정렬 및 간격 조정.

오른쪽 영역

모달의 오른쪽에 이미지를 배치합니다:


<img src="images/image.jpg" alt="" class="w-[430px] hidden md:block" />

w-[430px]: 이미지의 너비를 430px로 설정.
hidden md:block: 모바일에서는 숨기고, 데스크탑에서만 보이도록.

닫기 버튼

모달을 닫는 버튼을 설정합니다:

<div class="group absolute -top-5 right-4 flex items-center justify-center w-10 h-10 bg-gray-200 rounded-full md:bg-white md:top-4 hover:cursor-pointer hover:-translate-y-0.5 transition duration-150">
  <svg class="w-6 h-6 text-black group-hover:text-gray-600">...</svg>
</div>

group: 그룹화하여 자식 요소에 hover 효과 적용.
absolute: 위치를 카드 컨테이너의 상대적 위치로 설정.
top-5 right-4: 상단과 오른쪽에서 약간 떨어지게 위치.
w-10 h-10 bg-gray-200: 10x10 크기의 회색 배경 원형 버튼.
hover:cursor-pointer: 마우스를 올리면 커서가 포인터로 변경.
hover:-translate-y-0.5 transition duration-150: 마우스를 올리면 약간 위로 이동하는 애니메이션.

<!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" />
  <link
    href="https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700&family=Rokkitt:wght@600;700&display=swap"
    rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">

  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        fontFamily: {
          sans: ['Nanum Gothic', 'sans-serif'],
          mono: ['Nanum Gothic', 'monospace'],
        },
      },
    }
  </script>
  <title>로그인 모달</title>
</head>

<body>
  <!-- 전체 컨테이너 -->
  <div class="flex items-center justify-center min-h-screen bg-rose-50">
    <!-- 카드 컨테이너 -->
    <div class="relative flex flex-col m-6 space-y-10 bg-white shadow-2xl rounded-2xl md:flex-row md:space-y-0 md:m-0">
      <!-- 왼쪽 영역 -->
      <div class="p-6 md:p-20">
        <!-- 상단 내용 -->
        <h2 class="font-mono mb-5 text-4xl font-bold">로그인</h2>
        <p class="max-w-sm mb-12 font-sans font-light text-gray-600">
          계정에 로그인하여 사진, 동영상 또는 음악을 업로드하거나 다운로드하세요.
        </p>
        <input type="text"
          class="w-full p-6 border border-gray-300 rounded-md placeholder:font-sans placeholder:font-light"
          placeholder="이메일 주소를 입력하세요" />



        <!-- 중간 내용 -->
        <div class="flex flex-col items-center justify-between mt-6 space-y-6 md:flex-row md:space-y-0">
          <div class="font-thin text-cyan-700">비밀번호를 잊으셨나요?</div>

          <button
            class="w-full md:w-auto flex justify-center items-center p-6 space-x-4 font-sans font-bold text-white rounded-md shadow-lg px-9 bg-cyan-700 shadow-cyan-100 hover:bg-opacity-90 shadow-sm hover:shadow-lg border transition hover:-translate-y-0.5 duration-150">
            <span>다음</span>
            <svg xmlns="http://www.w3.org/2000/svg" class="w-7" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff"
              fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <line x1="5" y1="12" x2="19" y2="12" />
              <line x1="13" y1="18" x2="19" y2="12" />
              <line x1="13" y1="6" x2="19" y2="12" />
            </svg>
          </button>
        </div>




        <!-- 구분선 -->
        <div class="mt-12 border-b border-b-gray-300"></div>

        <!-- 하단 내용 -->
        <p class="py-6 text-sm font-thin text-center text-gray-400">
          또는 다음으로 로그인
        </p>

        <!-- 하단 버튼 컨테이너 -->
        <div class="flex flex-col space-x-0 space-y-6 md:flex-row md:space-x-4 md:space-y-0">
          <button
            class="flex items-center justify-center py-2 space-x-3 border border-gray-300 rounded shadow-sm hover:bg-opacity-30 hover:shadow-lg hover:-translate-y-0.5 transition duration-150 md:w-1/2">
            <img src="images/facebook.png" alt="" class="w-9" />
            <span class="font-thin">페이스북</span>
          </button>
          <button
            class="flex items-center justify-center py-2 space-x-3 border border-gray-300 rounded shadow-sm hover:bg-opacity-30 hover:shadow-lg hover:-translate-y-0.5 transition duration-150 md:w-1/2">
            <img src="images/google.png" alt="" class="w-9" />
            <span class="font-thin">구글</span>
          </button>
        </div>





      </div>

      <!-- 오른쪽 영역 -->
      <img src="images/image.jpg" alt="" class="w-[430px] hidden md:block" />



      <!-- 닫기 버튼 -->
      <div
        class="group absolute -top-5 right-4 flex items-center justify-center w-10 h-10 bg-gray-200 rounded-full md:bg-white md:top-4 hover:cursor-pointer hover:-translate-y-0.5 transition duration-150">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-black group-hover:text-gray-600" viewBox="0 0 24 24"
          stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <line x1="18" y1="6" x2="6" y2="18" />
          <line x1="6" y1="6" x2="18" y2="18" />
        </svg>
      </div>


    </div>
  </div>
</body>

</html>