{"id":5,"date":"2026-06-26T13:10:34","date_gmt":"2026-06-26T13:10:34","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=5"},"modified":"2026-06-26T14:02:47","modified_gmt":"2026-06-26T14:02:47","slug":"tailwind","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=5","title":{"rendered":"Tailwind CSS"},"content":{"rendered":"

Tailwind CSS<\/h1>\n

\ubcf4\ud1b5 \uc6f9\uc0ac\uc774\ud2b8\ub97c \uafb8\ubc00 \ub54c\ub294 \ubcc4\ub3c4\uc758 CSS \ud30c\uc77c\uc5d0 \ucf54\ub4dc\ub97c \uae38\uac8c \uc791\uc131\ud574\uc57c \ud55c\ub2e4. \ud558\uc9c0\ub9cc Tailwind\ub294 "\uc774\ubbf8 \ub9cc\ub4e4\uc5b4\uc9c4 \ud0dc\uadf8(Class)"<\/strong>\ub97c HTML\uc5d0 \ubc14\ub85c \ubd99\uc5ec\uc11c \ub514\uc790\uc778\ud558\ub294 \ubc29\uc2dd\uc774\ub2e4.<\/p>\n

\n

\ud14c\uc77c\uc708\ub4dc \uacf5\uc2dd<\/a><\/p>\n

\ud14c\uc77c\uc708\ub4dc \uce58\ud2b8\uc2dc\ud2b8<\/a>
\n<\/p>\n

\uacf5\uc2dd\ud14c\uc77c\uc708\ub4dc \ud53c\uadf8\ub9c8 \uc2a4\ud0c0\uc77c\ud30c\uc77c<\/a><\/p>\n

<\/p>\n

\ud14c\uc77c\uc708\ub4dc \ub514\uc790\uc778\ud1a0\ud070 \uc0dd\uc131\uae30 \ud53c\uadf8\ub9c8 \ud50c\ub7ec\uadf8\uc778<\/a><\/p>\n

<\/p>\n

\n

1. Basics \u2014 \uc124\uce58<\/h2>\n

NPM \uc124\uce58 (Vite \uae30\uc900)<\/h3>\n
    \n
  1. \ud130\ubbf8\ub110\uc5d0 \uc544\ub798 \uba85\ub839\uc5b4 \uc785\ub825<\/li>\n<\/ol>\n
    npm install tailwindcss @tailwindcss\/vite\n<\/code><\/pre>\n
      \n
    1. vite.config.js<\/strong> \ud30c\uc77c\uc5d0 \uc544\ub798 \ucf54\ub4dc \ucd94\uac00<\/li>\n<\/ol>\n
      import { defineConfig } from 'vite'\nimport react from '@vitejs\/plugin-react'\nimport tailwindcss from '@tailwindcss\/vite'   \/\/ \u2190 \ucd94\uac00\n\nexport default defineConfig({\n  plugins: [react(), tailwindcss()],\n})\n<\/code><\/pre>\n
        \n
      1. src\/index.css<\/strong> \uc5d0 \uc544\ub798 \ucf54\ub4dc \ucd94\uac00<\/li>\n<\/ol>\n
        @import "tailwindcss";\n<\/code><\/pre>\n
        CDN \uc124\uce58<\/h3>\n
        HTML\uc758 <head><\/code> \ud0dc\uadf8 \uc548\uc5d0 \uc544\ub798 \ucf54\ub4dc\ub97c \uc0bd\uc785\ud55c\ub2e4.<\/p>\n
        <!DOCTYPE html>\n<html>\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <script src="https:\/\/unpkg.com\/@tailwindcss\/browser@4"><\/script>\n<\/head>\n<body>\n  <h1 class="text-3xl font-bold text-blue-600 underline">\n    Hello, Tailwind!\n  <\/h1>\n<\/body>\n<\/html>\n<\/code><\/pre>\n
        \n
        Tip<\/strong>: \uc720\ud2f8\ub9ac\ud2f0 \uc6b0\uc120(Utility-First)<\/strong><\/p>\n
          \n
        • \uae30\uc874 \ubc29\uc2dd: .btn { background: blue; }<\/code> \ud074\ub798\uc2a4\ub97c \uc815\uc758\ud558\uace0 HTML\uc5d0\uc11c \uc801\uc6a9\ud55c\ub2e4.<\/li>\n
        • Tailwind \ubc29\uc2dd: class="bg-blue-500 text-white"<\/code>\uc640 \uac19\uc774 \uc774\ubbf8 \uc815\uc758\ub41c \ud074\ub798\uc2a4\ub97c \uc870\ud569\ud55c\ub2e4.<\/li>\n<\/ul>\n<\/blockquote>\n
          \n
          2. Sizing<\/h2>\n
          2.1. Width<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
          \ud074\ub798\uc2a4<\/th>\n\uac12<\/th>\n<\/tr>\n<\/thead>\n
          w-{n}<\/code><\/td>\nspacing \uc2a4\ucf00\uc77c (w-4 = 16px)<\/td>\n<\/tr>\n
          w-full<\/code><\/td>\n100%<\/td>\n<\/tr>\n
          w-screen<\/code><\/td>\n100vw<\/td>\n<\/tr>\n
          w-auto<\/code><\/td>\nauto<\/td>\n<\/tr>\n
          w-1\/2<\/code>, w-1\/3<\/code>, w-2\/3<\/code><\/td>\n50%, 33.3%, 66.6%<\/td>\n<\/tr>\n
          w-1\/4<\/code>, w-3\/4<\/code><\/td>\n25%, 75%<\/td>\n<\/tr>\n
          w-[200px]<\/code><\/td>\n\uc784\uc758\uac12<\/td>\n<\/tr>\n
          min-w-0<\/code>, min-w-full<\/code><\/td>\n\ucd5c\uc19f\uac12<\/td>\n<\/tr>\n
          max-w-sm<\/code> ~ max-w-7xl<\/code><\/td>\n\ucd5c\ub313\uac12 (sm=24rem~)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
          2.2. Height<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n
          \ud074\ub798\uc2a4<\/th>\n\uac12<\/th>\n<\/tr>\n<\/thead>\n
          h-{n}<\/code><\/td>\nspacing \uc2a4\ucf00\uc77c<\/td>\n<\/tr>\n
          h-full<\/code><\/td>\n100%<\/td>\n<\/tr>\n
          h-screen<\/code><\/td>\n100vh<\/td>\n<\/tr>\n
          h-auto<\/code><\/td>\nauto<\/td>\n<\/tr>\n
          min-h-screen<\/code><\/td>\nmin-height: 100vh<\/td>\n<\/tr>\n
          min-h-0<\/code><\/td>\nmin-height: 0<\/td>\n<\/tr>\n
          h-dvh<\/code><\/td>\n100dvh (\ub3d9\uc801 \ubdf0\ud3ec\ud2b8)<\/td>\n<\/tr>\n
          h-svh<\/code><\/td>\n100svh (\uc18c\ud615 \ubdf0\ud3ec\ud2b8)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
          2.3. size \ub2e8\ucd95 \ud074\ub798\uc2a4<\/h3>\n\n\n\n\n\n\n
          \ud074\ub798\uc2a4<\/th>\n\uac12<\/th>\n<\/tr>\n<\/thead>\n
          size-10<\/code><\/td>\nw-10 h-10<\/td>\n<\/tr>\n
          size-[200px]<\/code><\/td>\nw-200px h-200px<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
          \/\/ 1\ub2e8\uacc4: w-full, h-16 \u2014 \uace0\uc815 \ud06c\uae30\n<div className="w-full">\uac00\ub85c 100%<\/div>\n<div className="h-16">\ub192\uc774 64px<\/div>\n<\/code><\/pre>\n
          \/\/ 2\ub2e8\uacc4: \ube44\uc728 \u2014 \ubd80\ubaa8 \uae30\uc900 \ubc31\ubd84\uc728\n<div className="w-1\/2">\ubd80\ubaa8\uc758 50%<\/div>\n<div className="w-1\/3">\ubd80\ubaa8\uc758 33%<\/div>\n<div className="w-2\/3">\ubd80\ubaa8\uc758 66%<\/div>\n<\/code><\/pre>\n
          \/\/ 3\ub2e8\uacc4: max-w \u2014 \ucd5c\ub300 \ub108\ube44 \uc81c\ud55c (\ubc18\uc751\ud615\uc5d0 \uc790\uc8fc \uc0ac\uc6a9)\n<div className="w-full max-w-xl">\ucd5c\ub300 576px\uae4c\uc9c0\ub9cc<\/div>\n<div className="w-full max-w-4xl mx-auto">\ucd5c\ub300 \ub108\ube44 + \uac00\uc6b4\ub370 \uc815\ub82c<\/div>\n<\/code><\/pre>\n
          \/\/ 4\ub2e8\uacc4: size \u2014 \uac00\ub85c\u00b7\uc138\ub85c \ub3d9\uc2dc \uc9c0\uc815\n<div className="size-10">40x40<\/div>\n<div className="size-16">64x64<\/div>\n<div className="size-[200px]">200x200<\/div>\n<\/code><\/pre>\n
          \n
          3. Typography \u2014 \ud0c0\uc774\ud3ec\uadf8\ub798\ud53c<\/h2>\n
          3.1. Font Size (text-*)<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
          \ud074\ub798\uc2a4<\/th>\n\ud06c\uae30<\/th>\nline-height<\/th>\n<\/tr>\n<\/thead>\n
          text-xs<\/code><\/td>\n12px<\/td>\n1rem<\/td>\n<\/tr>\n
          text-sm<\/code><\/td>\n14px<\/td>\n1.25rem<\/td>\n<\/tr>\n
          text-base<\/code><\/td>\n16px<\/td>\n1.5rem<\/td>\n<\/tr>\n
          text-lg<\/code><\/td>\n18px<\/td>\n1.75rem<\/td>\n<\/tr>\n
          text-xl<\/code><\/td>\n20px<\/td>\n1.75rem<\/td>\n<\/tr>\n
          text-2xl<\/code><\/td>\n24px<\/td>\n2rem<\/td>\n<\/tr>\n
          text-3xl<\/code><\/td>\n30px<\/td>\n2.25rem<\/td>\n<\/tr>\n
          text-4xl<\/code><\/td>\n36px<\/td>\n2.5rem<\/td>\n<\/tr>\n
          text-5xl<\/code><\/td>\n48px<\/td>\n1<\/td>\n<\/tr>\n
          text-6xl<\/code><\/td>\n60px<\/td>\n1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
          3.2. Font Weight<\/h3>\n
          font-thin       \/* 100 *\/\nfont-extralight \/* 200 *\/\nfont-light      \/* 300 *\/\nfont-normal     \/* 400 *\/\nfont-medium     \/* 500 *\/\nfont-semibold   \/* 600 *\/\nfont-bold       \/* 700 *\/\nfont-extrabold  \/* 800 *\/\nfont-black      \/* 900 *\/\n<\/code><\/pre>\n
          3.3. Text \uc0c9\uc0c1<\/h3>\n
          text-white        text-black\ntext-gray-500     text-gray-900\ntext-yellow-300   text-yellow-400\ntext-blue-600     text-red-500\ntext-white\/80     \/* \ud22c\uba85\ub3c4 \ud3ec\ud568 *\/\n<\/code><\/pre>\n
          3.4. Text \uc815\ub82c \u00b7 \ubcc0\ud658 \u00b7 \uc7a5\uc2dd<\/h3>\n
          \/* \uc815\ub82c *\/\ntext-left   text-center   text-right   text-justify\n\n\/* \ubcc0\ud658 *\/\nuppercase   lowercase   capitalize   normal-case\n\n\/* \uc7a5\uc2dd *\/\nunderline   line-through   no-underline   overline\n\n\/* \uc624\ubc84\ud50c\ub85c \ucc98\ub9ac *\/\ntruncate          \/* \ud55c \uc904 \ub9d0\uc904\uc784 *\/\nline-clamp-2      \/* 2\uc904 \ub9d0\uc904\uc784 *\/\nline-clamp-3      \/* 3\uc904 \ub9d0\uc904\uc784 *\/\nwhitespace-nowrap \/* \uc904\ubc14\uafc8 \uae08\uc9c0 *\/\n<\/code><\/pre>\n
          3.5. Letter Spacing \u00b7 Line Height<\/h3>\n
          \/* \uc790\uac04 *\/\ntracking-tight    tracking-normal    tracking-wide    tracking-widest\n\n\/* \ud589\uac04 *\/\nleading-none      \/* 1 *\/\nleading-tight     \/* 1.25 *\/\nleading-normal    \/* 1.5 *\/\nleading-loose     \/* 2 *\/\nleading-[1.8]     \/* \uc784\uc758\uac12 *\/\n<\/code><\/pre>\n
          \/\/ 1\ub2e8\uacc4: text-size \u2014 \uae00\uc790 \ud06c\uae30\n<p className="text-sm">\uc791\uc740 \ud14d\uc2a4\ud2b8 (14px)<\/p>\n<p className="text-base">\uae30\ubcf8 \ud14d\uc2a4\ud2b8 (16px)<\/p>\n<p className="text-xl">\ud070 \ud14d\uc2a4\ud2b8 (20px)<\/p>\n<p className="text-4xl">\uc81c\ubaa9\uc6a9 \ud14d\uc2a4\ud2b8 (36px)<\/p>\n<\/code><\/pre>\n
          \/\/ 2\ub2e8\uacc4: font-weight \u2014 \uad75\uae30\n<p className="font-normal">\uc77c\ubc18 \uad75\uae30<\/p>\n<p className="font-bold">\uad75\uac8c<\/p>\n<p className="font-black">\uac00\uc7a5 \uad75\uac8c<\/p>\n<\/code><\/pre>\n
          \/\/ 3\ub2e8\uacc4: text-color \u2014 \uc0c9\uc0c1\n<p className="text-white">\ud770\uc0c9<\/p>\n<p className="text-gray-400">\ud68c\uc0c9<\/p>\n<p className="text-yellow-400">\ub178\ub780\uc0c9<\/p>\n<\/code><\/pre>\n
          \/\/ 4\ub2e8\uacc4: text-align \u2014 \uc815\ub82c\n<p className="text-left">\uc67c\ucabd \uc815\ub82c<\/p>\n<p className="text-center">\uac00\uc6b4\ub370 \uc815\ub82c<\/p>\n<p className="text-right">\uc624\ub978\ucabd \uc815\ub82c<\/p>\n<\/code><\/pre>\n
          \/\/ 5\ub2e8\uacc4: truncate \/ line-clamp \u2014 \ub118\uce58\ub294 \ud14d\uc2a4\ud2b8 \ucc98\ub9ac\n<p className="truncate">\ud55c \uc904\uc744 \ub118\uc73c\uba74 \ub9d0\uc904\uc784\ud45c\ub85c \uc798\ub9bc...<\/p>\n<p className="line-clamp-2">\ub450 \uc904\uc744 \ub118\uc73c\uba74 \uc798\ub9bc. \uae34 \ud14d\uc2a4\ud2b8 \uae34 \ud14d\uc2a4\ud2b8 \uae34 \ud14d\uc2a4\ud2b8 \uae34 \ud14d\uc2a4\ud2b8...<\/p>\n<\/code><\/pre>\n
          \n
          \n
          4. Backgrounds \u2014 \ubc30\uacbd<\/h2>\n
          4.1. \uae30\ubcf8 \uc0c9\uc0c1 \ud314\ub808\ud2b8<\/h3>\n
          Tailwind\uc758 \uc0c9\uc0c1\uc740 \uc0c9\uc0c1\uba85-\uc22b\uc790<\/strong> \ud615\ud0dc\uc774\ub2e4. \uc22b\uc790\uac00 \ud074\uc218\ub85d \uc5b4\ub450\uc6cc\uc9c4\ub2e4 (50 \uac00\uc7a5 \ubc1d\uc74c, 950 \uac00\uc7a5 \uc5b4\ub450\uc6c0).<\/p>\n\n\n\n\n\n\n\n\n\n
          \uc0c9\uc0c1\uba85<\/th>\n\ub300\ud45c \ud074\ub798\uc2a4 \uc608\uc2dc<\/th>\n<\/tr>\n<\/thead>\n
          slate, gray, zinc, neutral, stone<\/td>\n\ubb34\ucc44\uc0c9 \uacc4\uc5f4<\/td>\n<\/tr>\n
          red, orange, amber, yellow<\/td>\n\ub530\ub73b\ud55c \uacc4\uc5f4<\/td>\n<\/tr>\n
          lime, green, emerald, teal<\/td>\n\ucd08\ub85d \uacc4\uc5f4<\/td>\n<\/tr>\n
          cyan, sky, blue, indigo<\/td>\n\ud30c\ub780 \uacc4\uc5f4<\/td>\n<\/tr>\n
          violet, purple, fuchsia, pink, rose<\/td>\n\ubcf4\ub77c\u00b7\ubd84\ud64d \uacc4\uc5f4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
          4.2. \ubc30\uacbd\uc0c9 \uc801\uc6a9<\/h3>\n
          \/* \ubc30\uacbd\uc0c9 *\/\nbg-white          bg-black\nbg-gray-900       bg-gray-800\nbg-yellow-400     bg-blue-600\n\n\/* \ud22c\uba85\ub3c4 (\uc2ac\ub798\uc2dc \ubb38\ubc95) *\/\nbg-black\/50       \/* background: rgba(0,0,0,0.5) *\/\nbg-white\/10       \/* background: rgba(255,255,255,0.1) *\/\nbg-black\/90       \/* GOFLIX \ud5e4\ub354\uc5d0 \uc0ac\uc6a9 *\/\n<\/code><\/pre>\n
          4.3. \ud14c\ub450\ub9ac \uc0c9\uc0c1<\/h3>\n
          border-gray-200   border-yellow-400   border-transparent\n<\/code><\/pre>\n
          \/\/ 1\ub2e8\uacc4: bg-color \u2014 \ub2e8\uc0c9 \ubc30\uacbd\n<div className="bg-black">\uac80\uc740 \ubc30\uacbd<\/div>\n<div className="bg-gray-800">\uc5b4\ub450\uc6b4 \ud68c\uc0c9 \ubc30\uacbd<\/div>\n<div className="bg-yellow-400">\ub178\ub780 \ubc30\uacbd<\/div>\n<\/code><\/pre>\n
          \/\/ 2\ub2e8\uacc4: bg-color + text-color \u2014 \ubc30\uacbd\uacfc \ud14d\uc2a4\ud2b8 \uc0c9\uc0c1 \ud568\uaed8\n<div className="bg-gray-900 text-white">\uc5b4\ub450\uc6b4 \ubc30\uacbd\uc5d0 \ud770 \ud14d\uc2a4\ud2b8<\/div>\n<div className="bg-yellow-400 text-black">\ub178\ub780 \ubc30\uacbd\uc5d0 \uac80\uc740 \ud14d\uc2a4\ud2b8<\/div>\n<\/code><\/pre>\n
          \/\/ 3\ub2e8\uacc4: bg-color\/\ud22c\uba85\ub3c4 \u2014 \uc2ac\ub798\uc2dc\ub85c \ubd88\ud22c\uba85\ub3c4 \uc870\uc808\n<div className="bg-black\/50">50% \ud22c\uba85\ud55c \uac80\uc740 \ubc30\uacbd<\/div>\n<div className="bg-black\/90">90% \ubd88\ud22c\uba85\ud55c \uac80\uc740 \ubc30\uacbd<\/div>\n<\/code><\/pre>\n
          \/\/ 4\ub2e8\uacc4: bg-gradient \u2014 \uadf8\ub77c\ub514\uc5b8\ud2b8 \ubc30\uacbd\n<div className="bg-gradient-to-r from-black to-gray-800">\uc88c \u2192 \uc6b0<\/div>\n<div className="bg-gradient-to-t from-black to-transparent">\uc544\ub798 \u2192 \uc704(\ud22c\uba85)<\/div>\n<\/code><\/pre>\n
          \n
          5. Borders \u2014 \ud14c\ub450\ub9ac & Ring<\/h2>\n
          5.1. Border Width \u00b7 Color \u00b7 Style<\/h3>\n
          \n<div class="border border-gray-200">1px \ud14c\ub450\ub9ac<\/div>\n<div class="border-2 border-blue-500">2px \ud30c\ub780 \ud14c\ub450\ub9ac<\/div>\n<div class="border-4 border-dashed border-red-400">4px \uc810\uc120<\/div>\n\n\n<div class="border-b border-gray-200">\ud558\ub2e8\ub9cc<\/div>\n<div class="border-t-2 border-l-2 border-blue-300">\uc0c1\ub2e8+\uc88c\uce21<\/div>\n\n\n<div class="rounded-sm">\uc57d\uac04<\/div>\n<div class="rounded-lg">\uc911\uac04<\/div>\n<div class="rounded-2xl">\ud070 (\uce74\ub4dc)<\/div>\n<div class="rounded-full">\uc6d0\ud615<\/div>\n<\/code><\/pre>\n
          \n
          None<\/strong>: 1: border<\/code> \u2014 \uae30\ubcf8 1px \ud68c\uc0c9 \ud14c\ub450\ub9ac
          \n2: border-2<\/code> \u2014 2px, border-blue-500<\/code> \u2014 \ud30c\ub780\uc0c9
          \n3: border-dashed<\/code> \u2014 \uc810\uc120 \uc2a4\ud0c0\uc77c
          \n5: border-b<\/code> \u2014 \uc544\ub798\ucabd\ub9cc, border-t-2 border-l-2<\/code> \u2014 \uc704\ucabd\uacfc \uc67c\ucabd 2px
          \n9~12: rounded-*<\/code> \u2014 \ubaa8\uc11c\ub9ac \ubc18\uc9c0\ub984 (sm <<\/code> lg <<\/code> 2xl, full=50%)<\/p>\n<\/blockquote>\n
          \n
          18. GOFLIX \ud504\ub85c\uc81d\ud2b8 \uc801\uc6a9 \uc608\uc2dc<\/h2>\n
          Tailwind\ub85c \uc601\ud654 \uc815\ubcf4 \uc0ac\uc774\ud2b8\ub97c \ub9cc\ub4dc\ub294 \uc2e4\uc804 \uc608\uc2dc\uc785\ub2c8\ub2e4.<\/p>\n
          18.1. Header \ubd84\uc11d<\/h3>\n
          <header className="fixed top-0 left-0 w-full py-4 px-2 bg-black\/90 z-50">\n  {\/* fixed: \uc2a4\ud06c\ub864\ud574\ub3c4 \uace0\uc815 *\/}\n  {\/* top-0 left-0: \ud654\uba74 \ucd5c\uc0c1\ub2e8 \uc88c\uce21 *\/}\n  {\/* w-full: \uc804\uccb4 \ub108\ube44 *\/}\n  {\/* py-4 px-2: \uc0c1\ud558 16px, \uc88c\uc6b0 8px \ud328\ub529 *\/}\n  {\/* bg-black\/90: \uac80\uc740\uc0c9 \ubc30\uacbd 90% \ubd88\ud22c\uba85 *\/}\n  {\/* z-50: \ub2e4\ub978 \uc694\uc18c \uc704\uc5d0 \ud45c\uc2dc *\/}\n  <div className="container mx-auto">\n    <Link to="\/">\n      <h1 className="text-3xl text-yellow-300 font-bold">\n        {\/* text-3xl: 30px \ud14d\uc2a4\ud2b8 *\/}\n        {\/* text-yellow-300: \uc5f0\ud55c \ub178\ub780\uc0c9 *\/}\n        {\/* font-bold: \uad75\uc740 \uae00\uc528 *\/}\n        GOFLIX\n      <\/h1>\n    <\/Link>\n  <\/div>\n<\/header>\n<\/code><\/pre>\n
          18.2. \uc601\ud654 \uce74\ub4dc \ucef4\ud3ec\ub10c\ud2b8 \ud328\ud134<\/h3>\n
          function MovieCard({ movie }) {\n  return (\n    <div className="group relative rounded-lg overflow-hidden cursor-pointer\n                    transition-transform duration-300 hover:scale-105\n                    shadow-lg hover:shadow-yellow-400\/30">\n      {\/* \ud3ec\uc2a4\ud130 \uc774\ubbf8\uc9c0 *\/}\n      <img\n        src={`https:\/\/image.tmdb.org\/t\/p\/w500${movie.poster_path}`}\n        alt={movie.title}\n        className="w-full aspect-[2\/3] object-cover"\n      \/>\n      {\/* \ud638\ubc84 \uc624\ubc84\ub808\uc774 *\/}\n      <div className="absolute inset-0 bg-black\/70 opacity-0 group-hover:opacity-100\n                      transition-opacity duration-300 flex flex-col justify-end p-4">\n        <h3 className="text-white font-bold text-sm line-clamp-2">{movie.title}<\/h3>\n        <p className="text-yellow-300 text-xs mt-1">\u2b50 {movie.vote_average.toFixed(1)}<\/p>\n      <\/div>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n
          18.3. \uc804\uccb4 \ud398\uc774\uc9c0 \ub808\uc774\uc544\uc6c3<\/h3>\n
          \/\/ App.jsx\n<main className="bg-black text-white min-h-screen pt-16">\n  {\/* bg-black: \uac80\uc740 \ubc30\uacbd *\/}\n  {\/* text-white: \uae30\ubcf8 \ud14d\uc2a4\ud2b8 \ud770\uc0c9 *\/}\n  {\/* min-h-screen: \ucd5c\uc18c \uc804\uccb4 \ub192\uc774 *\/}\n  {\/* pt-16: \uc0c1\ub2e8 64px (fixed \ud5e4\ub354 \ub192\uc774\ub9cc\ud07c) *\/}\n  <Outlet \/>\n<\/main>\n\n\/\/ \ud648 \ud398\uc774\uc9c0\n<section className="container mx-auto px-4 py-8">\n  <h2 className="text-2xl font-bold mb-6 text-yellow-300">\uc778\uae30 \uc601\ud654<\/h2>\n  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">\n    {movies.map(movie => <MovieCard key={movie.id} movie={movie} \/>)}\n  <\/div>\n<\/section>\n<\/code><\/pre>\n
          18.4. \ubc84\ud2bc \uc2a4\ud0c0\uc77c \ud328\ud134<\/h3>\n
          {\/* \uc8fc\uc694 \uc561\uc158 \ubc84\ud2bc *\/}\n<button className="bg-yellow-400 text-black font-bold px-6 py-2 rounded-lg\n                   hover:bg-yellow-300 active:scale-95\n                   transition-all duration-200 cursor-pointer">\n  \uc790\uc138\ud788 \ubcf4\uae30\n<\/button>\n\n{\/* \ubcf4\uc870 \ubc84\ud2bc (\uc544\uc6c3\ub77c\uc778) *\/}\n<button className="border-2 border-white text-white font-semibold px-6 py-2 rounded-lg\n                   hover:bg-white hover:text-black\n                   transition-all duration-200 cursor-pointer">\n  \ubaa9\ub85d \ucd94\uac00\n<\/button>\n<\/code><\/pre>\n
          18.5. \uc601\ud654 \uc0c1\uc138 \ud398\uc774\uc9c0<\/h3>\n
          function MovieDetail({ movie }) {\n  return (\n    <div className="relative min-h-screen bg-black text-white">\n      {\/* \ubc30\uacbd \uc774\ubbf8\uc9c0 *\/}\n      <div className="relative h-[60vh]">\n        <img\n          src={`https:\/\/image.tmdb.org\/t\/p\/original${movie.backdrop_path}`}\n          className="w-full h-full object-cover"\n        \/>\n        <div className="absolute inset-0 bg-gradient-to-t from-black via-black\/40 to-transparent" \/>\n      <\/div>\n\n      {\/* \ucf58\ud150\uce20 *\/}\n      <div className="container mx-auto px-4 -mt-32 relative z-10">\n        <div className="flex flex-col md:flex-row gap-8">\n          <img\n            src={`https:\/\/image.tmdb.org\/t\/p\/w300${movie.poster_path}`}\n            className="w-40 md:w-56 rounded-xl shadow-2xl flex-none mx-auto md:mx-0"\n          \/>\n          <div className="flex-1">\n            <h1 className="text-3xl md:text-5xl font-black">{movie.title}<\/h1>\n            <div className="flex items-center gap-3 mt-3 text-sm text-gray-400">\n              <span className="text-yellow-400 font-bold">\u2b50 {movie.vote_average.toFixed(1)}<\/span>\n              <span>{movie.release_date.slice(0, 4)}<\/span>\n            <\/div>\n            <p className="mt-4 text-gray-300 leading-relaxed max-w-2xl line-clamp-4 md:line-clamp-none">\n              {movie.overview}\n            <\/p>\n            <div className="flex gap-3 mt-6">\n              <button className="bg-yellow-400 text-black font-bold px-6 py-3 rounded-lg\n                                 hover:bg-yellow-300 active:scale-95 transition-all duration-200">\n                \u25b6 \uc7ac\uc0dd\n              <\/button>\n              <button className="border border-white\/40 text-white px-6 py-3 rounded-lg\n                                 hover:bg-white\/10 transition-all duration-200">\n                + \ub0b4 \ubaa9\ub85d\n              <\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  )\n}\n<\/code><\/pre>\n
          \n
          Tip<\/strong>: \ud074\ub798\uc2a4 \uc870\ud569 \ud301<\/strong><\/p>\n
          \ubcf5\uc7a1\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub294 \uad00\uc2ec\uc0ac\ubcc4\ub85c \uc904\uc744 \ub098\ub220 \uc77d\uae30 \uc88b\uac8c \uc791\uc131\ud55c\ub2e4.<\/p>\n
          \ub808\uc774\uc544\uc6c3 \u2192 \ud06c\uae30 \u2192 \uc0c9\uc0c1 \u2192 \uc0c1\ud0dc<\/strong> \uc21c\uc73c\ub85c \ubc30\uce58\ud558\uba74 \uc720\uc9c0\ubcf4\uc218\uac00 \ud3b8\ud558\ub2e4.<\/p>\n<\/blockquote>\n
          \n
          Warning<\/strong>: \uc790\uc8fc \ud558\ub294 \uc2e4\uc218<\/strong><\/p>\n
            \n
          • hover:scale-105<\/code>\ub9cc \uc4f0\uba74 \uc560\ub2c8\uba54\uc774\uc158\uc774 \uc5c6\uc74c \u2192 transition-transform duration-300<\/code> \ud544\uc218<\/li>\n
          • opacity-0 group-hover:opacity-100<\/code>\uc744 \uc4f8 \ub54c \ubd80\ubaa8\uc5d0 group<\/code> \ud074\ub798\uc2a4 \ube60\ub728\ub9ac\uc9c0 \uc54a\uae30<\/li>\n
          • fixed<\/code> \ud5e4\ub354\uac00 \uc788\uc73c\uba74 main\uc5d0 pt-{\ud5e4\ub354\ub192\uc774}<\/code> \ud544\uc218 (\uacb9\uce68 \ubc29\uc9c0)<\/li>\n<\/ul>\n<\/blockquote>\n
            \n
            6. Layout \u2014 \ub808\uc774\uc544\uc6c3 (Display \u00b7 Position)<\/h2>\n
            6.1. Display<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n
            \ud074\ub798\uc2a4<\/th>\nCSS<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
            block<\/code><\/td>\ndisplay: block<\/code><\/td>\n\ube14\ub85d \uc694\uc18c<\/td>\n<\/tr>\n
            inline<\/code><\/td>\ndisplay: inline<\/code><\/td>\n\uc778\ub77c\uc778 \uc694\uc18c<\/td>\n<\/tr>\n
            inline-block<\/code><\/td>\ndisplay: inline-block<\/code><\/td>\n\uc778\ub77c\uc778 \ube14\ub85d<\/td>\n<\/tr>\n
            flex<\/code><\/td>\ndisplay: flex<\/code><\/td>\n\ud50c\ub809\uc2a4 \ucee8\ud14c\uc774\ub108<\/td>\n<\/tr>\n
            inline-flex<\/code><\/td>\ndisplay: inline-flex<\/code><\/td>\n\uc778\ub77c\uc778 \ud50c\ub809\uc2a4<\/td>\n<\/tr>\n
            grid<\/code><\/td>\ndisplay: grid<\/code><\/td>\n\uadf8\ub9ac\ub4dc \ucee8\ud14c\uc774\ub108<\/td>\n<\/tr>\n
            hidden<\/code><\/td>\ndisplay: none<\/code><\/td>\n\uc228\uae40<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
            <div className="block">block \u2014 \ud55c \uc904 \uc804\uccb4\ub97c \ucc28\uc9c0<\/div>\n<span className="inline">inline \u2014 \ub0b4\uc6a9 \ud06c\uae30\ub9cc\ud07c, \uc904\ubc14\uafc8 \uc5c6\uc74c<\/span>\n<span className="inline-block">inline-block \u2014 \uc904\ubc14\uafc8 \uc5c6\uc774 \ub098\ub780\ud788<\/span>\n<div className="hidden">hidden \u2014 \ud654\uba74\uc5d0\uc11c \uc644\uc804\ud788 \uc0ac\ub77c\uc9d0<\/div>\n<\/code><\/pre>\n
            6.2. Position<\/h3>\n\n\n\n\n\n\n\n\n\n
            \ud074\ub798\uc2a4<\/th>\nCSS<\/th>\n<\/tr>\n<\/thead>\n
            static<\/code><\/td>\nposition: static<\/code><\/td>\n<\/tr>\n
            relative<\/code><\/td>\nposition: relative<\/code><\/td>\n<\/tr>\n
            absolute<\/code><\/td>\nposition: absolute<\/code><\/td>\n<\/tr>\n
            fixed<\/code><\/td>\nposition: fixed<\/code><\/td>\n<\/tr>\n
            sticky<\/code><\/td>\nposition: sticky<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
            6.3. \uc704\uce58 \uc9c0\uc815 (inset)<\/h3>\n\n\n\n\n\n\n\n\n\n
            \ud074\ub798\uc2a4<\/th>\n\uc758\ubbf8<\/th>\n<\/tr>\n<\/thead>\n
            top-0<\/code><\/td>\n\uc704\uc5d0\uc11c 0<\/td>\n<\/tr>\n
            left-0<\/code><\/td>\n\uc67c\ucabd\uc5d0\uc11c 0<\/td>\n<\/tr>\n
            inset-0<\/code><\/td>\n\uc0c1\ud558\uc88c\uc6b0 \ubaa8\ub450 0<\/td>\n<\/tr>\n
            inset-x-0<\/code><\/td>\n\uc88c\uc6b0\ub9cc 0<\/td>\n<\/tr>\n
            inset-y-0<\/code><\/td>\n\uc0c1\ud558\ub9cc 0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
            \/\/ 1\ub2e8\uacc4: relative \u2014 \uc790\uc2dd\uc758 \uae30\uc900\uc810 \uc5ed\ud560\n<div className="relative">\n  \uae30\uc900\uc774 \ub418\ub294 \ubd80\ubaa8\n<\/div>\n<\/code><\/pre>\n
            \/\/ 2\ub2e8\uacc4: absolute + top\/left \u2014 \ubd80\ubaa8 \uae30\uc900\uc73c\ub85c \uc704\uce58 \uc9c0\uc815\n<div className="relative">\n  <div className="absolute top-0 left-0">\uc67c\ucabd \uc704\uc5d0 \ubc30\uce58<\/div>\n  <div className="absolute top-0 right-0">\uc624\ub978\ucabd \uc704\uc5d0 \ubc30\uce58<\/div>\n<\/div>\n<\/code><\/pre>\n
            \/\/ 3\ub2e8\uacc4: inset-0 \u2014 \ubd80\ubaa8 \uc804\uccb4\ub97c \uaf49 \ucc44\uc6c0\n<div className="relative">\n  <div className="absolute inset-0">\ubd80\ubaa8 \uc804\uccb4 \ud06c\uae30\ub85c \ucc44\uc6c0<\/div>\n<\/div>\n<\/code><\/pre>\n
            \/\/ 4\ub2e8\uacc4: fixed \u2014 \uc2a4\ud06c\ub864\ud574\ub3c4 \ud654\uba74\uc5d0 \uace0\uc815\n<header className="fixed top-0 left-0">\uc2a4\ud06c\ub864\ud574\ub3c4 \uace0\uc815\ub418\ub294 \ud5e4\ub354<\/header>\n<\/code><\/pre>\n
            \/\/ 5\ub2e8\uacc4: sticky \u2014 \uc2a4\ud06c\ub864 \uc2dc \ud2b9\uc815 \uc704\uce58\uc5d0 \ub2ec\ub77c\ubd99\uc74c\n<h2 className="sticky top-0">\uc2a4\ud06c\ub864\ud558\uba74 \uc0c1\ub2e8\uc5d0 \uace0\uc815\ub418\ub294 \uc81c\ubaa9<\/h2>\n<\/code><\/pre>\n
            6.4. z-index<\/h3>\n
            \/\/ \uc22b\uc790\uac00 \ud074\uc218\ub85d \uc704\uc5d0 \ud45c\uc2dc\ub428\n<div className="z-0">\ub9e8 \uc544\ub798<\/div>\n<div className="z-10">\uadf8 \uc704<\/div>\n<div className="z-50">\uac00\uc7a5 \uc704<\/div>\n<\/code><\/pre>\n
            \n
            \n
            7. Flexbox<\/h2>\n
            \uac00\uc7a5 \ub9ce\uc774 \uc4f0\ub294 \ub808\uc774\uc544\uc6c3 \ubc29\uc2dd. \ubc29\ud5a5, \uc904\ubc14\uafc8, \uc790\uc2dd \ud06c\uae30\ub97c \ud074\ub798\uc2a4 \uc870\ud569\uc73c\ub85c \uc81c\uc5b4\ud55c\ub2e4.<\/p>\n
            7.1. \ubc29\ud5a5 (flex-direction)<\/h3>\n\n\n\n\n\n\n\n\n
            \ud074\ub798\uc2a4<\/th>\nCSS<\/th>\n<\/tr>\n<\/thead>\n
            flex-row<\/code><\/td>\nflex-direction: row<\/code> (\uae30\ubcf8\uac12)<\/td>\n<\/tr>\n
            flex-row-reverse<\/code><\/td>\nflex-direction: row-reverse<\/code><\/td>\n<\/tr>\n
            flex-col<\/code><\/td>\nflex-direction: column<\/code><\/td>\n<\/tr>\n
            flex-col-reverse<\/code><\/td>\nflex-direction: column-reverse<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
            7.2. \uc904\ubc14\uafc8 \u00b7 \uc790\uc2dd \ud06c\uae30<\/h3>\n
            \/* \uc904\ubc14\uafc8 *\/\nflex-wrap      flex-nowrap      flex-wrap-reverse\n\n\/* \uc790\uc2dd \uc694\uc18c \ud06c\uae30 \uc81c\uc5b4 *\/\nflex-1         \/* flex: 1 1 0% \u2014 \uacf5\uac04\uc744 \uade0\ub4f1 \ubd84\ud560 *\/\nflex-auto      \/* flex: 1 1 auto *\/\nflex-none      \/* flex: none \u2014 \ud06c\uae30 \uace0\uc815 *\/\n\n\/* \uac1c\ubcc4 \ud06c\uae30 *\/\ngrow           \/* flex-grow: 1 *\/\ngrow-0         \/* flex-grow: 0 *\/\nshrink         \/* flex-shrink: 1 *\/\nshrink-0       \/* flex-shrink: 0 *\/\n<\/code><\/pre>\n
            \/\/ 1\ub2e8\uacc4: flex \u2014 \uc790\uc2dd\uc744 \uac00\ub85c\ub85c \ub098\uc5f4\n<div className="flex">\n  <div>\uc544\uc774\ud15c 1<\/div>\n  <div>\uc544\uc774\ud15c 2<\/div>\n  <div>\uc544\uc774\ud15c 3<\/div>\n<\/div>\n<\/code><\/pre>\n
            \/\/ 2\ub2e8\uacc4: flex-col \u2014 \uc138\ub85c\ub85c \ub098\uc5f4\n<div className="flex flex-col">\n  <div>\uc704<\/div>\n  <div>\uc911\uac04<\/div>\n  <div>\uc544\ub798<\/div>\n<\/div>\n<\/code><\/pre>\n
            \/\/ 3\ub2e8\uacc4: gap \u2014 \uc790\uc2dd \uc0ac\uc774 \uac04\uaca9\n<div className="flex gap-4">\n  <div>\uc544\uc774\ud15c 1<\/div>\n  <div>\uc544\uc774\ud15c 2<\/div>\n  <div>\uc544\uc774\ud15c 3<\/div>\n<\/div>\n<\/code><\/pre>\n
            \/\/ 4\ub2e8\uacc4: flex-1 \/ flex-none \u2014 \uc790\uc2dd \ud06c\uae30 \uc81c\uc5b4\n<div className="flex">\n  <div className="flex-none">\uace0\uc815 \ud06c\uae30<\/div>\n  <div className="flex-1">\ub0a8\uc740 \uacf5\uac04\uc744 \ubaa8\ub450 \ucc28\uc9c0<\/div>\n<\/div>\n<\/code><\/pre>\n
            \/\/ 5\ub2e8\uacc4: flex-wrap \u2014 \ub118\uce58\uba74 \uc904\ubc14\uafc8\n<div className="flex flex-wrap gap-2">\n  <div>\ud0dc\uadf8 1<\/div>\n  <div>\ud0dc\uadf8 2<\/div>\n  <div>\ud0dc\uadf8 3<\/div>\n  <div>\ud0dc\uadf8 4<\/div>\n  <div>\ud0dc\uadf8 5<\/div>\n<\/div>\n<\/code><\/pre>\n
            7.3. Container<\/h3>\n
            container<\/code>\ub294 \ud654\uba74 \ud06c\uae30\uc5d0 \ub530\ub77c max-width<\/code>\ub97c \uc790\ub3d9\uc73c\ub85c \ub9de\ucdb0\uc8fc\ub294 \ud074\ub798\uc2a4\ub2e4. \ub2e8\ub3c5\uc73c\ub85c\ub294 \uc67c\ucabd \uc815\ub82c\uc774\ubbc0\ub85c, mx-auto<\/code>\ub97c \ud568\uaed8 \uc368\uc11c \uac00\uc6b4\ub370 \uc815\ub82c\ud55c\ub2e4.<\/p>\n\n\n\n\n\n\n\n\n\n\n
            \ube0c\ub808\uc774\ud06c\ud3ec\uc778\ud2b8<\/th>\n\uc801\uc6a9\ub418\ub294 max-width<\/th>\n<\/tr>\n<\/thead>\n
            \uae30\ubcf8 (\ubaa8\ubc14\uc77c)<\/td>\n100%<\/td>\n<\/tr>\n
            sm (640px~)<\/td>\n640px<\/td>\n<\/tr>\n
            md (768px~)<\/td>\n768px<\/td>\n<\/tr>\n
            lg (1024px~)<\/td>\n1024px<\/td>\n<\/tr>\n
            xl (1280px~)<\/td>\n1280px<\/td>\n<\/tr>\n
            2xl (1536px~)<\/td>\n1536px<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
            \/\/ 1\ub2e8\uacc4: container \uae30\ubcf8 \u2014 \ubc18\uc751\ud615 max-width \uc790\ub3d9 \uc801\uc6a9\n<div className="container">\ucf58\ud150\uce20<\/div>\n<\/code><\/pre>\n
            \/\/ 2\ub2e8\uacc4: mx-auto \ucd94\uac00 \u2014 \uac00\uc6b4\ub370 \uc815\ub82c\n<div className="container mx-auto">\ucf58\ud150\uce20<\/div>\n<\/code><\/pre>\n
            \/\/ 3\ub2e8\uacc4: \uc2e4\uc804 \u2014 \ud398\uc774\uc9c0 \uc804\uccb4 \ub808\uc774\uc544\uc6c3\uc5d0 \uc801\uc6a9\n<main>\n  <section className="container mx-auto">\n    <h2>\uc778\uae30 \uc601\ud654<\/h2>\n    ...\n  <\/section>\n\n  <section className="container mx-auto">\n    <h2>\ucd5c\uc2e0 \uc601\ud654<\/h2>\n    ...\n  <\/section>\n<\/main>\n<\/code><\/pre>\n
            \n
            \n
            8. Grid<\/h2>\n
            2\ucc28\uc6d0 \ub808\uc774\uc544\uc6c3. \uc601\ud654 \uce74\ub4dc \ubaa9\ub85d\ucc98\ub7fc \uc5f4\uc744 \uace0\uc815\ud558\uac70\ub098 \ubc18\uc751\ud615\uc73c\ub85c \ubc30\uce58\ud560 \ub54c \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n
            8.1. \uc5f4(Column) \uc815\uc758<\/h3>\n\n\n\n\n\n\n\n\n
            \ud074\ub798\uc2a4<\/th>\nCSS<\/th>\n<\/tr>\n<\/thead>\n
            grid-cols-1<\/code><\/td>\ngrid-template-columns: repeat(1, 1fr)<\/code><\/td>\n<\/tr>\n
            grid-cols-2<\/code> ~ 12<\/code><\/td>\n2~12 \ub4f1\ubd84<\/td>\n<\/tr>\n
            grid-cols-none<\/code><\/td>\n\uceec\ub7fc \uc815\uc758 \uc5c6\uc74c<\/td>\n<\/tr>\n
            grid-cols-[200px_1fr]<\/code><\/td>\n\uc784\uc758\uac12 \uc9c0\uc815<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
            8.2. \uac04\uaca9<\/h3>\n
            gap-4          \/* row-gap + column-gap: 1rem *\/\ngap-x-6        \/* column-gap: 1.5rem *\/\ngap-y-4        \/* row-gap: 1rem *\/\n<\/code><\/pre>\n
            8.3. \uc790\uc2dd \uc694\uc18c \ubcd1\ud569 (span)<\/h3>\n
            col-span-2     \/* \uc5f4 2\uce78 \ucc28\uc9c0 *\/\ncol-span-full  \/* \uc804\uccb4 \uc5f4 \ucc28\uc9c0 *\/\nrow-span-2     \/* \ud589 2\uce78 \ucc28\uc9c0 *\/\n<\/code><\/pre>\n
            \/\/ 1\ub2e8\uacc4: grid + grid-cols \u2014 \uc5f4 \uac1c\uc218 \uc9c0\uc815\n<div className="grid grid-cols-3">\n  <div>1<\/div>\n  <div>2<\/div>\n  <div>3<\/div>\n  <div>4<\/div>\n  <div>5<\/div>\n  <div>6<\/div>\n<\/div>\n<\/code><\/pre>\n
            \/\/ 2\ub2e8\uacc4: gap \u2014 \uc140 \uc0ac\uc774 \uac04\uaca9 \ucd94\uac00\n<div className="grid grid-cols-3 gap-4">\n  <div>1<\/div>\n  <div>2<\/div>\n  <div>3<\/div>\n<\/div>\n<\/code><\/pre>\n
            \/\/ 3\ub2e8\uacc4: col-span \u2014 \ud2b9\uc815 \uc140\uc774 \uc5ec\ub7ec \uce78\uc744 \ucc28\uc9c0\n<div className="grid grid-cols-3 gap-4">\n  <div className="col-span-2">\ub113\uc740 \uc140 (2\uce78)<\/div>\n  <div>1\uce78<\/div>\n  <div>1\uce78<\/div>\n  <div className="col-span-full">\uc804\uccb4 \ub108\ube44 \uc140<\/div>\n<\/div>\n<\/code><\/pre>\n
            \/\/ 4\ub2e8\uacc4: \ubc18\uc751\ud615 \u2014 \ud654\uba74 \ud06c\uae30\uc5d0 \ub530\ub77c \uc5f4 \uc218 \ubcc0\uacbd\n<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">\n  {movies.map(movie => (\n    <MovieCard key={movie.id} movie={movie} \/>\n  ))}\n<\/div>\n<\/code><\/pre>\n
            \n
            \n
            9. Alignment \u2014 \uc815\ub82c (Justify \u00b7 Align)<\/h2>\n
            Flexbox\uc640 Grid\uc5d0\uc11c \uc544\uc774\ud15c\uc744 \uc815\ub82c\ud558\ub294 \uc720\ud2f8\ub9ac\ud2f0\uc774\ub2e4.<\/p>\n
            9.1. \uc8fc\ucd95 \uc815\ub82c (justify-content)<\/h3>\n\n\n\n\n\n\n\n\n\n\n
            \ud074\ub798\uc2a4<\/th>\nCSS<\/th>\n<\/tr>\n<\/thead>\n
            justify-start<\/code><\/td>\njustify-content: flex-start<\/code><\/td>\n<\/tr>\n
            justify-center<\/code><\/td>\njustify-content: center<\/code><\/td>\n<\/tr>\n
            justify-end<\/code><\/td>\njustify-content: flex-end<\/code><\/td>\n<\/tr>\n
            justify-between<\/code><\/td>\njustify-content: space-between<\/code><\/td>\n<\/tr>\n
            justify-around<\/code><\/td>\njustify-content: space-around<\/code><\/td>\n<\/tr>\n
            justify-evenly<\/code><\/td>\njustify-content: space-evenly<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
            9.2. \uad50\ucc28\ucd95 \uc815\ub82c (align-items)<\/h3>\n\n\n\n\n\n\n\n\n\n
            \ud074\ub798\uc2a4<\/th>\nCSS<\/th>\n<\/tr>\n<\/thead>\n
            items-start<\/code><\/td>\nalign-items: flex-start<\/code><\/td>\n<\/tr>\n
            items-center<\/code><\/td>\nalign-items: center<\/code><\/td>\n<\/tr>\n
            items-end<\/code><\/td>\nalign-items: flex-end<\/code><\/td>\n<\/tr>\n
            items-stretch<\/code><\/td>\nalign-items: stretch<\/code><\/td>\n<\/tr>\n
            items-baseline<\/code><\/td>\nalign-items: baseline<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
            9.3. Grid \uc815\ub82c<\/h3>\n
            place-items-center    \/* align-items + justify-items: center *\/\nplace-content-center\n<\/code><\/pre>\n
            \/\/ 1\ub2e8\uacc4: justify-center \u2014 \uac00\ub85c \uc911\uc559 \uc815\ub82c\n<div className="flex justify-center">\n  <div>\uac00\uc6b4\ub370 \ubc30\uce58\ub428<\/div>\n<\/div>\n<\/code><\/pre>\n
            \/\/ 2\ub2e8\uacc4: justify-between \u2014 \uc591 \ub05d\uc73c\ub85c \ubc30\uce58\n<div className="flex justify-between">\n  <div>\uc67c\ucabd<\/div>\n  <div>\uc624\ub978\ucabd<\/div>\n<\/div>\n<\/code><\/pre>\n
            \/\/ 3\ub2e8\uacc4: items-center \u2014 \uc138\ub85c \uc911\uc559 \uc815\ub82c\n<div className="flex items-center">\n  <div>\uc138\ub85c \uc911\uc559\uc5d0 \ubc30\uce58\ub428<\/div>\n<\/div>\n<\/code><\/pre>\n
            \/\/ 4\ub2e8\uacc4: justify + items \uc870\ud569 \u2014 \uc644\uc804 \uc911\uc559\n<div className="flex justify-center items-center">\n  <div>\uc815\uc911\uc559\uc5d0 \ubc30\uce58\ub428<\/div>\n<\/div>\n<\/code><\/pre>\n
            \/\/ 5\ub2e8\uacc4: place-items-center \u2014 grid\uc5d0\uc11c \uc140 \uc548 \uc815\uc911\uc559\n<div className="grid grid-cols-3 place-items-center">\n  <div>\u2605<\/div>\n  <div>\u2605<\/div>\n  <div>\u2605<\/div>\n<\/div>\n<\/code><\/pre>\n
            \n
            \n
            10. Spacing \u2014 \uac04\uaca9 (Margin \u00b7 Padding \u00b7 Gap)<\/h2>\n
            \uae30\ubcf8 \ub2e8\uc704: 1 = 4px (0.25rem)<\/code>. 4 = 16px<\/code>, 8 = 32px<\/code>\ucc98\ub7fc 4\ubc30\uc218\ub85c \uacc4\uc0b0\ud55c\ub2e4.<\/p>\n
            10.1. Margin<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n
            \ud074\ub798\uc2a4<\/th>\n\ubc29\ud5a5<\/th>\n\uc608\uc2dc<\/th>\n<\/tr>\n<\/thead>\n
            m-{n}<\/code><\/td>\n\uc804\uccb4<\/td>\nm-4<\/code> \u2192 16px \uc0ac\ubc29<\/td>\n<\/tr>\n
            mx-{n}<\/code><\/td>\n\uc88c\uc6b0<\/td>\nmx-auto<\/code> \u2192 \uac00\uc6b4\ub370 \uc815\ub82c<\/td>\n<\/tr>\n
            my-{n}<\/code><\/td>\n\uc0c1\ud558<\/td>\nmy-8<\/code><\/td>\n<\/tr>\n
            mt-{n}<\/code><\/td>\n\uc704<\/td>\nmt-16<\/code><\/td>\n<\/tr>\n
            mr-{n}<\/code><\/td>\n\uc624\ub978\ucabd<\/td>\n<\/td>\n<\/tr>\n
            mb-{n}<\/code><\/td>\n\uc544\ub798<\/td>\n<\/td>\n<\/tr>\n
            ml-{n}<\/code><\/td>\n\uc67c\ucabd<\/td>\n<\/td>\n<\/tr>\n
            -m-{n}<\/code><\/td>\n\uc74c\uc218 \ub9c8\uc9c4<\/td>\n-mt-4<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
            10.2. Padding (\uac19\uc740 \ud328\ud134)<\/h3>\n
            p-4   px-6   py-3   pt-2   pr-4   pb-6   pl-2\n<\/code><\/pre>\n
            10.3. \uc790\uc8fc \uc4f0\ub294 \uac12 \ucc38\uace0\ud45c<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
            \ud074\ub798\uc2a4 \uc22b\uc790<\/th>\nrem<\/th>\npx<\/th>\n<\/tr>\n<\/thead>\n
            1<\/td>\n0.25rem<\/td>\n4px<\/td>\n<\/tr>\n
            2<\/td>\n0.5rem<\/td>\n8px<\/td>\n<\/tr>\n
            3<\/td>\n0.75rem<\/td>\n12px<\/td>\n<\/tr>\n
            4<\/td>\n1rem<\/td>\n16px<\/td>\n<\/tr>\n
            5<\/td>\n1.25rem<\/td>\n20px<\/td>\n<\/tr>\n
            6<\/td>\n1.5rem<\/td>\n24px<\/td>\n<\/tr>\n
            8<\/td>\n2rem<\/td>\n32px<\/td>\n<\/tr>\n
            10<\/td>\n2.5rem<\/td>\n40px<\/td>\n<\/tr>\n
            12<\/td>\n3rem<\/td>\n48px<\/td>\n<\/tr>\n
            16<\/td>\n4rem<\/td>\n64px<\/td>\n<\/tr>\n
            20<\/td>\n5rem<\/td>\n80px<\/td>\n<\/tr>\n
            24<\/td>\n6rem<\/td>\n96px<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
            \/\/ 1\ub2e8\uacc4: p \u2014 \uc0ac\ubc29 \ud328\ub529\n<div className="p-4">\uc0ac\ubc29 16px \uc5ec\ubc31<\/div>\n<div className="p-8">\uc0ac\ubc29 32px \uc5ec\ubc31<\/div>\n<\/code><\/pre>\n
            \/\/ 2\ub2e8\uacc4: px \/ py \u2014 \ubc29\ud5a5\ubcc4 \ud328\ub529\n<div className="px-6">\uc88c\uc6b0\ub9cc 24px<\/div>\n<div className="py-3">\uc0c1\ud558\ub9cc 12px<\/div>\n<div className="px-6 py-3">\uc88c\uc6b0 24px + \uc0c1\ud558 12px<\/div>\n<\/code><\/pre>\n
            \/\/ 3\ub2e8\uacc4: mt \/ mb \u2014 \uc704\uc544\ub798 \ub9c8\uc9c4\n<div className="mt-8">\uc704\uc5d0 32px \uc5ec\ubc31<\/div>\n<div className="mb-4">\uc544\ub798\uc5d0 16px \uc5ec\ubc31<\/div>\n<\/code><\/pre>\n
            \/\/ 4\ub2e8\uacc4: mx-auto \u2014 \uac00\uc6b4\ub370 \uc815\ub82c\n<div className="mx-auto">\uac00\uc6b4\ub370 \uc815\ub82c<\/div>\n<\/code><\/pre>\n
            \/\/ 5\ub2e8\uacc4: space-y \u2014 \uc790\uc2dd \uc694\uc18c \uc0ac\uc774 \uc138\ub85c \uac04\uaca9\n<div className="space-y-4">\n  <div>\uccab \ubc88\uc9f8 \ud56d\ubaa9<\/div>\n  <div>\ub450 \ubc88\uc9f8 \ud56d\ubaa9<\/div>\n  <div>\uc138 \ubc88\uc9f8 \ud56d\ubaa9<\/div>\n<\/div>\n<\/code><\/pre>\n
            \n
            \n
            11. Effects \u2014 \uadf8\ub9bc\uc790 & \ubd88\ud22c\uba85\ub3c4<\/h2>\n
            11.1. Box Shadow<\/h3>\n
            shadow-sm      \/* \uc791\uc740 \uadf8\ub9bc\uc790 *\/\nshadow         \/* \uae30\ubcf8 \uadf8\ub9bc\uc790 *\/\nshadow-md      \/* \uc911\uac04 \uadf8\ub9bc\uc790 *\/\nshadow-lg      \/* \ud070 \uadf8\ub9bc\uc790 *\/\nshadow-xl      \/* \ub354 \ud070 \uadf8\ub9bc\uc790 *\/\nshadow-2xl     \/* \uac00\uc7a5 \ud070 \uadf8\ub9bc\uc790 *\/\nshadow-none    \/* \uadf8\ub9bc\uc790 \uc81c\uac70 *\/\n\n\/* \uc0c9\uc0c1 \uadf8\ub9bc\uc790 *\/\nshadow-lg shadow-black\/50\n<\/code><\/pre>\n
            11.2. Opacity (\ubd88\ud22c\uba85\ub3c4)<\/h3>\n
            opacity-0         \/* \uc644\uc804 \ud22c\uba85 *\/\nopacity-50        \/* \ubc18\ud22c\uba85 *\/\nopacity-100       \/* \ubd88\ud22c\uba85 *\/\n<\/code><\/pre>\n
            \/\/ 1\ub2e8\uacc4: shadow \u2014 \uadf8\ub9bc\uc790 \ud06c\uae30\n<div className="shadow">\uae30\ubcf8 \uadf8\ub9bc\uc790<\/div>\n<div className="shadow-md">\uc911\uac04 \uadf8\ub9bc\uc790<\/div>\n<div className="shadow-xl">\ud070 \uadf8\ub9bc\uc790<\/div>\n<\/code><\/pre>\n
            \/\/ 2\ub2e8\uacc4: shadow-color \u2014 \uc0c9\uc0c1 \uadf8\ub9bc\uc790\n<div className="shadow-lg shadow-black\/50">\uac80\uc740 \uadf8\ub9bc\uc790<\/div>\n<div className="shadow-lg shadow-yellow-400\/30">\ub178\ub780 \uadf8\ub9bc\uc790<\/div>\n<\/code><\/pre>\n
            \/\/ 3\ub2e8\uacc4: opacity \u2014 \uc694\uc18c \uc804\uccb4 \ud22c\uba85\ub3c4\n<div className="opacity-100">\uc644\uc804 \ubd88\ud22c\uba85<\/div>\n<div className="opacity-50">\ubc18\ud22c\uba85<\/div>\n<div className="opacity-0">\uc644\uc804 \ud22c\uba85 (\uacf5\uac04\uc740 \ucc28\uc9c0)<\/div>\n<\/code><\/pre>\n
            \n
            \n
            12. Filters \u2014 \ud544\ud130 (Blur \u00b7 Backdrop)<\/h2>\n
            blur-none    blur-sm    blur    blur-md    blur-lg    blur-xl\n\n\/* \ubc30\uacbd \ube14\ub7ec (\uc720\ub9ac \ud6a8\uacfc) *\/\nbackdrop-blur-sm    backdrop-blur-md    backdrop-blur-lg\n<\/code><\/pre>\n
            \/\/ 1\ub2e8\uacc4: blur \u2014 \uc694\uc18c \uc790\uccb4\ub97c \ud750\ub9ac\uac8c\n<img className="blur-none" src={img} alt="" \/>\n<img className="blur-sm" src={img} alt="" \/>\n<img className="blur-lg" src={img} alt="" \/>\n<\/code><\/pre>\n
            \/\/ 2\ub2e8\uacc4: backdrop-blur \u2014 \uc694\uc18c \ub4a4 \ubc30\uacbd\uc744 \ud750\ub9ac\uac8c\n<div className="backdrop-blur-sm">\uc57d\ud558\uac8c \ud750\ub9b0 \ubc30\uacbd<\/div>\n<div className="backdrop-blur-md">\uc911\uac04 \ud750\ub9b0 \ubc30\uacbd<\/div>\n<div className="backdrop-blur-lg">\ub9ce\uc774 \ud750\ub9b0 \ubc30\uacbd<\/div>\n<\/code><\/pre>\n
            \/\/ 3\ub2e8\uacc4: backdrop-blur + bg-*\/\ud22c\uba85\ub3c4 \u2014 \uc720\ub9ac \ud6a8\uacfc\n<div className="backdrop-blur-md bg-white\/10">\uc720\ub9ac\ucc98\ub7fc \ubc18\ud22c\uba85\ud55c \uce74\ub4dc<\/div>\n<\/code><\/pre>\n
            \n
            \n
            13. Transitions & Animation \u2014 \ud2b8\ub79c\uc9c0\uc158<\/h2>\n
            transition          \/* all \uc18d\uc131 *\/\ntransition-colors   \/* \uc0c9\uc0c1\ub9cc *\/\ntransition-transform\ntransition-opacity\nduration-150        \/* 150ms *\/\nduration-300        \/* 300ms *\/\nease-in    ease-out    ease-in-out\n<\/code><\/pre>\n
            \/\/ 1\ub2e8\uacc4: transition \u2014 \ubcc0\ud654\ub97c \ubd80\ub4dc\ub7fd\uac8c (hover\uc640 \ud568\uaed8)\n<div className="transition hover:opacity-50">\ud638\ubc84 \uc2dc \uc11c\uc11c\ud788 \ubc18\ud22c\uba85<\/div>\n<\/code><\/pre>\n
            \/\/ 2\ub2e8\uacc4: duration \u2014 \uc560\ub2c8\uba54\uc774\uc158 \uc2dc\uac04\n<div className="transition duration-150 hover:opacity-50">\ube60\ub984 (150ms)<\/div>\n<div className="transition duration-500 hover:opacity-50">\ub290\ub9bc (500ms)<\/div>\n<\/code><\/pre>\n
            \/\/ 3\ub2e8\uacc4: transition-colors \u2014 \uc0c9\uc0c1\ub9cc \uc804\ud658\n<div className="transition-colors duration-200 hover:bg-yellow-400">\n  \ud638\ubc84 \uc2dc \ubc30\uacbd\uc0c9\ub9cc \uc804\ud658\n<\/div>\n<\/code><\/pre>\n
            \/\/ 4\ub2e8\uacc4: transition-transform \u2014 \ud06c\uae30\u00b7\uc704\uce58 \uc804\ud658\n<div className="transition-transform duration-300 hover:scale-105">\n  \ud638\ubc84 \uc2dc \ud06c\uae30\ub9cc \uc804\ud658\n<\/div>\n<\/code><\/pre>\n
            \/\/ 5\ub2e8\uacc4: ease \u2014 \uac00\uc18d\ub3c4 \uace1\uc120\n<div className="transition duration-300 ease-in hover:opacity-0">\ucc9c\ucc9c\ud788 \uc2dc\uc791<\/div>\n<div className="transition duration-300 ease-out hover:opacity-0">\ucc9c\ucc9c\ud788 \ub05d<\/div>\n<div className="transition duration-300 ease-in-out hover:opacity-0">\uc591\ucabd \ucc9c\ucc9c\ud788<\/div>\n<\/code><\/pre>\n
            \n
            \n
            14. Transforms \u2014 \ubcc0\ud615<\/h2>\n
            scale-95    scale-100    scale-105    scale-110\n-translate-y-1    translate-x-2\nrotate-45    rotate-90    rotate-180\n<\/code><\/pre>\n
            \/\/ 1\ub2e8\uacc4: scale \u2014 \ud06c\uae30 \ubcc0\ud615\n<div className="scale-75">75% \ucd95\uc18c<\/div>\n<div className="scale-100">\uae30\ubcf8 \ud06c\uae30<\/div>\n<div className="scale-110">110% \ud655\ub300<\/div>\n<\/code><\/pre>\n
            \/\/ 2\ub2e8\uacc4: translate \u2014 \uc704\uce58 \uc774\ub3d9 (\uacf5\uac04\uc740 \uc720\uc9c0)\n<div className="translate-x-4">\uc624\ub978\ucabd\uc73c\ub85c 16px<\/div>\n<div className="-translate-y-2">\uc704\ub85c 8px<\/div>\n<\/code><\/pre>\n
            \/\/ 3\ub2e8\uacc4: rotate \u2014 \ud68c\uc804\n<div className="rotate-45">45\ub3c4 \ud68c\uc804<\/div>\n<div className="rotate-90">90\ub3c4 \ud68c\uc804<\/div>\n<div className="rotate-180">180\ub3c4 \ud68c\uc804<\/div>\n<\/code><\/pre>\n
            \/\/ 4\ub2e8\uacc4: transition + transform \u2014 \ubd80\ub4dc\ub7ec\uc6b4 \ubcc0\ud615\n<div className="transition-transform duration-300 hover:scale-110">\n  \ud638\ubc84 \uc2dc \uc11c\uc11c\ud788 \ud655\ub300\n<\/div>\n<div className="transition-transform duration-300 hover:-translate-y-1">\n  \ud638\ubc84 \uc2dc \uc11c\uc11c\ud788 \uc704\ub85c \uc774\ub3d9\n<\/div>\n<\/code><\/pre>\n
            \n
            \n
            15. Interactivity \u2014 \uc0c1\ud638\uc791\uc6a9 (State Variants \u00b7 Cursor)<\/h2>\n
            15.1. Cursor<\/h3>\n
            cursor-pointer    cursor-default    cursor-not-allowed    cursor-wait\n<\/code><\/pre>\n
            15.2. \uc8fc\uc694 State Variants<\/h3>\n
            \ud074\ub798\uc2a4 \uc55e\uc5d0 \uc0c1\ud0dc:<\/code>\ub97c \ubd99\uc774\uba74 \ud574\ub2f9 \uc0c1\ud0dc\uc77c \ub54c\ub9cc \uc801\uc6a9\ub41c\ub2e4.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
            Variant<\/th>\n\uc124\uba85<\/th>\n\uc608\uc2dc<\/th>\n<\/tr>\n<\/thead>\n
            hover:<\/code><\/td>\n\ub9c8\uc6b0\uc2a4 \uc62c\ub9bc<\/td>\nhover:bg-yellow-400<\/code><\/td>\n<\/tr>\n
            focus:<\/code><\/td>\n\ud3ec\ucee4\uc2a4<\/td>\nfocus:ring-2<\/code><\/td>\n<\/tr>\n
            active:<\/code><\/td>\n\ud074\ub9ad \uc911<\/td>\nactive:scale-95<\/code><\/td>\n<\/tr>\n
            disabled:<\/code><\/td>\n\ube44\ud65c\uc131\ud654<\/td>\ndisabled:opacity-50<\/code><\/td>\n<\/tr>\n
            checked:<\/code><\/td>\n\uccb4\ud06c\ub428<\/td>\nchecked:bg-blue-600<\/code><\/td>\n<\/tr>\n
            group-hover:<\/code><\/td>\n\ubd80\ubaa8 hover \uc2dc<\/td>\ngroup-hover:opacity-100<\/code><\/td>\n<\/tr>\n
            peer-focus:<\/code><\/td>\n\ud615\uc81c \ud3ec\ucee4\uc2a4 \uc2dc<\/td>\npeer-focus:text-blue-500<\/code><\/td>\n<\/tr>\n
            first:<\/code><\/td>\n\uccab \ubc88\uc9f8 \uc790\uc2dd<\/td>\nfirst:mt-0<\/code><\/td>\n<\/tr>\n
            last:<\/code><\/td>\n\ub9c8\uc9c0\ub9c9 \uc790\uc2dd<\/td>\nlast:mb-0<\/code><\/td>\n<\/tr>\n
            odd:<\/code> \/ even:<\/code><\/td>\n\ud640\uc218\/\uc9dd\uc218<\/td>\nodd:bg-gray-50<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
            \/\/ 1\ub2e8\uacc4: hover: \u2014 \ub9c8\uc6b0\uc2a4\ub97c \uc62c\ub838\uc744 \ub54c\n<div className="hover:opacity-50">\ud638\ubc84 \uc2dc \ubc18\ud22c\uba85<\/div>\n<div className="hover:bg-yellow-400">\ud638\ubc84 \uc2dc \ub178\ub780 \ubc30\uacbd<\/div>\n<\/code><\/pre>\n
            \/\/ 2\ub2e8\uacc4: focus: \u2014 \ud3ec\ucee4\uc2a4 \ubc1b\uc558\uc744 \ub54c (\uc785\ub825 \ud544\ub4dc \ub4f1)\n<input className="focus:outline-none" \/>\n<input className="focus:ring-2 focus:ring-yellow-400" \/>\n<\/code><\/pre>\n
            \/\/ 3\ub2e8\uacc4: active: \u2014 \ud074\ub9ad\ud558\ub294 \uc21c\uac04\n<button className="active:scale-95">\ud074\ub9ad \uc2dc \uc904\uc5b4\ub4e6<\/button>\n<button className="active:opacity-70">\ud074\ub9ad \uc2dc \ubc18\ud22c\uba85<\/button>\n<\/code><\/pre>\n
            \/\/ 4\ub2e8\uacc4: disabled: \u2014 \ube44\ud65c\uc131\ud654 \uc0c1\ud0dc\n<button disabled className="disabled:opacity-50">\ube44\ud65c\uc131 (\ud750\ub9ac\uac8c)<\/button>\n<button disabled className="disabled:cursor-not-allowed">\ube44\ud65c\uc131 (\ucee4\uc11c \uae08\uc9c0)<\/button>\n<\/code><\/pre>\n
            \/\/ 5\ub2e8\uacc4: group-hover: \u2014 \ubd80\ubaa8\uc5d0 hover \uc2dc \uc790\uc2dd\uc5d0 \uc801\uc6a9\n<div className="group">\n  <p className="group-hover:text-yellow-400">\ubd80\ubaa8\uc5d0 \ud638\ubc84\ud558\uba74 \uc0c9\uc0c1 \ubcc0\uacbd<\/p>\n<\/div>\n\n\/\/ \ubd80\ubaa8 hover \uc2dc \uc228\uaca8\uc9c4 \uc624\ubc84\ub808\uc774 \ud45c\uc2dc\n<div className="group relative">\n  <img src={poster} \/>\n  <div className="absolute inset-0 opacity-0 group-hover:opacity-100">\n    \uc624\ubc84\ub808\uc774\n  <\/div>\n<\/div>\n<\/code><\/pre>\n
            \/\/ 6\ub2e8\uacc4: odd: \/ even: \u2014 \ud640\uc9dd \ubc88\uc9f8 \uc2a4\ud0c0\uc77c\n<ul>\n  <li className="odd:bg-gray-900 even:bg-gray-800">\ud56d\ubaa9 1 (\ud640\uc218 \u2192 \uc5b4\ub450\uc6b4)<\/li>\n  <li className="odd:bg-gray-900 even:bg-gray-800">\ud56d\ubaa9 2 (\uc9dd\uc218 \u2192 \ubc1d\uc740)<\/li>\n  <li className="odd:bg-gray-900 even:bg-gray-800">\ud56d\ubaa9 3 (\ud640\uc218 \u2192 \uc5b4\ub450\uc6b4)<\/li>\n<\/ul>\n<\/code><\/pre>\n
            \n
            \n
            16. \ubc18\uc751\ud615 (Breakpoint)<\/h2>\n
            Tailwind\ub294 \ubaa8\ubc14\uc77c \ud37c\uc2a4\ud2b8<\/strong>\uc774\ub2e4. \uae30\ubcf8\uac12\uc774 \ubaa8\ubc14\uc77c\uc774\uace0, \uc811\ub450\uc0ac\ub85c \ub354 \ud070 \ud654\uba74\uc744 \uc9c0\uc815\ud55c\ub2e4.<\/p>\n
            16.1. \uae30\ubcf8 \ube0c\ub808\uc774\ud06c\ud3ec\uc778\ud2b8<\/h3>\n\n\n\n\n\n\n\n\n\n\n
            \uc811\ub450\uc0ac<\/th>\n\ucd5c\uc18c \ub108\ube44<\/th>\n\uae30\uae30<\/th>\n<\/tr>\n<\/thead>\n
            (\uc5c6\uc74c)<\/td>\n0px~<\/td>\n\ubaa8\ubc14\uc77c (\uae30\ubcf8)<\/td>\n<\/tr>\n
            sm:<\/code><\/td>\n640px~<\/td>\n\uc18c\ud615 \ud0dc\ube14\ub9bf<\/td>\n<\/tr>\n
            md:<\/code><\/td>\n768px~<\/td>\n\ud0dc\ube14\ub9bf<\/td>\n<\/tr>\n
            lg:<\/code><\/td>\n1024px~<\/td>\n\ub178\ud2b8\ubd81<\/td>\n<\/tr>\n
            xl:<\/code><\/td>\n1280px~<\/td>\n\ub370\uc2a4\ud06c\ud0d1<\/td>\n<\/tr>\n
            2xl:<\/code><\/td>\n1536px~<\/td>\n\ub300\ud615 \ubaa8\ub2c8\ud130<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
            \/\/ 1\ub2e8\uacc4: \ube0c\ub808\uc774\ud06c\ud3ec\uc778\ud2b8 \ud558\ub098 \u2014 md \uc774\uc0c1\uc5d0\uc11c \uc801\uc6a9\n<p className="text-sm md:text-xl">md \uc774\uc0c1\uc5d0\uc11c \ucee4\uc9d0<\/p>\n<\/code><\/pre>\n
            \/\/ 2\ub2e8\uacc4: \ube0c\ub808\uc774\ud06c\ud3ec\uc778\ud2b8 \ub450 \uac1c \u2014 \ub2e8\uacc4\uc801\uc73c\ub85c \ubcc0\uacbd\n<p className="text-sm md:text-lg lg:text-2xl">\ud654\uba74\uc774 \ucee4\uc9c8\uc218\ub85d \ud14d\uc2a4\ud2b8\ub3c4 \ucee4\uc9d0<\/p>\n<\/code><\/pre>\n
            \/\/ 3\ub2e8\uacc4: hidden \/ block \uc870\ud569 \u2014 \ud2b9\uc815 \ud654\uba74\uc5d0\uc11c \ubcf4\uc774\uae30\/\uc228\uae30\uae30\n<div className="hidden md:block">md \uc774\uc0c1\uc5d0\uc11c\ub9cc \ubcf4\uc784<\/div>\n<div className="block md:hidden">md \ubbf8\ub9cc\uc5d0\uc11c\ub9cc \ubcf4\uc784 (\ubaa8\ubc14\uc77c \uc804\uc6a9)<\/div>\n<\/code><\/pre>\n
            \/\/ 4\ub2e8\uacc4: flex-col \u2192 flex-row \u2014 \ubaa8\ubc14\uc77c: \uc138\ub85c, \ub370\uc2a4\ud06c\ud0d1: \uac00\ub85c\n<div className="flex flex-col md:flex-row">\n  <div>\uccab \ubc88\uc9f8<\/div>\n  <div>\ub450 \ubc88\uc9f8<\/div>\n<\/div>\n<\/code><\/pre>\n
            \/\/ 5\ub2e8\uacc4: grid-cols \ubc18\uc751\ud615 \u2014 \ud654\uba74 \ud06c\uae30\uc5d0 \ub530\ub77c \uc5f4 \uc218 \ubcc0\uacbd\n<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">\n  <div>\uce74\ub4dc 1<\/div>\n  <div>\uce74\ub4dc 2<\/div>\n  <div>\uce74\ub4dc 3<\/div>\n  <div>\uce74\ub4dc 4<\/div>\n<\/div>\n<\/code><\/pre>\n
            \n
            17. Dark Mode<\/h2>\n
            17.1. \uc124\uc815 (media \ubaa8\ub4dc \u2014 OS \uc790\ub3d9)<\/h3>\n
            \/\/ OS \ub2e4\ud06c\ubaa8\ub4dc \uc124\uc815\uc5d0 \ub530\ub77c \uc790\ub3d9 \uc804\ud658\n<div className="bg-white dark:bg-gray-900">\n  \ub77c\uc774\ud2b8: \ud770 \ubc30\uacbd \/ \ub2e4\ud06c: \uc5b4\ub450\uc6b4 \ubc30\uacbd\n<\/div>\n<\/code><\/pre>\n
            17.2. \uc218\ub3d9 \ud1a0\uae00 \ubc29\uc2dd (class \ubaa8\ub4dc)<\/h3>\n
            \/* src\/index.css *\/\n@import "tailwindcss";\n\n@custom-variant dark (&:where(.dark, .dark *));\n<\/code><\/pre>\n
            \/\/ HTML \ub8e8\ud2b8\uc5d0 dark \ud074\ub798\uc2a4 \ucd94\uac00\/\uc81c\uac70\ub85c \uc81c\uc5b4\ndocument.documentElement.classList.toggle('dark')\n<\/code><\/pre>\n
            \/\/ 1\ub2e8\uacc4: dark: \ud14d\uc2a4\ud2b8 \uc0c9\uc0c1\n<p className="text-black dark:text-white">\ub77c\uc774\ud2b8: \uac80\uc740\uc0c9 \/ \ub2e4\ud06c: \ud770\uc0c9<\/p>\n<p className="text-gray-700 dark:text-gray-300">\ub77c\uc774\ud2b8: \uc9c4\ud55c \ud68c\uc0c9 \/ \ub2e4\ud06c: \ubc1d\uc740 \ud68c\uc0c9<\/p>\n<\/code><\/pre>\n
            \/\/ 2\ub2e8\uacc4: dark: \ubc30\uacbd \uc0c9\uc0c1\n<div className="bg-white dark:bg-gray-900">\ub77c\uc774\ud2b8: \ud770 \ubc30\uacbd \/ \ub2e4\ud06c: \uc5b4\ub450\uc6b4 \ubc30\uacbd<\/div>\n<div className="bg-gray-100 dark:bg-gray-800">\ub77c\uc774\ud2b8: \ubc1d\uc740 \ud68c\uc0c9 \/ \ub2e4\ud06c: \uc9d9\uc740 \ud68c\uc0c9<\/div>\n<\/code><\/pre>\n
            \/\/ 3\ub2e8\uacc4: \ud14d\uc2a4\ud2b8 + \ubc30\uacbd \uc870\ud569\n<div className="bg-white dark:bg-gray-900 text-black dark:text-white">\n  \ub2e4\ud06c\ubaa8\ub4dc \ub300\uc751 \uce74\ub4dc\n<\/div>\n<\/code><\/pre>\n
            \/\/ 4\ub2e8\uacc4: \ud1a0\uae00 \ubc84\ud2bc\uc73c\ub85c \uc9c1\uc811 \uc81c\uc5b4\nfunction DarkToggle() {\n  const [dark, setDark] = useState(false)\n\n  const toggle = () => {\n    setDark(prev => !prev)\n    document.documentElement.classList.toggle('dark')\n  }\n\n  return (\n    <button onClick={toggle}>\n      {dark ? '\ud83c\udf19 \ub2e4\ud06c' : '\u2600\ufe0f \ub77c\uc774\ud2b8'}\n    <\/button>\n  )\n}\n<\/code><\/pre>\n
            18.1. Header \ubd84\uc11d<\/h3>\n
            <header className="fixed top-0 left-0 w-full py-4 px-2 bg-black\/90 z-50">\n  {\/* fixed: \uc2a4\ud06c\ub864\ud574\ub3c4 \uace0\uc815 *\/}\n  {\/* top-0 left-0: \ud654\uba74 \ucd5c\uc0c1\ub2e8 \uc88c\uce21 *\/}\n  {\/* w-full: \uc804\uccb4 \ub108\ube44 *\/}\n  {\/* py-4 px-2: \uc0c1\ud558 16px, \uc88c\uc6b0 8px \ud328\ub529 *\/}\n  {\/* bg-black\/90: \uac80\uc740\uc0c9 \ubc30\uacbd 90% \ubd88\ud22c\uba85 *\/}\n  {\/* z-50: \ub2e4\ub978 \uc694\uc18c \uc704\uc5d0 \ud45c\uc2dc *\/}\n  <div className="container mx-auto">\n    <Link to="\/">\n      <h1 className="text-3xl text-yellow-300 font-bold">\n        {\/* text-3xl: 30px \ud14d\uc2a4\ud2b8 *\/}\n        {\/* text-yellow-300: \uc5f0\ud55c \ub178\ub780\uc0c9 *\/}\n        {\/* font-bold: \uad75\uc740 \uae00\uc528 *\/}\n        GOFLIX\n      <\/h1>\n    <\/Link>\n  <\/div>\n<\/header>\n<\/code><\/pre>\n
            18.2. \uc601\ud654 \uce74\ub4dc \ucef4\ud3ec\ub10c\ud2b8 \ud328\ud134<\/h3>\n
            function MovieCard({ movie }) {\n  return (\n    <div className="group relative rounded-lg overflow-hidden cursor-pointer\n                    transition-transform duration-300 hover:scale-105\n                    shadow-lg hover:shadow-yellow-400\/30">\n      {\/* \ud3ec\uc2a4\ud130 \uc774\ubbf8\uc9c0 *\/}\n      <img\n        src={`https:\/\/image.tmdb.org\/t\/p\/w500${movie.poster_path}`}\n        alt={movie.title}\n        className="w-full aspect-[2\/3] object-cover"\n      \/>\n      {\/* \ud638\ubc84 \uc624\ubc84\ub808\uc774 *\/}\n      <div className="absolute inset-0 bg-black\/70 opacity-0 group-hover:opacity-100\n                      transition-opacity duration-300 flex flex-col justify-end p-4">\n        <h3 className="text-white font-bold text-sm line-clamp-2">{movie.title}<\/h3>\n        <p className="text-yellow-300 text-xs mt-1">\u2b50 {movie.vote_average.toFixed(1)}<\/p>\n      <\/div>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n
            18.3. \uc804\uccb4 \ud398\uc774\uc9c0 \ub808\uc774\uc544\uc6c3<\/h3>\n
            \/\/ App.jsx\n<main className="bg-black text-white min-h-screen pt-16">\n  {\/* bg-black: \uac80\uc740 \ubc30\uacbd *\/}\n  {\/* text-white: \uae30\ubcf8 \ud14d\uc2a4\ud2b8 \ud770\uc0c9 *\/}\n  {\/* min-h-screen: \ucd5c\uc18c \uc804\uccb4 \ub192\uc774 *\/}\n  {\/* pt-16: \uc0c1\ub2e8 64px (fixed \ud5e4\ub354 \ub192\uc774\ub9cc\ud07c) *\/}\n  <Outlet \/>\n<\/main>\n\n\/\/ \ud648 \ud398\uc774\uc9c0\n<section className="container mx-auto px-4 py-8">\n  <h2 className="text-2xl font-bold mb-6 text-yellow-300">\uc778\uae30 \uc601\ud654<\/h2>\n  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">\n    {movies.map(movie => <MovieCard key={movie.id} movie={movie} \/>)}\n  <\/div>\n<\/section>\n<\/code><\/pre>\n
            18.4. \ubc84\ud2bc \uc2a4\ud0c0\uc77c \ud328\ud134<\/h3>\n
            {\/* \uc8fc\uc694 \uc561\uc158 \ubc84\ud2bc *\/}\n<button className="bg-yellow-400 text-black font-bold px-6 py-2 rounded-lg\n                   hover:bg-yellow-300 active:scale-95\n                   transition-all duration-200 cursor-pointer">\n  \uc790\uc138\ud788 \ubcf4\uae30\n<\/button>\n\n{\/* \ubcf4\uc870 \ubc84\ud2bc (\uc544\uc6c3\ub77c\uc778) *\/}\n<button className="border-2 border-white text-white font-semibold px-6 py-2 rounded-lg\n                   hover:bg-white hover:text-black\n                   transition-all duration-200 cursor-pointer">\n  \ubaa9\ub85d \ucd94\uac00\n<\/button>\n<\/code><\/pre>\n
            18.5. \uc601\ud654 \uc0c1\uc138 \ud398\uc774\uc9c0<\/h3>\n
            function MovieDetail({ movie }) {\n  return (\n    <div className="relative min-h-screen bg-black text-white">\n      {\/* \ubc30\uacbd \uc774\ubbf8\uc9c0 *\/}\n      <div className="relative h-[60vh]">\n        <img\n          src={`https:\/\/image.tmdb.org\/t\/p\/original${movie.backdrop_path}`}\n          className="w-full h-full object-cover"\n        \/>\n        <div className="absolute inset-0 bg-gradient-to-t from-black via-black\/40 to-transparent" \/>\n      <\/div>\n\n      {\/* \ucf58\ud150\uce20 *\/}\n      <div className="container mx-auto px-4 -mt-32 relative z-10">\n        <div className="flex flex-col md:flex-row gap-8">\n          <img\n            src={`https:\/\/image.tmdb.org\/t\/p\/w300${movie.poster_path}`}\n            className="w-40 md:w-56 rounded-xl shadow-2xl flex-none mx-auto md:mx-0"\n          \/>\n          <div className="flex-1">\n            <h1 className="text-3xl md:text-5xl font-black">{movie.title}<\/h1>\n            <div className="flex items-center gap-3 mt-3 text-sm text-gray-400">\n              <span className="text-yellow-400 font-bold">\u2b50 {movie.vote_average.toFixed(1)}<\/span>\n              <span>{movie.release_date.slice(0, 4)}<\/span>\n            <\/div>\n            <p className="mt-4 text-gray-300 leading-relaxed max-w-2xl line-clamp-4 md:line-clamp-none">\n              {movie.overview}\n            <\/p>\n            <div className="flex gap-3 mt-6">\n              <button className="bg-yellow-400 text-black font-bold px-6 py-3 rounded-lg\n                                 hover:bg-yellow-300 active:scale-95 transition-all duration-200">\n                \u25b6 \uc7ac\uc0dd\n              <\/button>\n              <button className="border border-white\/40 text-white px-6 py-3 rounded-lg\n                                 hover:bg-white\/10 transition-all duration-200">\n                + \ub0b4 \ubaa9\ub85d\n              <\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  )\n}\n<\/code><\/pre>\n
            \n
            \n
            Tip<\/strong>: \ud074\ub798\uc2a4 \uc870\ud569 \ud301<\/strong><\/p>\n
            \ubcf5\uc7a1\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub294 \uad00\uc2ec\uc0ac\ubcc4\ub85c \uc904\uc744 \ub098\ub220 \uc77d\uae30 \uc88b\uac8c \uc791\uc131\ud55c\ub2e4.<\/p>\n
            \ub808\uc774\uc544\uc6c3 \u2192 \ud06c\uae30 \u2192 \uc0c9\uc0c1 \u2192 \uc0c1\ud0dc<\/strong> \uc21c\uc73c\ub85c \ubc30\uce58\ud558\uba74 \uc720\uc9c0\ubcf4\uc218\uac00 \ud3b8\ud558\ub2e4.<\/p>\n<\/blockquote>\n
            \n
            Warning<\/strong>: \uc790\uc8fc \ud558\ub294 \uc2e4\uc218<\/strong><\/p>\n