2273
No
1. 색상작업
<!-- Text Colors -->
<p class="text-black">Tailwind is awesome</p>
<p class="text-red-50">Tailwind is awesome</p>
<p class="text-red-100">Tailwind is awesome</p>
<p class="text-red-200">Tailwind is awesome</p>
<p class="text-red-300">Tailwind is awesome</p>
<p class="text-red-400">Tailwind is awesome</p>
<p class="text-red-500">Tailwind is awesome</p>
<p class="text-red-600">Tailwind is awesome</p>
<p class="text-red-700">Tailwind is awesome</p>
<p class="text-red-800">Tailwind is awesome</p>
<p class="text-red-900">Tailwind is awesome</p>
<!-- Background Colors -->
<div class="bg-slate-600">
<p class="text-white">Tailwind is awesome</p>
</div>
<div class="bg-zinc-400">
<p class="text-white">Tailwind is awesome</p>
</div>
<div class="bg-emerald-600">
<p class="text-white">Tailwind is awesome</p>
</div>
<!-- Text Underline -->
<p class="underline text-red-700 decoration-red-700">Tailwind is awesome</p>
<p class="underline text-blue-700 decoration-blue-700">
Tailwind is awesome
</p>
<!-- Border Colors -->
<input class="border-2 border-rose-500" />
<input class="border-2 border-blue-300" />
<input class="border-2 border-purple-900" />
<input class="border-2 border-yellow-500" />
<!-- Divide Colors -->
<div class="divide-y divide-blue-200">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</div>
<!-- Outline Colors -->
<button class="outline outline-blue-500">Subscribe</button>
<button class="outline outline-purple-300">Subscribe</button>
<button class="outline outline-gray-500">Subscribe</button>
<!-- Box Shadow Colors (Opacity defaults to 100, but you cans set it)-->
<button class="bg-cyan-500 shadow-lg shadow-cyan-500">Subscribe</button>
<button class="bg-blue-500 shadow-lg shadow-blue-500/50">bg-blue-500 </button>
<button class="bg-indigo-500 shadow-lg shadow-indigo-500/50">bg-indigo-500</button>
<!-- Accent Colors -->
<input type="checkbox" class="accent-purple-500" checked /> Option 1
<input type="checkbox" class="accent-pink-500" checked /> Option 2
<input type="checkbox" class="accent-red-300" checked /> Option 3
<!-- Arbitrary Colors -->
<div class="bg-[#427fab] h-10">Hello</div>
<div class="text-[#427fab] h-10">Hello</div>
<div class="border border-[#427fab] h-10">Hello</div>
색상
기본적으로 Tailwind에는 다양한 색상과 그 색상에 대한 여러 가지 음영이 제공됩니다. 텍스트, 배경, 테두리 등에 이 색상들을 적용할 수 있습니다.
텍스트 색상
- 예를 들어 text-black은 검은색 텍스트를, text-white는 흰색 텍스트를 나타냅니다. 하지만 흰색과 검은색은 음영이 없기 때문에 text-black-200 같은 형태는 사용할 수 없습니다.
- 빨간색을 사용하고 싶다면 text-red-500처럼 음영값을 지정해야 합니다. 음영은 50부터 900까지 존재하며, 숫자가 높을수록 더 짙은 색이 됩니다.
배경 색상
- 텍스트 색상과 동일한 방식으로 배경에도 색상을 적용할 수 있습니다. 예를 들어 bg-slate-800 같은 클래스를 사용할 수 있습니다.
- 배경색이 어두울 경우, text-white나 text-yellow-200처럼 텍스트 색상을 조정해 읽기 쉽게 할 수 있습니다.
밑줄 색상
- underline 클래스를 사용하면 텍스트 밑에 기본 밑줄이 생기지만, decoration 클래스를 사용해 밑줄 색상을 조정할 수 있습니다. 예를 들어 decoration-red-500으로 빨간색 밑줄을 만들 수 있습니다.
테두리 색상
- border 클래스를 사용해 테두리 색상을 지정할 수 있습니다. 예를 들어, border-blue-500, border-green-500처럼 사용할 수 있습니다.
구분선 색상
- divide 클래스를 사용해 요소 사이에 구분선을 추가할 수 있습니다. divide-y는 수직 구분선, divide-x는 수평 구분선을 만듭니다. 예를 들어 divide-blue-300은 파란색 구분선을 만듭니다.
외곽선 색상
- 외곽선(outline) 색상도 지정할 수 있습니다. outline-red-500처럼 사용할 수 있습니다.
그림자 색상
- 그림자(shadow)에 색상을 적용할 수 있습니다. 예를 들어, shadow-lg와 함께 shadow-cyan-500을 사용하면 시안색 그림자가 생깁니다.
- 그림자 색상의 불투명도도 조절할 수 있습니다. 예를 들어 shadow-purple-500/50은 불투명도가 50%인 보라색 그림자를 만듭니다.
체크박스 강조 색상
- accent 클래스를 사용해 체크박스의 체크된 상태의 색상을 변경할 수 있습니다. 예를 들어, accent-purple-500은 보라색으로 체크된 상태를 표시합니다.
임의의 색상
- Tailwind에서는 색상을 Hex, RGB, 또는 이름으로 지정할 수도 있습니다. 예를 들어, bg-[#4a90e2], bg-[rgb(255,0,0)], bg-steelblue 같은 식으로 임의의 색상을 사용할 수 있습니다.
2.Tailwind CSS의 container 클래스와 여백(margin) 및 패딩(padding)
<!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>Container & Spacing</title>
</head>
<body>
<div class="container mx-auto">
<article class="bg-slate-300">
<h3>Article One</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Exercitationem laboriosam libero molestiae recusandae accusantium
voluptates? Expedita dignissimos amet eveniet dolore nobis odio a
sunt, maiores quasi. Modi amet quos dolores!
</p>
</article>
<!-- Margin -->
<h3 class="my-4">Margin</h3>
<div class="m-4 bg-slate-100">m-4</div>
<div class="mx-4 bg-slate-200">mx-4</div>
<div class="my-4 bg-slate-300">my-4</div>
<div class="mt-6 bg-slate-400">mt-6</div>
<div class="mr-4 bg-slate-500">mr-4</div>
<div class="mb-8 bg-slate-600">mb-8</div>
<div class="ml-2 bg-slate-700">ml-2</div>
<!-- Arbitrary Spacing -->
<div class="ml-[200px] bg-slate-700">ml-[200px]</div>
<!-- Padding -->
<h3 class="my-4">Padding</h3>
<div class="p-4 bg-slate-100">p-4</div>
<div class="px-4 bg-slate-200">px-4</div>
<div class="py-4 bg-slate-300">py-4</div>
<div class="pt-6 bg-slate-400">pt-6</div>
<div class="pr-4 bg-slate-500">pr-4</div>
<div class="pb-8 bg-slate-600">pb-8</div>
<div class="pl-2 bg-slate-700">pl-2</div>
<!-- Space Between X -->
<h3 class="my-4">Space Between X</h3>
<div class="flex space-x-4">
<div class="p-3 bg-red-100">01</div>
<div class="p-3 bg-red-100">02</div>
<div class="p-3 bg-red-100">03</div>
</div>
<!-- Space Between Y -->
<h3 class="my-4">Space Between Y</h3>
<div class="flex flex-col space-y-4">
<div class="p-3 bg-red-100">01</div>
<div class="p-3 bg-red-100">02</div>
<div class="p-3 bg-red-100">03</div>
</div>
</div>
</body>
</html>이제 Tailwind CSS의 container 클래스와 여백(margin) 및 패딩(padding) 클래스에 대해 알아보겠습니다. 이러한 클래스는 웹 개발 시 자주 사용되므로 익혀두면 좋습니다.
1. Container 클래스
먼저 container 클래스는 웹 페이지의 레이아웃을 중앙에 배치하고 화면 크기에 따라 최대 너비를 설정합니다. Tailwind에서 기본적으로 사용하는 미디어 쿼리 사이즈는 다음과 같습니다:
- 640px: 최대 너비 100%
- 768px: 최대 너비 640px
- 1024px: 최대 너비 768px
- 1280px: 최대 너비 1024px
- 1536px: 최대 너비 1280px
컨테이너는 이 값들을 기준으로 반응형으로 동작하며, container 클래스를 추가하면 기본적인 레이아웃이 설정됩니다. 하지만 기본적으로 중앙에 정렬되지 않으므로 mx-auto 클래스를 사용해 수평 중앙 정렬을 할 수 있습니다.
2. Margin (여백) 클래스
Tailwind CSS에서는 다양한 여백 클래스를 제공합니다. m 클래스는 요소의 모든 면에 여백을 적용합니다. mx, my, ml, mr, mt, mb 등을 사용해 각각 수평, 수직, 왼쪽, 오른쪽, 위, 아래에 여백을 적용할 수 있습니다. 예를 들어:
- mx-4: 수평 여백 1rem (16px)
- mt-2: 위쪽 여백 0.5rem (8px)
- ml-auto: 왼쪽 여백 자동
여백 크기는 기본적으로 rem 단위로 설정되며, 크기는 0.125rem부터 시작해 24rem까지 다양합니다. 이 크기들은 Tailwind의 기본값이지만, 설정 파일을 통해 커스터마이징할 수 있습니다.
3. Padding (패딩) 클래스
패딩 클래스는 여백 클래스와 유사하게 작동하며, p, px, py, pl, pr, pt, pb 등을 사용합니다. 여백과 마찬가지로 rem 단위로 크기가 설정되며, 기본적인 크기는 동일합니다.
4. Space Between 클래스
space-x와 space-y 클래스는 플렉스 박스 레이아웃에서 요소들 간의 간격을 자동으로 조정해 줍니다. 예를 들어:
- space-x-4: 수평 간격 1rem
- space-y-4: 수직 간격 1rem
이를 통해 요소마다 별도의 여백을 설정하지 않고도 쉽게 간격을 조절할 수 있습니다.
요약
- container: 반응형 최대 너비 설정 (중앙 정렬은 mx-auto 필요)
- 여백(margin): 모든 방향(m), 수평(mx), 수직(my), 개별 방향(ml, mr, mt, mb)에 설정
- 패딩(padding): 모든 방향(p), 수평(px), 수직(py), 개별 방향(pl, pr, pt, pb)에 설정
- space-x, space-y: 플렉스 박스에서 요소 간 간격 조정
이 내용이 Tailwind CSS로 레이아웃을 구성하는 데 도움이 되었길 바랍니다.
<!-- Breakpoinsts for Container
container None width: 100%;
sm (640px) max-width: 640px;
md (768px) max-width: 768px;
lg (1024px) max-width: 1024px;
xl (1280px) max-width: 1280px;
2xl (1536px) max-width: 1536px;
-->
<!-- Margin Values
m-0 margin: 0px;
mx-0 margin-left: 0px;
margin-right: 0px;
my-0 margin-top: 0px;
margin-bottom: 0px;
mt-0 margin-top: 0px;
mr-0 margin-right: 0px;
mb-0 margin-bottom: 0px;
ml-0 margin-left: 0px;
m-px margin: 1px;
mx-px margin-left: 1px;
margin-right: 1px;
my-px margin-top: 1px;
margin-bottom: 1px;
mt-px margin-top: 1px;
mr-px margin-right: 1px;
mb-px margin-bottom: 1px;
ml-px margin-left: 1px;
m-0.5 margin: 0.125rem; /* 2px */
mx-0.5 margin-left: 0.125rem; /* 2px */
margin-right: 0.125rem; /* 2px */
my-0.5 margin-top: 0.125rem; /* 2px */
margin-bottom: 0.125rem; /* 2px */
mt-0.5 margin-top: 0.125rem; /* 2px */
mr-0.5 margin-right: 0.125rem; /* 2px */
mb-0.5 margin-bottom: 0.125rem; /* 2px */
ml-0.5 margin-left: 0.125rem; /* 2px */
m-1 margin: 0.25rem; /* 4px */
mx-1 margin-left: 0.25rem; /* 4px */
margin-right: 0.25rem; /* 4px */
my-1 margin-top: 0.25rem; /* 4px */
margin-bottom: 0.25rem; /* 4px */
mt-1 margin-top: 0.25rem; /* 4px */
mr-1 margin-right: 0.25rem; /* 4px */
mb-1 margin-bottom: 0.25rem; /* 4px */
ml-1 margin-left: 0.25rem; /* 4px */
m-1.5 margin: 0.375rem; /* 6px */
mx-1.5 margin-left: 0.375rem; /* 6px */
margin-right: 0.375rem; /* 6px */
my-1.5 margin-top: 0.375rem; /* 6px */
margin-bottom: 0.375rem; /* 6px */
mt-1.5 margin-top: 0.375rem; /* 6px */
mr-1.5 margin-right: 0.375rem; /* 6px */
mb-1.5 margin-bottom: 0.375rem; /* 6px */
ml-1.5 margin-left: 0.375rem; /* 6px */
m-2 margin: 0.5rem; /* 8px */
mx-2 margin-left: 0.5rem; /* 8px */
margin-right: 0.5rem; /* 8px */
my-2 margin-top: 0.5rem; /* 8px */
margin-bottom: 0.5rem; /* 8px */
mt-2 margin-top: 0.5rem; /* 8px */
mr-2 margin-right: 0.5rem; /* 8px */
mb-2 margin-bottom: 0.5rem; /* 8px */
ml-2 margin-left: 0.5rem; /* 8px */
m-2.5 margin: 0.625rem; /* 10px */
mx-2.5 margin-left: 0.625rem; /* 10px */
margin-right: 0.625rem; /* 10px */
my-2.5 margin-top: 0.625rem; /* 10px */
margin-bottom: 0.625rem; /* 10px */
mt-2.5 margin-top: 0.625rem; /* 10px */
mr-2.5 margin-right: 0.625rem; /* 10px */
mb-2.5 margin-bottom: 0.625rem; /* 10px */
ml-2.5 margin-left: 0.625rem; /* 10px */
m-3 margin: 0.75rem; /* 12px */
mx-3 margin-left: 0.75rem; /* 12px */
margin-right: 0.75rem; /* 12px */
my-3 margin-top: 0.75rem; /* 12px */
margin-bottom: 0.75rem; /* 12px */
mt-3 margin-top: 0.75rem; /* 12px */
mr-3 margin-right: 0.75rem; /* 12px */
mb-3 margin-bottom: 0.75rem; /* 12px */
ml-3 margin-left: 0.75rem; /* 12px */
m-3.5 margin: 0.875rem; /* 14px */
mx-3.5 margin-left: 0.875rem; /* 14px */
margin-right: 0.875rem; /* 14px */
my-3.5 margin-top: 0.875rem; /* 14px */
margin-bottom: 0.875rem; /* 14px */
mt-3.5 margin-top: 0.875rem; /* 14px */
mr-3.5 margin-right: 0.875rem; /* 14px */
mb-3.5 margin-bottom: 0.875rem; /* 14px */
ml-3.5 margin-left: 0.875rem; /* 14px */
m-4 margin: 1rem; /* 16px */
mx-4 margin-left: 1rem; /* 16px */
margin-right: 1rem; /* 16px */
my-4 margin-top: 1rem; /* 16px */
margin-bottom: 1rem; /* 16px */
mt-4 margin-top: 1rem; /* 16px */
mr-4 margin-right: 1rem; /* 16px */
mb-4 margin-bottom: 1rem; /* 16px */
ml-4 margin-left: 1rem; /* 16px */
m-5 margin: 1.25rem; /* 20px */
mx-5 margin-left: 1.25rem; /* 20px */
margin-right: 1.25rem; /* 20px */
my-5 margin-top: 1.25rem; /* 20px */
margin-bottom: 1.25rem; /* 20px */
mt-5 margin-top: 1.25rem; /* 20px */
mr-5 margin-right: 1.25rem; /* 20px */
mb-5 margin-bottom: 1.25rem; /* 20px */
ml-5 margin-left: 1.25rem; /* 20px */
m-6 margin: 1.5rem; /* 24px */
mx-6 margin-left: 1.5rem; /* 24px */
margin-right: 1.5rem; /* 24px */
my-6 margin-top: 1.5rem; /* 24px */
margin-bottom: 1.5rem; /* 24px */
mt-6 margin-top: 1.5rem; /* 24px */
mr-6 margin-right: 1.5rem; /* 24px */
mb-6 margin-bottom: 1.5rem; /* 24px */
ml-6 margin-left: 1.5rem; /* 24px */
m-7 margin: 1.75rem; /* 28px */
mx-7 margin-left: 1.75rem; /* 28px */
margin-right: 1.75rem; /* 28px */
my-7 margin-top: 1.75rem; /* 28px */
margin-bottom: 1.75rem; /* 28px */
mt-7 margin-top: 1.75rem; /* 28px */
mr-7 margin-right: 1.75rem; /* 28px */
mb-7 margin-bottom: 1.75rem; /* 28px */
ml-7 margin-left: 1.75rem; /* 28px */
m-8 margin: 2rem; /* 32px */
mx-8 margin-left: 2rem; /* 32px */
margin-right: 2rem; /* 32px */
my-8 margin-top: 2rem; /* 32px */
margin-bottom: 2rem; /* 32px */
mt-8 margin-top: 2rem; /* 32px */
mr-8 margin-right: 2rem; /* 32px */
mb-8 margin-bottom: 2rem; /* 32px */
ml-8 margin-left: 2rem; /* 32px */
m-9 margin: 2.25rem; /* 36px */
mx-9 margin-left: 2.25rem; /* 36px */
margin-right: 2.25rem; /* 36px */
my-9 margin-top: 2.25rem; /* 36px */
margin-bottom: 2.25rem; /* 36px */
mt-9 margin-top: 2.25rem; /* 36px */
mr-9 margin-right: 2.25rem; /* 36px */
mb-9 margin-bottom: 2.25rem; /* 36px */
ml-9 margin-left: 2.25rem; /* 36px */
m-10 margin: 2.5rem; /* 40px */
mx-10 margin-left: 2.5rem; /* 40px */
margin-right: 2.5rem; /* 40px */
my-10 margin-top: 2.5rem; /* 40px */
margin-bottom: 2.5rem; /* 40px */
mt-10 margin-top: 2.5rem; /* 40px */
mr-10 margin-right: 2.5rem; /* 40px */
mb-10 margin-bottom: 2.5rem; /* 40px */
ml-10 margin-left: 2.5rem; /* 40px */
m-11 margin: 2.75rem; /* 44px */
mx-11 margin-left: 2.75rem; /* 44px */
margin-right: 2.75rem; /* 44px */
my-11 margin-top: 2.75rem; /* 44px */
margin-bottom: 2.75rem; /* 44px */
mt-11 margin-top: 2.75rem; /* 44px */
mr-11 margin-right: 2.75rem; /* 44px */
mb-11 margin-bottom: 2.75rem; /* 44px */
ml-11 margin-left: 2.75rem; /* 44px */
m-12 margin: 3rem; /* 48px */
mx-12 margin-left: 3rem; /* 48px */
margin-right: 3rem; /* 48px */
my-12 margin-top: 3rem; /* 48px */
margin-bottom: 3rem; /* 48px */
mt-12 margin-top: 3rem; /* 48px */
mr-12 margin-right: 3rem; /* 48px */
mb-12 margin-bottom: 3rem; /* 48px */
ml-12 margin-left: 3rem; /* 48px */
m-14 margin: 3.5rem; /* 56px */
mx-14 margin-left: 3.5rem; /* 56px */
margin-right: 3.5rem; /* 56px */
my-14 margin-top: 3.5rem; /* 56px */
margin-bottom: 3.5rem; /* 56px */
mt-14 margin-top: 3.5rem; /* 56px */
mr-14 margin-right: 3.5rem; /* 56px */
mb-14 margin-bottom: 3.5rem; /* 56px */
ml-14 margin-left: 3.5rem; /* 56px */
m-16 margin: 4rem; /* 64px */
mx-16 margin-left: 4rem; /* 64px */
margin-right: 4rem; /* 64px */
my-16 margin-top: 4rem; /* 64px */
margin-bottom: 4rem; /* 64px */
mt-16 margin-top: 4rem; /* 64px */
mr-16 margin-right: 4rem; /* 64px */
mb-16 margin-bottom: 4rem; /* 64px */
ml-16 margin-left: 4rem; /* 64px */
m-20 margin: 5rem; /* 80px */
mx-20 margin-left: 5rem; /* 80px */
margin-right: 5rem; /* 80px */
my-20 margin-top: 5rem; /* 80px */
margin-bottom: 5rem; /* 80px */
mt-20 margin-top: 5rem; /* 80px */
mr-20 margin-right: 5rem; /* 80px */
mb-20 margin-bottom: 5rem; /* 80px */
ml-20 margin-left: 5rem; /* 80px */
m-24 margin: 6rem; /* 96px */
mx-24 margin-left: 6rem; /* 96px */
margin-right: 6rem; /* 96px */
my-24 margin-top: 6rem; /* 96px */
margin-bottom: 6rem; /* 96px */
mt-24 margin-top: 6rem; /* 96px */
mr-24 margin-right: 6rem; /* 96px */
mb-24 margin-bottom: 6rem; /* 96px */
ml-24 margin-left: 6rem; /* 96px */
m-28 margin: 7rem; /* 112px */
mx-28 margin-left: 7rem; /* 112px */
margin-right: 7rem; /* 112px */
my-28 margin-top: 7rem; /* 112px */
margin-bottom: 7rem; /* 112px */
mt-28 margin-top: 7rem; /* 112px */
mr-28 margin-right: 7rem; /* 112px */
mb-28 margin-bottom: 7rem; /* 112px */
ml-28 margin-left: 7rem; /* 112px */
m-32 margin: 8rem; /* 128px */
mx-32 margin-left: 8rem; /* 128px */
margin-right: 8rem; /* 128px */
my-32 margin-top: 8rem; /* 128px */
margin-bottom: 8rem; /* 128px */
mt-32 margin-top: 8rem; /* 128px */
mr-32 margin-right: 8rem; /* 128px */
mb-32 margin-bottom: 8rem; /* 128px */
ml-32 margin-left: 8rem; /* 128px */
m-36 margin: 9rem; /* 144px */
mx-36 margin-left: 9rem; /* 144px */
margin-right: 9rem; /* 144px */
my-36 margin-top: 9rem; /* 144px */
margin-bottom: 9rem; /* 144px */
mt-36 margin-top: 9rem; /* 144px */
mr-36 margin-right: 9rem; /* 144px */
mb-36 margin-bottom: 9rem; /* 144px */
ml-36 margin-left: 9rem; /* 144px */
m-40 margin: 10rem; /* 160px */
mx-40 margin-left: 10rem; /* 160px */
margin-right: 10rem; /* 160px */
my-40 margin-top: 10rem; /* 160px */
margin-bottom: 10rem; /* 160px */
mt-40 margin-top: 10rem; /* 160px */
mr-40 margin-right: 10rem; /* 160px */
mb-40 margin-bottom: 10rem; /* 160px */
ml-40 margin-left: 10rem; /* 160px */
m-44 margin: 11rem; /* 176px */
mx-44 margin-left: 11rem; /* 176px */
margin-right: 11rem; /* 176px */
my-44 margin-top: 11rem; /* 176px */
margin-bottom: 11rem; /* 176px */
mt-44 margin-top: 11rem; /* 176px */
mr-44 margin-right: 11rem; /* 176px */
mb-44 margin-bottom: 11rem; /* 176px */
ml-44 margin-left: 11rem; /* 176px */
m-48 margin: 12rem; /* 192px */
mx-48 margin-left: 12rem; /* 192px */
margin-right: 12rem; /* 192px */
my-48 margin-top: 12rem; /* 192px */
margin-bottom: 12rem; /* 192px */
mt-48 margin-top: 12rem; /* 192px */
mr-48 margin-right: 12rem; /* 192px */
mb-48 margin-bottom: 12rem; /* 192px */
ml-48 margin-left: 12rem; /* 192px */
m-52 margin: 13rem; /* 208px */
mx-52 margin-left: 13rem; /* 208px */
margin-right: 13rem; /* 208px */
my-52 margin-top: 13rem; /* 208px */
margin-bottom: 13rem; /* 208px */
mt-52 margin-top: 13rem; /* 208px */
mr-52 margin-right: 13rem; /* 208px */
mb-52 margin-bottom: 13rem; /* 208px */
ml-52 margin-left: 13rem; /* 208px */
m-56 margin: 14rem; /* 224px */
mx-56 margin-left: 14rem; /* 224px */
margin-right: 14rem; /* 224px */
my-56 margin-top: 14rem; /* 224px */
margin-bottom: 14rem; /* 224px */
mt-56 margin-top: 14rem; /* 224px */
mr-56 margin-right: 14rem; /* 224px */
mb-56 margin-bottom: 14rem; /* 224px */
ml-56 margin-left: 14rem; /* 224px */
m-60 margin: 15rem; /* 240px */
mx-60 margin-left: 15rem; /* 240px */
margin-right: 15rem; /* 240px */
my-60 margin-top: 15rem; /* 240px */
margin-bottom: 15rem; /* 240px */
mt-60 margin-top: 15rem; /* 240px */
mr-60 margin-right: 15rem; /* 240px */
mb-60 margin-bottom: 15rem; /* 240px */
ml-60 margin-left: 15rem; /* 240px */
m-64 margin: 16rem; /* 256px */
mx-64 margin-left: 16rem; /* 256px */
margin-right: 16rem; /* 256px */
my-64 margin-top: 16rem; /* 256px */
margin-bottom: 16rem; /* 256px */
mt-64 margin-top: 16rem; /* 256px */
mr-64 margin-right: 16rem; /* 256px */
mb-64 margin-bottom: 16rem; /* 256px */
ml-64 margin-left: 16rem; /* 256px */
m-72 margin: 18rem; /* 288px */
mx-72 margin-left: 18rem; /* 288px */
margin-right: 18rem; /* 288px */
my-72 margin-top: 18rem; /* 288px */
margin-bottom: 18rem; /* 288px */
mt-72 margin-top: 18rem; /* 288px */
mr-72 margin-right: 18rem; /* 288px */
mb-72 margin-bottom: 18rem; /* 288px */
ml-72 margin-left: 18rem; /* 288px */
m-80 margin: 20rem; /* 320px */
mx-80 margin-left: 20rem; /* 320px */
margin-right: 20rem; /* 320px */
my-80 margin-top: 20rem; /* 320px */
margin-bottom: 20rem; /* 320px */
mt-80 margin-top: 20rem; /* 320px */
mr-80 margin-right: 20rem; /* 320px */
mb-80 margin-bottom: 20rem; /* 320px */
ml-80 margin-left: 20rem; /* 320px */
m-96 margin: 24rem; /* 384px */
mx-96 margin-left: 24rem; /* 384px */
margin-right: 24rem; /* 384px */
my-96 margin-top: 24rem; /* 384px */
margin-bottom: 24rem; /* 384px */
mt-96 margin-top: 24rem; /* 384px */
mr-96 margin-right: 24rem; /* 384px */
mb-96 margin-bottom: 24rem; /* 384px */
ml-96 margin-left: 24rem; /* 384px */
m-auto margin: auto;
mx-auto margin-left: auto;
margin-right: auto;
my-auto margin-top: auto;
margin-bottom: auto;
mt-auto margin-top: auto;
mr-auto margin-right: auto;
mb-auto margin-bottom: auto;
ml-auto margin-left: auto;
-->
<!-- Padding Values
p-0 padding: 0px;
px-0 padding-left: 0px;
padding-right: 0px;
py-0 padding-top: 0px;
padding-bottom: 0px;
pt-0 padding-top: 0px;
pr-0 padding-right: 0px;
pb-0 padding-bottom: 0px;
pl-0 padding-left: 0px;
p-px padding: 1px;
px-px padding-left: 1px;
padding-right: 1px;
py-px padding-top: 1px;
padding-bottom: 1px;
pt-px padding-top: 1px;
pr-px padding-right: 1px;
pb-px padding-bottom: 1px;
pl-px padding-left: 1px;
p-0.5 padding: 0.125rem; /* 2px */
px-0.5 padding-left: 0.125rem; /* 2px */
padding-right: 0.125rem; /* 2px */
py-0.5 padding-top: 0.125rem; /* 2px */
padding-bottom: 0.125rem; /* 2px */
pt-0.5 padding-top: 0.125rem; /* 2px */
pr-0.5 padding-right: 0.125rem; /* 2px */
pb-0.5 padding-bottom: 0.125rem; /* 2px */
pl-0.5 padding-left: 0.125rem; /* 2px */
p-1 padding: 0.25rem; /* 4px */
px-1 padding-left: 0.25rem; /* 4px */
padding-right: 0.25rem; /* 4px */
py-1 padding-top: 0.25rem; /* 4px */
padding-bottom: 0.25rem; /* 4px */
pt-1 padding-top: 0.25rem; /* 4px */
pr-1 padding-right: 0.25rem; /* 4px */
pb-1 padding-bottom: 0.25rem; /* 4px */
pl-1 padding-left: 0.25rem; /* 4px */
p-1.5 padding: 0.375rem; /* 6px */
px-1.5 padding-left: 0.375rem; /* 6px */
padding-right: 0.375rem; /* 6px */
py-1.5 padding-top: 0.375rem; /* 6px */
padding-bottom: 0.375rem; /* 6px */
pt-1.5 padding-top: 0.375rem; /* 6px */
pr-1.5 padding-right: 0.375rem; /* 6px */
pb-1.5 padding-bottom: 0.375rem; /* 6px */
pl-1.5 padding-left: 0.375rem; /* 6px */
p-2 padding: 0.5rem; /* 8px */
px-2 padding-left: 0.5rem; /* 8px */
padding-right: 0.5rem; /* 8px */
py-2 padding-top: 0.5rem; /* 8px */
padding-bottom: 0.5rem; /* 8px */
pt-2 padding-top: 0.5rem; /* 8px */
pr-2 padding-right: 0.5rem; /* 8px */
pb-2 padding-bottom: 0.5rem; /* 8px */
pl-2 padding-left: 0.5rem; /* 8px */
p-2.5 padding: 0.625rem; /* 10px */
px-2.5 padding-left: 0.625rem; /* 10px */
padding-right: 0.625rem; /* 10px */
py-2.5 padding-top: 0.625rem; /* 10px */
padding-bottom: 0.625rem; /* 10px */
pt-2.5 padding-top: 0.625rem; /* 10px */
pr-2.5 padding-right: 0.625rem; /* 10px */
pb-2.5 padding-bottom: 0.625rem; /* 10px */
pl-2.5 padding-left: 0.625rem; /* 10px */
p-3 padding: 0.75rem; /* 12px */
px-3 padding-left: 0.75rem; /* 12px */
padding-right: 0.75rem; /* 12px */
py-3 padding-top: 0.75rem; /* 12px */
padding-bottom: 0.75rem; /* 12px */
pt-3 padding-top: 0.75rem; /* 12px */
pr-3 padding-right: 0.75rem; /* 12px */
pb-3 padding-bottom: 0.75rem; /* 12px */
pl-3 padding-left: 0.75rem; /* 12px */
p-3.5 padding: 0.875rem; /* 14px */
px-3.5 padding-left: 0.875rem; /* 14px */
padding-right: 0.875rem; /* 14px */
py-3.5 padding-top: 0.875rem; /* 14px */
padding-bottom: 0.875rem; /* 14px */
pt-3.5 padding-top: 0.875rem; /* 14px */
pr-3.5 padding-right: 0.875rem; /* 14px */
pb-3.5 padding-bottom: 0.875rem; /* 14px */
pl-3.5 padding-left: 0.875rem; /* 14px */
p-4 padding: 1rem; /* 16px */
px-4 padding-left: 1rem; /* 16px */
padding-right: 1rem; /* 16px */
py-4 padding-top: 1rem; /* 16px */
padding-bottom: 1rem; /* 16px */
pt-4 padding-top: 1rem; /* 16px */
pr-4 padding-right: 1rem; /* 16px */
pb-4 padding-bottom: 1rem; /* 16px */
pl-4 padding-left: 1rem; /* 16px */
p-5 padding: 1.25rem; /* 20px */
px-5 padding-left: 1.25rem; /* 20px */
padding-right: 1.25rem; /* 20px */
py-5 padding-top: 1.25rem; /* 20px */
padding-bottom: 1.25rem; /* 20px */
pt-5 padding-top: 1.25rem; /* 20px */
pr-5 padding-right: 1.25rem; /* 20px */
pb-5 padding-bottom: 1.25rem; /* 20px */
pl-5 padding-left: 1.25rem; /* 20px */
p-6 padding: 1.5rem; /* 24px */
px-6 padding-left: 1.5rem; /* 24px */
padding-right: 1.5rem; /* 24px */
py-6 padding-top: 1.5rem; /* 24px */
padding-bottom: 1.5rem; /* 24px */
pt-6 padding-top: 1.5rem; /* 24px */
pr-6 padding-right: 1.5rem; /* 24px */
pb-6 padding-bottom: 1.5rem; /* 24px */
pl-6 padding-left: 1.5rem; /* 24px */
p-7 padding: 1.75rem; /* 28px */
px-7 padding-left: 1.75rem; /* 28px */
padding-right: 1.75rem; /* 28px */
py-7 padding-top: 1.75rem; /* 28px */
padding-bottom: 1.75rem; /* 28px */
pt-7 padding-top: 1.75rem; /* 28px */
pr-7 padding-right: 1.75rem; /* 28px */
pb-7 padding-bottom: 1.75rem; /* 28px */
pl-7 padding-left: 1.75rem; /* 28px */
p-8 padding: 2rem; /* 32px */
px-8 padding-left: 2rem; /* 32px */
padding-right: 2rem; /* 32px */
py-8 padding-top: 2rem; /* 32px */
padding-bottom: 2rem; /* 32px */
pt-8 padding-top: 2rem; /* 32px */
pr-8 padding-right: 2rem; /* 32px */
pb-8 padding-bottom: 2rem; /* 32px */
pl-8 padding-left: 2rem; /* 32px */
p-9 padding: 2.25rem; /* 36px */
px-9 padding-left: 2.25rem; /* 36px */
padding-right: 2.25rem; /* 36px */
py-9 padding-top: 2.25rem; /* 36px */
padding-bottom: 2.25rem; /* 36px */
pt-9 padding-top: 2.25rem; /* 36px */
pr-9 padding-right: 2.25rem; /* 36px */
pb-9 padding-bottom: 2.25rem; /* 36px */
pl-9 padding-left: 2.25rem; /* 36px */
p-10 padding: 2.5rem; /* 40px */
px-10 padding-left: 2.5rem; /* 40px */
padding-right: 2.5rem; /* 40px */
py-10 padding-top: 2.5rem; /* 40px */
padding-bottom: 2.5rem; /* 40px */
pt-10 padding-top: 2.5rem; /* 40px */
pr-10 padding-right: 2.5rem; /* 40px */
pb-10 padding-bottom: 2.5rem; /* 40px */
pl-10 padding-left: 2.5rem; /* 40px */
p-11 padding: 2.75rem; /* 44px */
px-11 padding-left: 2.75rem; /* 44px */
padding-right: 2.75rem; /* 44px */
py-11 padding-top: 2.75rem; /* 44px */
padding-bottom: 2.75rem; /* 44px */
pt-11 padding-top: 2.75rem; /* 44px */
pr-11 padding-right: 2.75rem; /* 44px */
pb-11 padding-bottom: 2.75rem; /* 44px */
pl-11 padding-left: 2.75rem; /* 44px */
p-12 padding: 3rem; /* 48px */
px-12 padding-left: 3rem; /* 48px */
padding-right: 3rem; /* 48px */
py-12 padding-top: 3rem; /* 48px */
padding-bottom: 3rem; /* 48px */
pt-12 padding-top: 3rem; /* 48px */
pr-12 padding-right: 3rem; /* 48px */
pb-12 padding-bottom: 3rem; /* 48px */
pl-12 padding-left: 3rem; /* 48px */
p-14 padding: 3.5rem; /* 56px */
px-14 padding-left: 3.5rem; /* 56px */
padding-right: 3.5rem; /* 56px */
py-14 padding-top: 3.5rem; /* 56px */
padding-bottom: 3.5rem; /* 56px */
pt-14 padding-top: 3.5rem; /* 56px */
pr-14 padding-right: 3.5rem; /* 56px */
pb-14 padding-bottom: 3.5rem; /* 56px */
pl-14 padding-left: 3.5rem; /* 56px */
p-16 padding: 4rem; /* 64px */
px-16 padding-left: 4rem; /* 64px */
padding-right: 4rem; /* 64px */
py-16 padding-top: 4rem; /* 64px */
padding-bottom: 4rem; /* 64px */
pt-16 padding-top: 4rem; /* 64px */
pr-16 padding-right: 4rem; /* 64px */
pb-16 padding-bottom: 4rem; /* 64px */
pl-16 padding-left: 4rem; /* 64px */
p-20 padding: 5rem; /* 80px */
px-20 padding-left: 5rem; /* 80px */
padding-right: 5rem; /* 80px */
py-20 padding-top: 5rem; /* 80px */
padding-bottom: 5rem; /* 80px */
pt-20 padding-top: 5rem; /* 80px */
pr-20 padding-right: 5rem; /* 80px */
pb-20 padding-bottom: 5rem; /* 80px */
pl-20 padding-left: 5rem; /* 80px */
p-24 padding: 6rem; /* 96px */
px-24 padding-left: 6rem; /* 96px */
padding-right: 6rem; /* 96px */
py-24 padding-top: 6rem; /* 96px */
padding-bottom: 6rem; /* 96px */
pt-24 padding-top: 6rem; /* 96px */
pr-24 padding-right: 6rem; /* 96px */
pb-24 padding-bottom: 6rem; /* 96px */
pl-24 padding-left: 6rem; /* 96px */
p-28 padding: 7rem; /* 112px */
px-28 padding-left: 7rem; /* 112px */
padding-right: 7rem; /* 112px */
py-28 padding-top: 7rem; /* 112px */
padding-bottom: 7rem; /* 112px */
pt-28 padding-top: 7rem; /* 112px */
pr-28 padding-right: 7rem; /* 112px */
pb-28 padding-bottom: 7rem; /* 112px */
pl-28 padding-left: 7rem; /* 112px */
p-32 padding: 8rem; /* 128px */
px-32 padding-left: 8rem; /* 128px */
padding-right: 8rem; /* 128px */
py-32 padding-top: 8rem; /* 128px */
padding-bottom: 8rem; /* 128px */
pt-32 padding-top: 8rem; /* 128px */
pr-32 padding-right: 8rem; /* 128px */
pb-32 padding-bottom: 8rem; /* 128px */
pl-32 padding-left: 8rem; /* 128px */
p-36 padding: 9rem; /* 144px */
px-36 padding-left: 9rem; /* 144px */
padding-right: 9rem; /* 144px */
py-36 padding-top: 9rem; /* 144px */
padding-bottom: 9rem; /* 144px */
pt-36 padding-top: 9rem; /* 144px */
pr-36 padding-right: 9rem; /* 144px */
pb-36 padding-bottom: 9rem; /* 144px */
pl-36 padding-left: 9rem; /* 144px */
p-40 padding: 10rem; /* 160px */
px-40 padding-left: 10rem; /* 160px */
padding-right: 10rem; /* 160px */
py-40 padding-top: 10rem; /* 160px */
padding-bottom: 10rem; /* 160px */
pt-40 padding-top: 10rem; /* 160px */
pr-40 padding-right: 10rem; /* 160px */
pb-40 padding-bottom: 10rem; /* 160px */
pl-40 padding-left: 10rem; /* 160px */
p-44 padding: 11rem; /* 176px */
px-44 padding-left: 11rem; /* 176px */
padding-right: 11rem; /* 176px */
py-44 padding-top: 11rem; /* 176px */
padding-bottom: 11rem; /* 176px */
pt-44 padding-top: 11rem; /* 176px */
pr-44 padding-right: 11rem; /* 176px */
pb-44 padding-bottom: 11rem; /* 176px */
pl-44 padding-left: 11rem; /* 176px */
p-48 padding: 12rem; /* 192px */
px-48 padding-left: 12rem; /* 192px */
padding-right: 12rem; /* 192px */
py-48 padding-top: 12rem; /* 192px */
padding-bottom: 12rem; /* 192px */
pt-48 padding-top: 12rem; /* 192px */
pr-48 padding-right: 12rem; /* 192px */
pb-48 padding-bottom: 12rem; /* 192px */
pl-48 padding-left: 12rem; /* 192px */
p-52 padding: 13rem; /* 208px */
px-52 padding-left: 13rem; /* 208px */
padding-right: 13rem; /* 208px */
py-52 padding-top: 13rem; /* 208px */
padding-bottom: 13rem; /* 208px */
pt-52 padding-top: 13rem; /* 208px */
pr-52 padding-right: 13rem; /* 208px */
pb-52 padding-bottom: 13rem; /* 208px */
pl-52 padding-left: 13rem; /* 208px */
p-56 padding: 14rem; /* 224px */
px-56 padding-left: 14rem; /* 224px */
padding-right: 14rem; /* 224px */
py-56 padding-top: 14rem; /* 224px */
padding-bottom: 14rem; /* 224px */
pt-56 padding-top: 14rem; /* 224px */
pr-56 padding-right: 14rem; /* 224px */
pb-56 padding-bottom: 14rem; /* 224px */
pl-56 padding-left: 14rem; /* 224px */
p-60 padding: 15rem; /* 240px */
px-60 padding-left: 15rem; /* 240px */
padding-right: 15rem; /* 240px */
py-60 padding-top: 15rem; /* 240px */
padding-bottom: 15rem; /* 240px */
pt-60 padding-top: 15rem; /* 240px */
pr-60 padding-right: 15rem; /* 240px */
pb-60 padding-bottom: 15rem; /* 240px */
pl-60 padding-left: 15rem; /* 240px */
p-64 padding: 16rem; /* 256px */
px-64 padding-left: 16rem; /* 256px */
padding-right: 16rem; /* 256px */
py-64 padding-top: 16rem; /* 256px */
padding-bottom: 16rem; /* 256px */
pt-64 padding-top: 16rem; /* 256px */
pr-64 padding-right: 16rem; /* 256px */
pb-64 padding-bottom: 16rem; /* 256px */
pl-64 padding-left: 16rem; /* 256px */
p-72 padding: 18rem; /* 288px */
px-72 padding-left: 18rem; /* 288px */
padding-right: 18rem; /* 288px */
py-72 padding-top: 18rem; /* 288px */
padding-bottom: 18rem; /* 288px */
pt-72 padding-top: 18rem; /* 288px */
pr-72 padding-right: 18rem; /* 288px */
pb-72 padding-bottom: 18rem; /* 288px */
pl-72 padding-left: 18rem; /* 288px */
p-80 padding: 20rem; /* 320px */
px-80 padding-left: 20rem; /* 320px */
padding-right: 20rem; /* 320px */
py-80 padding-top: 20rem; /* 320px */
padding-bottom: 20rem; /* 320px */
pt-80 padding-top: 20rem; /* 320px */
pr-80 padding-right: 20rem; /* 320px */
pb-80 padding-bottom: 20rem; /* 320px */
pl-80 padding-left: 20rem; /* 320px */
p-96 padding: 24rem; /* 384px */
px-96 padding-left: 24rem; /* 384px */
padding-right: 24rem; /* 384px */
py-96 padding-top: 24rem; /* 384px */
padding-bottom: 24rem; /* 384px */
pt-96 padding-top: 24rem; /* 384px */
pr-96 padding-right: 24rem; /* 384px */
pb-96 padding-bottom: 24rem; /* 384px */
pl-96 padding-left: 24rem; /* 384px */
-->
<!-- Space Between X/Y
space-x-0 > * + * margin-left: 0px;
space-y-0 > * + * margin-top: 0px;
space-x-0.5 > * + * margin-left: 0.125rem; /* 2px */
space-y-0.5 > * + * margin-top: 0.125rem; /* 2px */
space-x-1 > * + * margin-left: 0.25rem; /* 4px */
space-y-1 > * + * margin-top: 0.25rem; /* 4px */
space-x-1.5 > * + * margin-left: 0.375rem; /* 6px */
space-y-1.5 > * + * margin-top: 0.375rem; /* 6px */
space-x-2 > * + * margin-left: 0.5rem; /* 8px */
space-y-2 > * + * margin-top: 0.5rem; /* 8px */
space-x-2.5 > * + * margin-left: 0.625rem; /* 10px */
space-y-2.5 > * + * margin-top: 0.625rem; /* 10px */
space-x-3 > * + * margin-left: 0.75rem; /* 12px */
space-y-3 > * + * margin-top: 0.75rem; /* 12px */
space-x-3.5 > * + * margin-left: 0.875rem; /* 14px */
space-y-3.5 > * + * margin-top: 0.875rem; /* 14px */
space-x-4 > * + * margin-left: 1rem; /* 16px */
space-y-4 > * + * margin-top: 1rem; /* 16px */
space-x-5 > * + * margin-left: 1.25rem; /* 20px */
space-y-5 > * + * margin-top: 1.25rem; /* 20px */
space-x-6 > * + * margin-left: 1.5rem; /* 24px */
space-y-6 > * + * margin-top: 1.5rem; /* 24px */
space-x-7 > * + * margin-left: 1.75rem; /* 28px */
space-y-7 > * + * margin-top: 1.75rem; /* 28px */
space-x-8 > * + * margin-left: 2rem; /* 32px */
space-y-8 > * + * margin-top: 2rem; /* 32px */
space-x-9 > * + * margin-left: 2.25rem; /* 36px */
space-y-9 > * + * margin-top: 2.25rem; /* 36px */
space-x-10 > * + * margin-left: 2.5rem; /* 40px */
space-y-10 > * + * margin-top: 2.5rem; /* 40px */
space-x-11 > * + * margin-left: 2.75rem; /* 44px */
space-y-11 > * + * margin-top: 2.75rem; /* 44px */
space-x-12 > * + * margin-left: 3rem; /* 48px */
space-y-12 > * + * margin-top: 3rem; /* 48px */
space-x-14 > * + * margin-left: 3.5rem; /* 56px */
space-y-14 > * + * margin-top: 3.5rem; /* 56px */
space-x-16 > * + * margin-left: 4rem; /* 64px */
space-y-16 > * + * margin-top: 4rem; /* 64px */
space-x-20 > * + * margin-left: 5rem; /* 80px */
space-y-20 > * + * margin-top: 5rem; /* 80px */
space-x-24 > * + * margin-left: 6rem; /* 96px */
space-y-24 > * + * margin-top: 6rem; /* 96px */
space-x-28 > * + * margin-left: 7rem; /* 112px */
space-y-28 > * + * margin-top: 7rem; /* 112px */
space-x-32 > * + * margin-left: 8rem; /* 128px */
space-y-32 > * + * margin-top: 8rem; /* 128px */
space-x-36 > * + * margin-left: 9rem; /* 144px */
space-y-36 > * + * margin-top: 9rem; /* 144px */
space-x-40 > * + * margin-left: 10rem; /* 160px */
space-y-40 > * + * margin-top: 10rem; /* 160px */
space-x-44 > * + * margin-left: 11rem; /* 176px */
space-y-44 > * + * margin-top: 11rem; /* 176px */
space-x-48 > * + * margin-left: 12rem; /* 192px */
space-y-48 > * + * margin-top: 12rem; /* 192px */
space-x-52 > * + * margin-left: 13rem; /* 208px */
space-y-52 > * + * margin-top: 13rem; /* 208px */
space-x-56 > * + * margin-left: 14rem; /* 224px */
space-y-56 > * + * margin-top: 14rem; /* 224px */
space-x-60 > * + * margin-left: 15rem; /* 240px */
space-y-60 > * + * margin-top: 15rem; /* 240px */
space-x-64 > * + * margin-left: 16rem; /* 256px */
space-y-64 > * + * margin-top: 16rem; /* 256px */
space-x-72 > * + * margin-left: 18rem; /* 288px */
space-y-72 > * + * margin-top: 18rem; /* 288px */
space-x-80 > * + * margin-left: 20rem; /* 320px */
space-y-80 > * + * margin-top: 20rem; /* 320px */
space-x-96 > * + * margin-left: 24rem; /* 384px */
space-y-96 > * + * margin-top: 24rem; /* 384px */
space-x-px > * + * margin-left: 1px;
space-y-px > * + * margin-top: 1px;
space-y-reverse > * + * --tw-space-y-reverse: 1;
space-x-reverse > * + * --tw-space-x-reverse: 1;
-->
3.Typgraphy
폰트 패밀리 설정:
- Tailwind에서는 기본적으로 font-sans, font-serif, font-mono와 같은 클래스를 사용해 글꼴 스타일을 적용할 수 있습니다.
- 커스텀 폰트를 사용하려면 Tailwind 설정 파일에서 이를 추가할 수 있습니다. tailwind.config.js 파일을 사용하거나, CDN 환경에서 JavaScript로 설정을 적용할 수도 있습니다.
폰트 크기 설정:
- text-xs (extra small)부터 text-9xl (extra large)까지 다양한 크기를 지원합니다.
- 예를 들어, text-3xl은 매우 큰 폰트 크기를 나타냅니다.
폰트 굵기 설정:
- font-normal (기본), font-medium, font-semibold, font-bold 등의 클래스를 사용해 폰트 굵기를 조절할 수 있습니다.
문자 간격 (Letter Spacing) 설정:
- tracking-tight (좁은 간격), tracking-normal, tracking-wide (넓은 간격) 등의 클래스를 사용할 수 있습니다.
텍스트 정렬:
- text-left, text-right, text-center 등의 클래스를 통해 텍스트를 좌, 우, 중앙 정렬할 수 있습니다.
텍스트 장식 (Text Decoration):
- underline 클래스를 사용해 밑줄을 추가할 수 있습니다. 밑줄의 굵기(decoration-4)와 색상(text-blue-400)도 조절 가능합니다.
- 밑줄 모양을 decoration-double, decoration-dotted, decoration-dashed, decoration-wavy로 변경할 수 있습니다.
- underline-offset 클래스를 사용해 밑줄을 텍스트에서 더 멀리 떨어뜨릴 수 있습니다.
텍스트 변환 (Text Transform):
- uppercase, lowercase, capitalize 등을 사용해 텍스트의 대소문자 형태를 변경할 수 있습니다.
<!-- Font Family -->
<p class="font-sans">Tailwind is awesome</p>
<p class="font-serif">Tailwind is awesome</p>
<p class="font-mono">Tailwind is awesome</p>
<!-- Font Size -->
<p class="text-xs">Tailwind is awesome</p>
<p class="text-sm">Tailwind is awesome</p>
<p class="text-base">Tailwind is awesome</p>
<p class="text-lg">Tailwind is awesome</p>
<p class="text-xl">Tailwind is awesome</p>
<p class="text-2xl">Tailwind is awesome</p>
<p class="text-3xl">Tailwind is awesome</p>
<p class="text-4xl">Tailwind is awesome</p>
<p class="text-5xl">Tailwind is awesome</p>
<p class="text-6xl">Tailwind is awesome</p>
<p class="text-7xl">Tailwind is awesome</p>
<p class="text-8xl">Tailwind is awesome</p>
<p class="text-9xl">Tailwind is awesome</p>
<!-- Font Weight -->
<p class="font-light">Tailwind is awesome</p>
<p class="font-normal">Tailwind is awesome</p>
<p class="font-medium">Tailwind is awesome</p>
<p class="font-semibold">Tailwind is awesome</p>
<p class="font-bold">Tailwind is awesome</p>
<!-- Letter Spacing -->
<p class="tracking-tight">Tailwind is awesome</p>
<p class="tracking-normal">Tailwind is awesome</p>
<p class="tracking-wide">Tailwind is awesome</p>
<!-- Text Alignment -->
<p class="text-left">Tailwind is awesome</p>
<p class="text-center">Tailwind is awesome</p>
<p class="text-right">Tailwind is awesome</p>
<!-- Text Decoration -->
<p class="underline decoration-4">Tailwind is awesome</p>
<p class="line-through">Tailwind is awesome</p>
<p class="overline">Tailwind is awesome</p>
<p class="no-underline">Tailwind is awesome</p>
<!-- Decoration Style -->
<p class="underline decoration-solid">Tailwind is awesome</p>
<p class="underline decoration-double">Tailwind is awesome</p>
<p class="underline decoration-dotted">Tailwind is awesome</p>
<p class="underline decoration-dashed">Tailwind is awesome</p>
<p class="underline decoration-wavy">Tailwind is awesome</p>
<!-- Decoration Offset -->
<p class="underline underline-offset-1">Tailwind is awesome</p>
<p class="underline underline-offset-2">Tailwind is awesome</p>
<p class="underline underline-offset-4">Tailwind is awesome</p>
<p class="underline underline-offset-8">Tailwind is awesome</p>
<!-- Text Transform -->
<p class="normal-case">Tailwind is awesome</p>
<p class="uppercase">Tailwind is awesome</p>
<p class="lowercase">Tailwind is awesome</p>
<p class="capitalize">Tailwind is awesome</p>
<!-- Font Family font-sans font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-serif font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; font-mono font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --> <!-- Font Size text-xs font-size: 0.75rem; /* 12px */ text-sm font-size: 0.875rem; /* 14px */ text-base font-size: 1rem; /* 16px */ text-lg font-size: 1.125rem; /* 18px */ text-xl font-size: 1.25rem; /* 20px */ text-2xl font-size: 1.5rem; /* 24px */ text-3xl font-size: 1.875rem; /* 30px */ text-4xl font-size: 2.25rem; /* 36px */ text-5xl font-size: 3rem; /* 48px */ text-6xl font-size: 3.75rem; /* 60px */ text-7xl font-size: 4.5rem; /* 72px */ text-8xl font-size: 6rem; /* 96px */ text-9xl font-size: 8rem; /* 128px */ --> <!-- Font Weight font-thin font-weight: 100; font-extralight font-weight: 200; font-light font-weight: 300; font-normal font-weight: 400; font-medium font-weight: 500; font-semibold font-weight: 600; font-bold font-weight: 700; font-extrabold font-weight: 800; font-black font-weight: 900; --> <!-- Letter Spacing tracking-tighter letter-spacing: -0.05em; tracking-tight letter-spacing: -0.025em; tracking-normal letter-spacing: 0em; tracking-wide letter-spacing: 0.025em; tracking-wider letter-spacing: 0.05em; tracking-widest letter-spacing: 0.1em; --> <!-- Text Alignment text-left text-align: left; text-center text-align: center; text-right text-align: right; text-justify text-align: justify; -->
4.Width & Height
너비(Width) 설정:
- Tailwind에서는 너비를 설정하기 위해 w-0부터 w-96까지 다양한 크기 옵션을 제공합니다. 각 값은 REM 단위로 적용됩니다. 예를 들어, w-12는 3REM(48px)입니다.
- 퍼센트 단위로도 설정할 수 있습니다. 예를 들어, w-1/4는 컨테이너의 25%, w-1/2는 50%를 의미합니다.
- 전체 화면 너비를 사용하고 싶다면 w-screen을 사용하여 뷰포트의 100% 너비를 설정할 수 있습니다. 또는 w-full로 컨테이너의 100% 너비를 설정할 수 있습니다.
- 임의의 값을 설정할 때는 w-[300px]과 같이 대괄호 안에 픽셀, 퍼센트 등 원하는 단위를 입력할 수 있습니다.
최대 너비(Max Width) 설정:
- max-w-sm, max-w-lg, max-w-xl 등의 클래스를 사용해 최대 너비를 설정할 수 있습니다. 예를 들어, max-w-sm은 24REM(384px)입니다.
- 중간 정렬을 원할 경우, mx-auto를 사용하여 가로 축에서 자동으로 가운데 배치할 수 있습니다.
높이(Height) 설정:
- 높이 설정도 h-24, h-32, h-64 등 다양한 값을 제공합니다.
- 전체 화면 높이를 사용하려면 h-screen을 사용하여 뷰포트의 100% 높이를 설정할 수 있습니다. 이는 주로 페이지의 히어로 영역에 많이 사용됩니다.
Flexbox를 이용한 정렬:
- Flexbox를 사용해 아이템을 행(row)으로 정렬하고 높이를 다양하게 설정할 수 있습니다. flex와 items-end 등의 클래스를 사용해 아이템을 하단에 정렬할 수 있습니다.
이 외에도 Tailwind CSS의 크기 관련 설정은 다양한 옵션을 제공하여 레이아웃을 쉽게 커스터마이징할 수 있습니다.
<!-- Width -->
<div class="bg-black text-white my-2 w-0">w-0</div>
<div class="bg-black text-white my-2 w-1">w-1</div>
<div class="bg-black text-white my-2 w-1.5">w-1.5</div>
<div class="bg-black text-white my-2 w-2">w-2</div>
<div class="bg-black text-white my-2 w-3">w-3</div>
<div class="bg-black text-white my-2 w-5">w-5</div>
<div class="bg-black text-white my-2 w-6">w-6</div>
<div class="bg-black text-white my-2 w-7">w-7</div>
<div class="bg-black text-white my-2 w-8">w-8</div>
<div class="bg-black text-white my-2 w-9">w-9</div>
<div class="bg-black text-white my-2 w-10">w-10</div>
<div class="bg-black text-white my-2 w-11">w-11</div>
<div class="bg-black text-white my-2 w-12">w-12</div>
<!-- By 2 -->
<div class="bg-black text-white my-2 w-14">w-14</div>
<div class="bg-black text-white my-2 w-16">w-16</div>
<!-- By 4 -->
<div class="bg-black text-white my-2 w-20">w-20</div>
<div class="bg-black text-white my-2 w-24">w-24</div>
<div class="bg-black text-white my-2 w-28">w-28</div>
<div class="bg-black text-white my-2 w-32">w-32</div>
<div>...</div>
<div class="bg-black text-white my-2 w-36">w-36</div>
<!-- By 8 -->
<div class="bg-black text-white my-2 w-64">w-64</div>
<!-- By 16 -->
<div class="bg-black text-white my-2 w-80">w-80</div>
<div class="bg-black text-white my-2 w-96">w-96</div>
<div class="bg-black text-white my-2 w-auto">Auto</div>
<!-- Percentages -->
<div class="bg-green-500 text-white my-2 w-1/2">w-1/2</div>
<div class="bg-green-500 text-white my-2 w-1/3">w-1/3</div>
<div class="bg-green-500 text-white my-2 w-2/3">w-2/3</div>
<div class="bg-green-500 text-white my-2 w-1/4">w-1/4</div>
<div class="bg-green-500 text-white my-2 w-2/4">w-2/4</div>
<div class="bg-green-500 text-white my-2 w-3/4">w-3/4</div>
<div class="bg-green-500 text-white my-2 w-1/5">w-1/5</div>
<!-- Width of the viewport -->
<div class="bg-purple-500 text-white my-2 w-screen">w-screen</div>
<!-- 100% of container -->
<div class="bg-zinc-500 text-white my-2 w-full">w-full</div>
<!-- min/max content -->
<div class="bg-emerald-500 text-white my-2 w-min">w-min</div>
<div class="bg-emerald-500 text-white my-2 w-max">w-max</div>
<!-- Arbitrary Width -->
<div class="bg-red-500 text-white my-2 w-[300px]">300px</div>
<!-- Max Width -->
<div class="bg-gray-100 max-w-lg mx-auto">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum
perferendis incidunt nihil ullam repellendus praesentium consectetur et
sed distinctio, magni iusto quos repellat officiis cum dolore aliquid
minus esse pariatur.
</div>
<!-- Height (Most of the same options as widths) -->
<div class="flex items-end">
<div class="bg-orange-500 w-20 h-24">h-24</div>
<div class="bg-orange-500 w-20 h-32">h-32</div>
<div class="bg-orange-500 w-20 h-40">h-40</div>
<div class="bg-orange-500 w-20 h-48">h-48</div>
<div class="bg-orange-500 w-20 h-64">h-64</div>
<div class="bg-orange-500 w-20 h-80">h-80</div>
</div>
<!-- Min Height -->
<div class="h-48 bg-red-200">
<div class="h-24 bg-red-600 min-h-full">Tailwind is awesome</div>
</div>
<!-- Max Height -->
<div class="h-24 bg-orange-200">
<div class="h-48 bg-orange-500 max-h-full">Tailwind is awesome</div>
</div>
<!-- Full screen height -->
<div class="h-screen bg-blue-300">Hello</div>
</body>
</html>
<!--
Width Sizes
w-0 width: 0px;
w-px width: 1px;
w-0.5 width: 0.125rem; /* 2px */
w-1 width: 0.25rem; /* 4px */
w-1.5 width: 0.375rem; /* 6px */
w-2 width: 0.5rem; /* 8px */
w-2.5 width: 0.625rem; /* 10px */
w-3 width: 0.75rem; /* 12px */
w-3.5 width: 0.875rem; /* 14px */
w-4 width: 1rem; /* 16px */
w-5 width: 1.25rem; /* 20px */
w-6 width: 1.5rem; /* 24px */
w-7 width: 1.75rem; /* 28px */
w-8 width: 2rem; /* 32px */
w-9 width: 2.25rem; /* 36px */
w-10 width: 2.5rem; /* 40px */
w-11 width: 2.75rem; /* 44px */
w-12 width: 3rem; /* 48px */
w-14 width: 3.5rem; /* 56px */
w-16 width: 4rem; /* 64px */
w-20 width: 5rem; /* 80px */
w-24 width: 6rem; /* 96px */
w-28 width: 7rem; /* 112px */
w-32 width: 8rem; /* 128px */
w-36 width: 9rem; /* 144px */
w-40 width: 10rem; /* 160px */
w-44 width: 11rem; /* 176px */
w-48 width: 12rem; /* 192px */
w-52 width: 13rem; /* 208px */
w-56 width: 14rem; /* 224px */
w-60 width: 15rem; /* 240px */
w-64 width: 16rem; /* 256px */
w-72 width: 18rem; /* 288px */
w-80 width: 20rem; /* 320px */
w-96 width: 24rem; /* 384px */
w-auto width: auto;
w-1/2 width: 50%;
w-1/3 width: 33.333333%;
w-2/3 width: 66.666667%;
w-1/4 width: 25%;
w-2/4 width: 50%;
w-3/4 width: 75%;
w-1/5 width: 20%;
w-2/5 width: 40%;
w-3/5 width: 60%;
w-4/5 width: 80%;
w-1/6 width: 16.666667%;
w-2/6 width: 33.333333%;
w-3/6 width: 50%;
w-4/6 width: 66.666667%;
w-5/6 width: 83.333333%;
w-1/12 width: 8.333333%;
w-2/12 width: 16.666667%;
w-3/12 width: 25%;
w-4/12 width: 33.333333%;
w-5/12 width: 41.666667%;
w-6/12 width: 50%;
w-7/12 width: 58.333333%;
w-8/12 width: 66.666667%;
w-9/12 width: 75%;
w-10/12 width: 83.333333%;
w-11/12 width: 91.666667%;
w-full width: 100%;
w-screen width: 100vw;
w-min width: min-content;
w-max width: max-content;
w-fit width: fit-content; -->
<!--
Min Width Sizes
min-w-0 min-width: 0px;
min-w-full min-width: 100%;
min-w-min min-width: min-content;
min-w-max min-width: max-content;
min-w-fit min-width: fit-content;
-->
<!--
Max Width Sizes
max-w-0 max-width: 0rem; /* 0px */
max-w-none max-width: none;
max-w-xs max-width: 20rem; /* 320px */
max-w-sm max-width: 24rem; /* 384px */
max-w-md max-width: 28rem; /* 448px */
max-w-lg max-width: 32rem; /* 512px */
max-w-xl max-width: 36rem; /* 576px */
max-w-2xl max-width: 42rem; /* 672px */
max-w-3xl max-width: 48rem; /* 768px */
max-w-4xl max-width: 56rem; /* 896px */
max-w-5xl max-width: 64rem; /* 1024px */
max-w-6xl max-width: 72rem; /* 1152px */
max-w-7xl max-width: 80rem; /* 1280px */
max-w-full max-width: 100%;
max-w-min max-width: min-content;
max-w-max max-width: max-content;
max-w-fit max-width: fit-content;
max-w-prose max-width: 65ch;
max-w-screen-sm max-width: 640px;
max-w-screen-md max-width: 768px;
max-w-screen-lg max-width: 1024px;
max-w-screen-xl max-width: 1280px;
max-w-screen-2xl max-width: 1536px;
-->
<!--
Height Sizes
h-0 height: 0px;
h-px height: 1px;
h-0.5 height: 0.125rem; /* 2px */
h-1 height: 0.25rem; /* 4px */
h-1.5 height: 0.375rem; /* 6px */
h-2 height: 0.5rem; /* 8px */
h-2.5 height: 0.625rem; /* 10px */
h-3 height: 0.75rem; /* 12px */
h-3.5 height: 0.875rem; /* 14px */
h-4 height: 1rem; /* 16px */
h-5 height: 1.25rem; /* 20px */
h-6 height: 1.5rem; /* 24px */
h-7 height: 1.75rem; /* 28px */
h-8 height: 2rem; /* 32px */
h-9 height: 2.25rem; /* 36px */
h-10 height: 2.5rem; /* 40px */
h-11 height: 2.75rem; /* 44px */
h-12 height: 3rem; /* 48px */
h-14 height: 3.5rem; /* 56px */
h-16 height: 4rem; /* 64px */
h-20 height: 5rem; /* 80px */
h-24 height: 6rem; /* 96px */
h-28 height: 7rem; /* 112px */
h-32 height: 8rem; /* 128px */
h-36 height: 9rem; /* 144px */
h-40 height: 10rem; /* 160px */
h-44 height: 11rem; /* 176px */
h-48 height: 12rem; /* 192px */
h-52 height: 13rem; /* 208px */
h-56 height: 14rem; /* 224px */
h-60 height: 15rem; /* 240px */
h-64 height: 16rem; /* 256px */
h-72 height: 18rem; /* 288px */
h-80 height: 20rem; /* 320px */
h-96 height: 24rem; /* 384px */
h-auto height: auto;
h-1/2 height: 50%;
h-1/3 height: 33.333333%;
h-2/3 height: 66.666667%;
h-1/4 height: 25%;
h-2/4 height: 50%;
h-3/4 height: 75%;
h-1/5 height: 20%;
h-2/5 height: 40%;
h-3/5 height: 60%;
h-4/5 height: 80%;
h-1/6 height: 16.666667%;
h-2/6 height: 33.333333%;
h-3/6 height: 50%;
h-4/6 height: 66.666667%;
h-5/6 height: 83.333333%;
h-full height: 100%;
h-screen height: 100vh;
h-min height: min-content;
h-max height: max-content;
h-fit height: fit-content;
-->
<!--
Min Height Sizes
min-h-0 min-height: 0px;
min-h-full min-height: 100%;
min-h-screen min-height: 100vh;
min-h-min min-height: min-content;
min-h-max min-height: max-content;
min-h-fit min-height: fit-content;
-->
<!--
Max Height Sizes
max-h-0 max-height: 0px;
max-h-px max-height: 1px;
max-h-0.5 max-height: 0.125rem; /* 2px */
max-h-1 max-height: 0.25rem; /* 4px */
max-h-1.5 max-height: 0.375rem; /* 6px */
max-h-2 max-height: 0.5rem; /* 8px */
max-h-2.5 max-height: 0.625rem; /* 10px */
max-h-3 max-height: 0.75rem; /* 12px */
max-h-3.5 max-height: 0.875rem; /* 14px */
max-h-4 max-height: 1rem; /* 16px */
max-h-5 max-height: 1.25rem; /* 20px */
max-h-6 max-height: 1.5rem; /* 24px */
max-h-7 max-height: 1.75rem; /* 28px */
max-h-8 max-height: 2rem; /* 32px */
max-h-9 max-height: 2.25rem; /* 36px */
max-h-10 max-height: 2.5rem; /* 40px */
max-h-11 max-height: 2.75rem; /* 44px */
max-h-12 max-height: 3rem; /* 48px */
max-h-14 max-height: 3.5rem; /* 56px */
max-h-16 max-height: 4rem; /* 64px */
max-h-20 max-height: 5rem; /* 80px */
max-h-24 max-height: 6rem; /* 96px */
max-h-28 max-height: 7rem; /* 112px */
max-h-32 max-height: 8rem; /* 128px */
max-h-36 max-height: 9rem; /* 144px */
max-h-40 max-height: 10rem; /* 160px */
max-h-44 max-height: 11rem; /* 176px */
max-h-48 max-height: 12rem; /* 192px */
max-h-52 max-height: 13rem; /* 208px */
max-h-56 max-height: 14rem; /* 224px */
max-h-60 max-height: 15rem; /* 240px */
max-h-64 max-height: 16rem; /* 256px */
max-h-72 max-height: 18rem; /* 288px */
max-h-80 max-height: 20rem; /* 320px */
max-h-96 max-height: 24rem; /* 384px */
max-h-full max-height: 100%;
max-h-screen max-height: 100vh;
max-h-min max-height: min-content;
max-h-max max-height: max-content;
max-h-fit max-height: fit-content;
-->
5.layout& Position
1. 위치 지정(Positioning)
- 상대적 위치(Relative Positioning): 요소의 위치를 기준으로 다른 요소들이 배치됩니다.
- 절대적 위치(Absolute Positioning): 부모 요소를 기준으로 위치를 지정할 수 있습니다. 예를 들어, 부모 요소를 상대적으로 설정한 후 자식 요소를 절대적으로 설정하면, 해당 자식 요소는 부모 내에서 자유롭게 위치를 지정할 수 있습니다.
예제:
- 부모 요소에 상대적 위치를 설정(relative)하고, 자식 요소에 절대적 위치를 설정(absolute)하여 다양한 위치(좌상단, 우상단, 좌하단 등)로 배치할 수 있습니다.
- 요소를 전체 상단, 하단, 좌측, 우측으로 확장하는 방법도 설명합니다. 예를 들어, inset-x-0 또는 inset-y-0 클래스를 사용하여 수평 또는 수직으로 요소를 확장할 수 있습니다.
2. 디스플레이 클래스(Display Classes)
- 블록(Block): 요소가 다른 요소들과 라인 브레이크를 가지며 배치됩니다.
- 인라인(Inline): 요소가 라인 내에서 다른 요소들과 함께 배치됩니다.
- 인라인 블록(Inline-Block): 인라인처럼 배치되지만, 블록처럼 크기를 조절할 수 있습니다.
- 숨김(Hidden): display: none을 설정하여 요소를 숨깁니다.
3. Z-Index (Z-축 배치)
- z-index를 사용하여 요소들의 쌓임 순서를 지정합니다. 값이 높을수록 화면에 더 가깝게 배치됩니다. 예를 들어, z-40 클래스를 사용하면 다른 요소들보다 위에 배치됩니다.
4. 플로팅(Floating)
- 이미지나 콘텐츠를 왼쪽(float-left) 또는 오른쪽(float-right)으로 플로팅할 수 있습니다. 이는 주로 기사나 블로그에서 이미지와 텍스트를 함께 배치할 때 사용됩니다.
<!DOCTYPE html>
<html lang="en">
<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>TailwindCSS</title>
</head>
<body>
<!-- Positioning -->
<div class="relative w-1/2 h-12 bg-red-200">
<p>Relative parent</p>
<div class="absolute bottom-0 right-0 bg-red-500">
<p>Absolute child</p>
</div>
</div>
<!-- Top left corner -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute left-0 top-0 h-16 w-16 bg-yellow-300">01</div>
</div>
<!-- Top right corner -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute top-0 right-0 h-16 w-16 bg-yellow-300">03</div>
</div>
<!-- Bottom left corner -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute bottom-0 left-0 h-16 w-16 bg-yellow-300">07</div>
</div>
<!-- Bottom right corner -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute bottom-0 right-0 h-16 w-16 bg-yellow-300">09</div>
</div>
<!-- Span top edge -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute inset-x-0 top-0 h-16 bg-yellow-300">02</div>
</div>
<!-- Span left edge -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute inset-y-0 left-0 w-16 bg-yellow-300">04</div>
</div>
<!-- Span right edge -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute inset-y-0 right-0 w-16 bg-yellow-300">06</div>
</div>
<!-- Span bottom edge -->
<div class="relative h-32 w-32 bg-yellow-100">
<div class="absolute inset-x-0 bottom-0 h-16 bg-yellow-300">08</div>
</div>
<!-- Display Classes -->
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
<span class="inline">This is display inline and will wrap normally</span
>sapiente ut rerum esse ullam provident, fugit
<span class="inline-block"
>This is display inline-block and will not extend beyond it's
parent</span
>eos quam
<span class="block"
>This is display block and will move to it's own line</span
>
reprehenderit est hic aut unde sequi, officia, ipsa amet doloribus
ratione<span class="hidden"
>This is display none and will not display at all</span
>
ad.
</div>
<!-- Z-Index -->
<div class="relative h-36">
<div class="absolute left-10 w-24 h-24 bg-blue-200 z-40">1</div>
<div class="absolute left-20 w-24 h-24 bg-blue-300">2</div>
<div class="absolute left-40 w-24 h-24 bg-blue-400 z-10">3</div>
<div class="absolute left-60 w-24 h-24 bg-blue-500 z-20">4</div>
<div class="absolute left-80 w-24 h-24 bg-blue-600">5</div>
</div>
<!-- Floats -->
<div class="w-1/2">
<img class="h-48 w-48 float-right" src="/assets/img/img1.jpg" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere numquam
voluptatem accusantium atque cupiditate nulla ratione saepe veniam, ex
iure nisi mollitia sed rerum veritatis temporibus iusto! Molestiae,
ratione doloribus?
</p>
</div>
</body>
</html>
<!-- Position Classes
static position: static;
fixed position: fixed;
absolute position: absolute;
relative position: relative;
sticky position: sticky;
-->
<!-- Display Classes
block display: block;
inline-block display: inline-block;
inline display: inline;
flex display: flex;
inline-flex display: inline-flex;
table display: table;
grid display: grid;
inline-grid display: inline-grid;
contents display: contents;
list-item display: list-item;
hidden display: none;
-->
<!-- Z-Index
z-0 z-index: 0;
z-10 z-index: 10;
z-20 z-index: 20;
z-30 z-index: 30;
z-40 z-index: 40;
z-50 z-index: 50;
z-auto z-index: auto;
-->
<!-- Float
float-right float: right;
float-left float: left;
float-none float: none;
-->
6.배경색 및 그림자 효과
배경 이미지 설정
먼저, 배경 이미지를 로드해보겠습니다. 다음과 같이 div 태그를 만들고, style 속성으로 배경 이미지를 설정합니다:
<div style="background-image: url('../assets/image/image1.jpg');"></div>
이 상태로 저장하면 아무것도 보이지 않는데, 이는 div에 내용이 없기 때문입니다. 따라서 div에 너비와 높이를 설정해줍니다:
<div style="background-image: url('../assets/image/image1.jpg');" class="h-64 w-72"></div>
이미지의 반복을 방지하려면 BG-no-repeat 클래스를 추가해줍니다. 그다음 배경 크기를 설정하기 위해 BG-cover 클래스를 추가할 수 있고, 배경을 가운데로 정렬하려면 BG-center 클래스를 사용할 수 있습니다.
그라디언트 설정
Tailwind CSS로 그라디언트를 쉽게 추가할 수 있습니다. 예를 들어, 오른쪽 방향으로 그라디언트를 설정하려면 다음과 같이 작성합니다:
<div class="h-24 bg-gradient-to-r from-cyan-500 to-blue-500"></div>
이 코드는 사이안에서 블루로 변하는 그라디언트를 설정합니다. 방향을 왼쪽으로 바꾸려면 to-l로 변경하면 됩니다.
그림자 설정
다양한 크기의 그림자를 Tailwind에서 간단히 설정할 수 있습니다. 예를 들어, 기본 그림자는 shadow 클래스를 사용하며, 더 큰 그림자는 shadow-lg, shadow-2xl 등을 사용할 수 있습니다.
<div class="w-96 ml-4 p-3 shadow">기본 그림자</div> <div class="w-96 ml-4 p-3 shadow-lg">더 큰 그림자</div>
색상과 투명도 설정
그림자에 색상을 추가하려면 shadow-blue-500과 같은 클래스를 사용할 수 있으며, 투명도도 설정할 수 있습니다:
<div class="shadow-red-500/50">반투명 빨간 그림자</div>
요소 간 혼합 효과 (Mixed Blend)
mix-blend-multiply 클래스를 사용하면 두 요소 간 색상을 혼합할 수 있습니다:
<div class="flex justify-center -space-x-24"> <div class="bg-blue-400 mix-blend-multiply">첫 번째 박스</div> <div class="bg-pink-400 mix-blend-multiply">두 번째 박스</div> </div>
이 코드는 두 배경 색상이 서로 섞이는 효과를 만듭니다.
7.Borders & Border Radius
테두리 설정
간단한 테두리를 추가하기 위해 border 클래스를 사용합니다. 기본적으로 1픽셀의 연한 회색 테두리가 추가됩니다
<div class="w-96 m-4 p-4 border">Lorem 10</div>
테두리 두께를 조정하려면 border-2, border-4, border-8 등의 클래스를 사용할 수 있습니다.
<div class="border-4">두꺼운 테두리</div>
클래스 값은 0, 2, 4, 8이 기본적으로 제공됩니다.
테두리 색상
색상을 변경하려면 border-red-500과 같은 클래스를 사용합니다.
<div class="border-4 border-red-500">빨간 테두리</div>
특정 방향에만 테두리 추가
테두리를 특정 방향에만 추가할 수 있습니다.
- 양쪽 (좌/우): border-x-4
- 상/하: border-y-4
- 상단: border-t-4
- 하단: border-b-4
- 좌측: border-l-4
- 우측: border-r-4
테두리 반경 (Border Radius)
테두리 반경을 설정하기 위해 rounded 클래스를 사용합니다. 기본 반경은 0.25rem입니다.
<div class="border-4 rounded">기본 반경</div>
더 큰 반경을 원하면 rounded-lg, rounded-xl, rounded-2xl 등으로 설정할 수 있습니다.
최대로는 rounded-full을 사용하여 완전히 둥근 모양을 만들 수 있습니다.
<div class="border-4 rounded-full">완전한 원</div>
특정 부분에만 반경 적용
특정 방향에만 반경을 설정할 수 있습니다.
- 상단 양쪽: rounded-t-2xl
- 하단 양쪽: rounded-b-2xl
외곽선 (Outline)
외곽선은 outline 클래스를 사용합니다. 기본적으로 클릭 시 외곽선이 나타납니다.
<button class="outline">클릭하세요</button>
외곽선 색상과 두께를 변경할 수도 있습니다:
<button class="outline outline-red-500 outline-4">빨간 외곽선</button>
외곽선 오프셋을 설정하여 외곽선을 요소에서 떨어뜨릴 수도 있습니다:
<button class="outline outline-4 outline-offset-2">오프셋 외곽선</button>
<!-- Border Widths
border-0 border-width: 0px;
border-2 border-width: 2px;
border-4 border-width: 4px;
border-8 border-width: 8px;
border border-width: 1px;
border-x-0 border-left-width: 0px;
border-right-width: 0px;
border-x-2 border-left-width: 2px;
border-right-width: 2px;
border-x-4 border-left-width: 4px;
border-right-width: 4px;
border-x-8 border-left-width: 8px;
border-right-width: 8px;
border-x border-left-width: 1px;
border-right-width: 1px;
border-y-0 border-top-width: 0px;
border-bottom-width: 0px;
border-y-2 border-top-width: 2px;
border-bottom-width: 2px;
border-y-4 border-top-width: 4px;
border-bottom-width: 4px;
border-y-8 border-top-width: 8px;
border-bottom-width: 8px;
border-y border-top-width: 1px;
border-bottom-width: 1px;
border-t-0 border-top-width: 0px;
border-t-2 border-top-width: 2px;
border-t-4 border-top-width: 4px;
border-t-8 border-top-width: 8px;
border-t border-top-width: 1px;
border-r-0 border-right-width: 0px;
border-r-2 border-right-width: 2px;
border-r-4 border-right-width: 4px;
border-r-8 border-right-width: 8px;
border-r border-right-width: 1px;
border-b-0 border-bottom-width: 0px;
border-b-2 border-bottom-width: 2px;
border-b-4 border-bottom-width: 4px;
border-b-8 border-bottom-width: 8px;
border-b border-bottom-width: 1px;
border-l-0 border-left-width: 0px;
border-l-2 border-left-width: 2px;
border-l-4 border-left-width: 4px;
border-l-8 border-left-width: 8px;
border-l border-left-width: 1px;
-->
<!-- Border Radius
rounded-none border-radius: 0px;
rounded-sm border-radius: 0.125rem; /* 2px */
rounded border-radius: 0.25rem; /* 4px */
rounded-md border-radius: 0.375rem; /* 6px */
rounded-lg border-radius: 0.5rem; /* 8px */
rounded-xl border-radius: 0.75rem; /* 12px */
rounded-2xl border-radius: 1rem; /* 16px */
rounded-3xl border-radius: 1.5rem; /* 24px */
rounded-full border-radius: 9999px;
-->
<!-- Outline
outline-0 outline-width: 0px;
outline-1 outline-width: 1px;
outline-2 outline-width: 2px;
outline-4 outline-width: 4px;
outline-8 outline-width: 8px;
-->
8.Filters
필터를 사용하면 포토샵이나 이미지 편집 프로그램을 사용하지 않고도 이미지나 텍스트의 색조, 밝기, 대비, 흐림 효과 등을 쉽게 조정할 수 있습니다.
1. 블러 (Blur)
텍스트나 이미지에 흐림 효과를 줄 수 있습니다.
<div class="blur-sm">이 텍스트는 흐림 처리되었습니다.</div>
블러 효과에는 blur-none부터 blur-3xl까지 다양한 옵션이 있습니다.
이미지에 블러 효과를 적용하려면 다음과 같이 할 수 있습니다.
<img src="image1.jpg" class="blur-xl" alt="Blurred Image">
2. 밝기 (Brightness)
밝기를 조정할 때는 brightness-0부터 brightness-200까지의 값을 사용할 수 있습니다. 기본값은 brightness-100입니다.
<img src="image2.jpg" class="brightness-75" alt="Darker Image"> <img src="image2.jpg" class="brightness-150" alt="Brighter Image">
3. 대비 (Contrast)
대비를 조정할 때도 contrast-0부터 contrast-200까지 사용할 수 있습니다. contrast-0은 완전히 보이지 않게 하고, contrast-200은 매우 강한 대비를 줍니다.
<img src="image3.jpg" class="contrast-150" alt="High Contrast Image">
4. 그레이스케일 (Grayscale)
이미지를 흑백으로 변환하려면 grayscale 클래스를 사용합니다.
5. 반전 (Invert)
이미지를 색상 반전할 때는 invert 클래스를 사용합니다.
6. 세피아 (Sepia)
이미지에 세피아 효과를 적용하려면 sepia 클래스를 사용합니다.
<img src="image6.jpg" class="sepia" alt="Sepia Image">
7. 색상 회전 (Hue Rotate)
색상을 회전하여 이미지를 다르게 표현할 수 있습니다. hue-rotate-15부터 hue-rotate-180까지 값을 지정할 수 있습니다.
<img src="image7.jpg" class="hue-rotate-90" alt="Hue Rotated Image">
<!DOCTYPE html>
<html lang="en">
<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>Filters</title>
</head>
<body>
<!-- Blur -->
<div class="blur-none">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque deserunt
animi quas aliquam consectetur ut obcaecati voluptas repudiandae odit
harum?
</div>
<div class="blur-sm">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque deserunt
animi quas aliquam consectetur ut obcaecati voluptas repudiandae odit
harum?
</div>
<div class="blur-lg">
<img class="w-48" src="/assets/img/img1.jpg" alt="" />
</div>
<div class="blur-2xl">
<img class="w-48" src="/assets/img/img1.jpg" alt="" />
</div>
<!-- Brightness -->
<div class="brightness-50">
<img class="w-48" src="/assets/img/img2.jpg" alt="" />
</div>
<div class="brightness-100">
<img class="w-48" src="/assets/img/img2.jpg" alt="" />
</div>
<div class="brightness-150">
<img class="w-48" src="/assets/img/img2.jpg" alt="" />
</div>
<div class="brightness-200">
<img class="w-48" src="/assets/img/img2.jpg" alt="" />
</div>
<!-- Contrast -->
<div class="contrast-50">
<img class="w-48" src="/assets/img/img2.jpg" alt="" />
</div>
<div class="contrast-100">
<img class="w-48" src="/assets/img/img2.jpg" alt="" />
</div>
<div class="contrast-150">
<img class="w-48" src="/assets/img/img2.jpg" alt="" />
</div>
<div class="contrast-200">
<img class="w-48" src="/assets/img/img2.jpg" alt="" />
</div>
<!-- Grayscale -->
<div class="grayscale">
<img class="w-48" src="/assets/img/img3.jpg" alt="" />
</div>
<!-- Invert -->
<div class="invert">
<img class="w-48" src="/assets/img/img3.jpg" alt="" />
</div>
<!-- Sepia -->
<div class="sepia">
<img class="w-48" src="/assets/img/img3.jpg" alt="" />
</div>
<!-- Hue Rotate -->
<div class="hue-rotate-15">
<img class="w-48" src="/assets/img/img3.jpg" alt="" />
</div>
<div class="hue-rotate-90">
<img class="w-48" src="/assets/img/img3.jpg" alt="" />
</div>
<div class="hue-rotate-180">
<img class="w-48" src="/assets/img/img3.jpg" alt="" />
</div>
<div class="hue-rotate-60">
<img class="w-48" src="/assets/img/img3.jpg" alt="" />
</div>
<!-- Saturate -->
<div class="saturate-50">
<img class="w-48" src="/assets/img/img4.jpg" alt="" />
</div>
<div class="saturate-100">
<img class="w-48" src="/assets/img/img4.jpg" alt="" />
</div>
<div class="saturate-150">
<img class="w-48" src="/assets/img/img4.jpg" alt="" />
</div>
<div class="saturate-200">
<img class="w-48" src="/assets/img/img4.jpg" alt="" />
</div>
</body>
</html>
<!-- Blur
blur-none filter: blur(0);
blur-sm filter: blur(4px);
blur filter: blur(8px);
blur-md filter: blur(12px);
blur-lg filter: blur(16px);
blur-xl filter: blur(24px);
blur-2xl filter: blur(40px);
blur-3xl filter: blur(64px);
-->
<!-- Brightness
brightness-0 filter: brightness(0);
brightness-50 filter: brightness(.5);
brightness-75 filter: brightness(.75);
brightness-90 filter: brightness(.9);
brightness-95 filter: brightness(.95);
brightness-100 filter: brightness(1);
brightness-105 filter: brightness(1.05);
brightness-110 filter: brightness(1.1);
brightness-125 filter: brightness(1.25);
brightness-150 filter: brightness(1.5);
brightness-200 filter: brightness(2);
-->
<!-- Contrast
contrast-0 filter: contrast(0);
contrast-50 filter: contrast(.5);
contrast-75 filter: contrast(.75);
contrast-100 filter: contrast(1);
contrast-125 filter: contrast(1.25);
contrast-150 filter: contrast(1.5);
contrast-200 filter: contrast(2);
-->
<!-- Hue Rotate
hue-rotate-0 filter: hue-rotate(0deg);
hue-rotate-15 filter: hue-rotate(15deg);
hue-rotate-30 filter: hue-rotate(30deg);
hue-rotate-60 filter: hue-rotate(60deg);
hue-rotate-90 filter: hue-rotate(90deg);
hue-rotate-180 filter: hue-rotate(180deg);
-->
댓글 ( 0)
댓글 남기기