Frontend

๐Ÿ˜ฑ CSS ํฌ๊ธฐํ•œ ๊ฐœ๋ฐœ์ž๋ฅผ ๊ตฌ์›ํ•œ Tailwind CSS 10๋ถ„ ์ •๋ณต๊ธฐ

๊ด€๋ฆฌ์ž

2๊ฐœ์›” ์ „

24000
#Tailwind CSS#Frontend#CSS#๋ฐ˜์‘ํ˜•

๐Ÿ˜ฑ 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 1rem
  • px-4 = ์ขŒ์šฐ padding
  • py-4 = ์ƒํ•˜ padding
  • mt-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์ข… ์„ธํŠธ

  1. Tailwind CSS IntelliSense

    • ์ž๋™์™„์„ฑ + ๋ฏธ๋ฆฌ๋ณด๊ธฐ
    • ํด๋ž˜์Šค๋ช… ์œ„์— ๋งˆ์šฐ์Šค ์˜ฌ๋ฆฌ๋ฉด ์‹ค์ œ CSS ๋ณด์—ฌ์คŒ
  2. Headwind

    • ํด๋ž˜์Šค ์ž๋™ ์ •๋ ฌ
    • ์ €์žฅํ•  ๋•Œ๋งˆ๋‹ค ๊น”๋”ํ•˜๊ฒŒ ์ •๋ฆฌ
  3. 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๊ฐœ

์•„์ง ๋Œ“๊ธ€์ด ์—†์Šต๋‹ˆ๋‹ค

์ฒซ ๋ฒˆ์งธ ๋Œ“๊ธ€์„ ์ž‘์„ฑํ•ด๋ณด์„ธ์š”!