๐ฑ CSS ํฌ๊ธฐํ ๊ฐ๋ฐ์๋ฅผ ๊ตฌ์ํ Tailwind CSS 10๋ถ ์ ๋ณต๊ธฐ
๊ด๋ฆฌ์
2๊ฐ์ ์
๐ฑ CSS ํฌ๊ธฐํ ๊ฐ๋ฐ์๋ฅผ ๊ตฌ์ํ Tailwind CSS 10๋ถ ์ ๋ณต๊ธฐ
๐ฏ "CSS ๋๋ฌธ์ ํ๋ก ํธ์๋ ํฌ๊ธฐํ ๋ปํ ๋๋ฅผ ๊ตฌํด์ค ๊ฑด..."
์๋ ํ์ธ์! ์ค๋์ ์ ๋ง ๋ง์ ๊ฐ๋ฐ์๋ค์ด ๊ฒช๋ ๊ณ ๋ฏผ, **"CSS ์ง์ฅ"**์์ ํ์ถํ๋ ๋ฐฉ๋ฒ์ ์๊ฐํ๋ ค๊ณ ํฉ๋๋ค.
์์งํ ๋ง์๋๋ฆฌ๋ฉด, ์ ๋ ํ๋ ์ด๋ฐ ๊ฐ๋ฐ์์์ด์:
- margin๊ณผ padding ์ฐจ์ด๋ฅผ ๋งค๋ฒ ๊ตฌ๊ธ๋ง
- flex์ grid ์ค ๋ญ ์จ์ผ ํ ์ง 10๋ถ์ฉ ๊ณ ๋ฏผ
- ๋ฐ์ํ? ๊ทธ๊ฒ ๋ญ๊ฐ์... media query ๋ณด๋ฉด ํ๊ธฐ์ฆ
- ๋คํฌ๋ชจ๋? ๊ทธ๊ฑด ๊ฟ๋ ๋ชป ๊ฟ
๊ทธ๋ฐ๋ฐ Tailwind CSS๋ฅผ ๋ง๋๊ณ ๋์ ์ ๊ฐ๋ฐ ์ธ์์ด 180๋ ๋ฐ๋์์ต๋๋ค. ์ง์ง 10๋ถ์ด๋ฉด ๋๊ตฌ๋ ํ๋ก์ฒ๋ผ UI๋ฅผ ๋ง๋ค ์ ์์ด์!
๐ Tailwind CSS๊ฐ ๋ญ๊ธธ๋?
ํ ๋ง๋๋ก ์ ๋ฆฌํ๋ฉด: "CSS๋ฅผ ์ ์ฐ๊ณ CSS๋ฅผ ์ฐ๋ ๋ง๋ฒ"
๊ธฐ์กด CSS:
.button {
background-color: #3b82f6;
color: white;
padding: 8px 16px;
border-radius: 8px;
font-weight: 500;
}
.button:hover {
background-color: #2563eb;
}
Tailwind CSS:
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-600">
ํด๋ฆญํ์ธ์
</button>
"์ด? ์ด๊ฒ ๋์ด์ผ?" ๋ค, ๋์ ๋๋ค! ๐
โก 10๋ถ ์์ ๋ง์คํฐํ๋ ํต์ฌ ํจํด
1๏ธโฃ ๊ฐ๊ฒฉ ์กฐ์ ๋ง๋ฒ์ฌ ๋๊ธฐ (2๋ถ)
padding & margin ์ธ์ฐ๊ธฐ ๋!
p-4
= padding 1rem (16px)m-4
= margin 1rempx-4
= ์ข์ฐ paddingpy-4
= ์ํ paddingmt-4
= margin-top๋ง
์ค์ ์์ :
<!-- ์นด๋ ์ปดํฌ๋ํธ -->
<div class="p-6 m-4">
<h2 class="mb-2">์ ๋ชฉ</h2>
<p class="mt-4">๋ด์ฉ</p>
</div>
์ซ์ ๊ท์น:
- 0 = 0px
- 1 = 0.25rem (4px)
- 2 = 0.5rem (8px)
- 4 = 1rem (16px)
- 8 = 2rem (32px)
2๏ธโฃ Flexbox 1์ด ๋ง์ ์ ๋ณต (2๋ถ)
"justify์ align ํท๊ฐ๋ ค ์ฃฝ๊ฒ ์ด์" โ ํด๊ฒฐ!
<!-- ๊ฐ๋ก ์ค์ ์ ๋ ฌ -->
<div class="flex justify-center">
๋๋ ๊ฐ์ด๋ฐ!
</div>
<!-- ์ธ๋ก ์ค์ ์ ๋ ฌ -->
<div class="flex items-center h-screen">
๋๋ ๊ฐ์ด๋ฐ!
</div>
<!-- ์๋ฒฝํ ์ค์ ์ ๋ ฌ -->
<div class="flex justify-center items-center h-screen">
์ ์ค์!
</div>
<!-- ์์ชฝ ๋์ผ๋ก ๋ฐ๊ธฐ -->
<div class="flex justify-between">
<span>์ผ์ชฝ</span>
<span>์ค๋ฅธ์ชฝ</span>
</div>
3๏ธโฃ ๋ฐ์ํ ๋์์ธ ์ฒ์ฌ ๋๊ธฐ (2๋ถ)
"๋ฏธ๋์ด ์ฟผ๋ฆฌ ์๋ ~"
<!-- ๋ชจ๋ฐ์ผ: ์ธ๋ก / ํ๋ธ๋ฆฟ: ๊ฐ๋ก -->
<div class="flex flex-col md:flex-row">
<div>ํญ๋ชฉ 1</div>
<div>ํญ๋ชฉ 2</div>
</div>
<!-- ๋ฐ์ํ ํ
์คํธ ํฌ๊ธฐ -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">
ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ๋ผ ์ปค์ ธ์!
</h1>
<!-- ๋ฐ์ํ ๊ทธ๋ฆฌ๋ -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div>์นด๋ 1</div>
<div>์นด๋ 2</div>
<div>์นด๋ 3</div>
</div>
๋ธ๋ ์ดํฌํฌ์ธํธ ์๊ธฐ:
- ๊ธฐ๋ณธ = ๋ชจ๋ฐ์ผ
sm:
= 640px ์ด์ (์์ ํ๋ธ๋ฆฟ)md:
= 768px ์ด์ (ํ๋ธ๋ฆฟ)lg:
= 1024px ์ด์ (๋ ธํธ๋ถ)xl:
= 1280px ์ด์ (๋ฐ์คํฌํฑ)
4๏ธโฃ ๋คํฌ๋ชจ๋ 10์ด ๊ตฌํ (1๋ถ)
"๋คํฌ๋ชจ๋ ๊ตฌํ 3์ผ ๊ฑธ๋ ธ์ด์" โ "์ด์ 10์ด๋ฉด ๋ผ์"
<!-- ์๋ ๋คํฌ๋ชจ๋ -->
<div class="bg-white dark:bg-gray-900">
<h1 class="text-black dark:text-white">
์๋์ผ๋ก ๋ฐ๋๋ ๋คํฌ๋ชจ๋!
</h1>
<p class="text-gray-600 dark:text-gray-400">
์์คํ
์ค์ ๋ฐ๋ผ ๋ฐ๋
</p>
</div>
<!-- ๋คํฌ๋ชจ๋ ํ ๊ธ ๋ฒํผ -->
<button class="bg-gray-200 dark:bg-gray-700 p-2 rounded">
๐ ๋คํฌ๋ชจ๋
</button>
5๏ธโฃ ์ค์ ! Instagram ์นด๋ 3๋ถ ๋ง๋ค๊ธฐ (3๋ถ)
"์ด์ ๋ชจ๋ ๊ฑธ ํฉ์ณ๋ด ์๋ค!"
<!-- Instagram ์คํ์ผ ์นด๋ -->
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
<!-- ํค๋ -->
<div class="flex items-center p-4">
<img class="w-10 h-10 rounded-full" src="avatar.jpg" alt="ํ๋กํ">
<div class="ml-3">
<p class="font-semibold text-gray-900 dark:text-white">๊ฐ๋ฐ์๊น</p>
<p class="text-sm text-gray-500">์์ธ, ๋ํ๋ฏผ๊ตญ</p>
</div>
</div>
<!-- ์ด๋ฏธ์ง -->
<img class="w-full h-96 object-cover" src="photo.jpg" alt="์ฌ์ง">
<!-- ์ก์
๋ฒํผ๋ค -->
<div class="p-4">
<div class="flex space-x-4 mb-4">
<button class="hover:scale-110 transition">โค๏ธ</button>
<button class="hover:scale-110 transition">๐ฌ</button>
<button class="hover:scale-110 transition">๐ค</button>
</div>
<!-- ์ข์์ ์ -->
<p class="font-bold text-gray-900 dark:text-white mb-2">
์ข์์ 1,234๊ฐ
</p>
<!-- ์บก์
-->
<p class="text-gray-800 dark:text-gray-200">
<span class="font-semibold">๊ฐ๋ฐ์๊น</span>
Tailwind CSS๋ก 10๋ถ ๋ง์ ๋ง๋ ์ธ์คํ๊ทธ๋จ ์นด๋! ๐
</p>
</div>
</div>
๐จ 2025๋ Tailwind CSS v4์ ๋๋ผ์ด ์ ๊ธฐ๋ฅ
๐ 5๋ฐฐ ๋นจ๋ผ์ง ๋น๋ ์๋
- ๊ธฐ์กด: ๋น๋ 10์ด โ ์ด์ : 2์ด!
- ๊ฐ๋ฐ ์๋ฒ ์๋ก๊ณ ์นจ 100ms ์ดํ
๐ฆ 35% ์์์ง CSS ๋ฒ๋ค
- ํ๊ท ํ๋ก์ ํธ: 10KB ์ดํ
- ๊ตฌ๊ธ Core Web Vitals ๋ง์ ๋ณด์ฅ
๐ฏ ์๋ ์ต์ ํ
/* ์ด์ ์ด๊ฒ๋ง ์ถ๊ฐํ๋ฉด ๋! */
@import "tailwindcss";
- ์ค์ ํ์ผ? ํ์ ์์!
- content ๊ฒฝ๋ก ์ค์ ? ์๋!
- purge ์ค์ ? ์์์!
๐ ๋นจ๊ฐ์ฝ vs ํ๋์ฝ: ๋น์ ์ ์ ํ์?
๐ต ํ๋์ฝ (๊ธฐ์กด CSS)
- CSS ํ์ผ 100๊ฐ ๊ด๋ฆฌ
- ํด๋์ค ์ด๋ฆ 30๋ถ ๊ณ ๋ฏผ
- !important ์ง์ฅ
- ๋ฐ์ํ = ์ ๋ชฝ
- ๋คํฌ๋ชจ๋ = ํฌ๊ธฐ
๐ด ๋นจ๊ฐ์ฝ (Tailwind CSS)
- CSS ํ์ผ 0๊ฐ
- ํด๋์ค ์ด๋ฆ ๊ณ ๋ฏผ 0์ด
- ํน์ด๋ ๋ฌธ์ ์์
- ๋ฐ์ํ = md: ๋ถ์ด๊ธฐ
- ๋คํฌ๋ชจ๋ = dark: ๋ถ์ด๊ธฐ
๐จ ์ด๋ณด์๊ฐ ์์ฃผ ํ๋ ์ค์ TOP 5
1. ๋์ ํด๋์ค ์์ฑ (์ ๋ ๊ธ์ง!)
// โ ์ด๋ฌ๋ฉด ์ ๋ผ์!
<div className={`bg-${color}-500`}>
// โ
์ด๋ ๊ฒ ํ์ธ์!
const colors = {
red: 'bg-red-500',
blue: 'bg-blue-500'
}
<div className={colors[color]}>
2. ๋๋ฌด ๊ธด ํด๋์ค๋ช
<!-- โ ์ฝ๊ธฐ ํ๋ค์ด์ -->
<div class="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<!-- โ
์ปดํฌ๋ํธ๋ก ๋ถ๋ฆฌํ์ธ์ -->
<Card>
๋ด์ฉ
</Card>
3. ๋ฐ์ํ ๋นผ๋จน๊ธฐ
<!-- โ ๋ชจ๋ฐ์ผ์์ ๊นจ์ง -->
<div class="w-96">
<!-- โ
๋ฐ์ํ ์ ์ฉ -->
<div class="w-full md:w-96">
4. ๊ฐ๊ฒฉ ์ผ๊ด์ฑ ์์
<!-- โ ์ ๊ฐ๊ฐ ๊ฐ๊ฒฉ -->
<div class="p-3 mb-5 mt-7">
<!-- โ
4์ ๋ฐฐ์ ์ฌ์ฉ -->
<div class="p-4 mb-4 mt-8">
5. hover/focus ์ํ ๋ฌด์
<!-- โ ์ธํฐ๋์
์์ -->
<button class="bg-blue-500 text-white">
<!-- โ
์ธํฐ๋์
์ถ๊ฐ -->
<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-300 text-white transition">
๐ ๏ธ VS Code ํ์ ์ต์คํ ์ 3์ข ์ธํธ
Tailwind CSS IntelliSense
- ์๋์์ฑ + ๋ฏธ๋ฆฌ๋ณด๊ธฐ
- ํด๋์ค๋ช ์์ ๋ง์ฐ์ค ์ฌ๋ฆฌ๋ฉด ์ค์ CSS ๋ณด์ฌ์ค
Headwind
- ํด๋์ค ์๋ ์ ๋ ฌ
- ์ ์ฅํ ๋๋ง๋ค ๊น๋ํ๊ฒ ์ ๋ฆฌ
Tailwind Documentation
- Cmd/Ctrl + ํด๋ฆญ์ผ๋ก ๋ฌธ์ ๋ฐ๋ก ์ด๊ธฐ
๐ ๋จ๊ณ๋ณ ํ์ต ๋ก๋๋งต
Day 1-2: ๊ธฐ์ด (์ง๊ธ ๋น์ฅ!)
- ๊ฐ๊ฒฉ ์์คํ (p, m)
- ์์ ์์คํ (text, bg)
- ํฌ๊ธฐ ์กฐ์ (w, h)
Day 3-4: ๋ ์ด์์
- Flexbox (flex, justify, items)
- Grid (grid, cols, gap)
- ์์น (absolute, relative, fixed)
Day 5-6: ๋ฐ์ํ
- ๋ธ๋ ์ดํฌํฌ์ธํธ ์ดํด
- ๋ชจ๋ฐ์ผ ์ฐ์ ์ค๊ณ
- ์ปจํ ์ด๋ ์ฟผ๋ฆฌ
Day 7: ๊ณ ๊ธ ๊ธฐ๋ฅ
- ์ ๋๋ฉ์ด์ (transition, animate)
- ํํฐ ํจ๊ณผ (blur, grayscale)
- ์ปค์คํ ์ ํธ๋ฆฌํฐ
๐ฏ ์ค๋ ๋น์ฅ ์์ํ๋ ๋ฒ
1. ์ ํ๋ก์ ํธ (Next.js ๊ธฐ์ค)
npx create-next-app@latest my-app
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
2. globals.css์ ์ถ๊ฐ
@import "tailwindcss";
3. ์ฒซ ์ปดํฌ๋ํธ ๋ง๋ค๊ธฐ
export default function Home() {
return (
<div className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
<h1 className="text-6xl font-bold text-white animate-pulse">
Hello Tailwind! ๐
</h1>
</div>
)
}
๐ญ ๊ฐ๋ฐ์๋ค์ ์ค์ ํ๊ธฐ
๊น๊ฐ๋ฐ (์ฃผ๋์ด 2๋ ์ฐจ):
"CSS ๋๋ฌธ์ ํด์ฌ ๊ณ ๋ฏผํ๋๋ฐ Tailwind ๋ฐฐ์ฐ๊ณ ๋์ ํ๋ก ํธ์๋๊ฐ ์ฌ๋ฐ์ด์ก์ด์. ์ด์ ๋์์ด๋ํํ '๊ทธ๊ฑฐ 10๋ถ์ด๋ฉด ๋๋๋ฐ์?' ๋ผ๊ณ ๋งํด์ ใ ใ "
๋ฐํ๋ก ํธ (์๋์ด 5๋ ์ฐจ):
"์ฒ์์ HTML์ด ์ง์ ๋ถํด ๋ณด์ฌ์ ๊ฑฐ๋ถ๊ฐ ์์๋๋ฐ, ๊ฐ๋ฐ ์๋๊ฐ 3๋ฐฐ๋ ๋นจ๋ผ์ง๋๊น ์ง์ ์ธ ๊ฑธ ํํ๋ฉ๋๋ค."
์ด๋ฐฑ์๋ (๋ฐฑ์๋ ๊ฐ๋ฐ์):
"ํ๋ก ํธ 1๋ ๋ชจ๋ฅด๋๋ฐ Tailwind๋ก ๊ด๋ฆฌ์ ํ์ด์ง ํผ์ ๋ค ๋ง๋ค์์ด์. CSS ๋ชฐ๋ผ๋ ๋๋๋ผ๊ณ ์!"
๐ ๊ฒฐ๋ก : 10๋ถ ํฌ์๋ก 10๋ ๊ณ ์ ๋!
Tailwind CSS๋ ๋จ์ํ CSS ํ๋ ์์ํฌ๊ฐ ์๋๋๋ค. ๊ฐ๋ฐ์์ ์์ฐ์ฑ์ ํญ๋ฐ์ ์ผ๋ก ๋์ฌ์ฃผ๋ ๊ฒ์ ์ฒด์ธ์ ์์.
ํนํ 2025๋ v4๋ ์ฑ๋ฅ๊ณผ ๊ฐ๋ฐ ๊ฒฝํ ๋ชจ๋์์ ํ์ ์ ์ธ ๋ฐ์ ์ ์ด๋ค์ต๋๋ค.
์ค๋ 10๋ถ๋ง ํฌ์ํ์ธ์. ๋ด์ผ๋ถํฐ ๋น์ ๋ CSS ๋ง๋ฒ์ฌ๊ฐ ๋ ์ ์์ต๋๋ค! โจ
๋ง์ง๋ง์ผ๋ก ์ ๊ฐ ๊ฐ์ฅ ์ข์ํ๋ Tailwind ์ฒ ํ์ ๊ณต์ ํ๋ฉฐ ๋ง์น๊ฒ ์ต๋๋ค:
"Best practices don't actually work."
"๋ชจ๋ฒ ์ฌ๋ก๋ ์ค์ ๋ก ์๋ํ์ง ์๋๋ค."
- Adam Wathan (Tailwind CSS ์ฐฝ์์)
๊ท์น์ ์ฝ๋งค์ด์ง ๋ง๊ณ , ๋น ๋ฅด๊ฒ ๋ง๋ค๊ณ , ์์ฃผ ์์ ํ์ธ์. ๊ทธ๊ฒ ์ง์ง ๊ฐ๋ฐ์ ๋๋ค! ๐ฏ
Tailwind CSS๋ก ๋ง๋ ํ๋ก์ ํธ๊ฐ ์์ผ์ ๊ฐ์? ๋๊ธ๋ก ๊ณต์ ํด์ฃผ์ธ์! ์ด๋ณด์ ์ง๋ฌธ๋ ํ์ํฉ๋๋ค! ๐
๋๊ธ 0๊ฐ
์์ง ๋๊ธ์ด ์์ต๋๋ค
์ฒซ ๋ฒ์งธ ๋๊ธ์ ์์ฑํด๋ณด์ธ์!