{"id":12394615,"date":"2026-04-28T05:47:07","date_gmt":"2026-04-27T21:47:07","guid":{"rendered":"https:\/\/www.likacloud.com\/knowledge\/%e5%a6%82%e4%bd%95%e5%85%a5%e9%97%a8-tailwind-css%ef%bc%9a%e4%bb%8e%e9%9b%b6%e5%bc%80%e5%a7%8b%e6%9e%84%e5%bb%ba%e7%8e%b0%e4%bb%a3%e5%8c%96%e5%93%8d%e5%ba%94%e5%bc%8f%e7%95%8c%e9%9d%a2\/"},"modified":"2026-04-28T06:10:52","modified_gmt":"2026-04-27T22:10:52","slug":"tailwind-css-beginners-guide-responsive-ui","status":"publish","type":"knowledge_post","link":"https:\/\/www.likacloud.com\/ko\/knowledge\/website-building\/tailwind-css-beginners-guide-responsive-ui\/","title":{"rendered":"Tailwind CSS\ub85c \uc785\ubb38\ud558\ub294 \ubc29\ubc95: \uc81c\ub85c\uc5d0\uc11c \uc2dc\uc791\ud558\uc5ec \ud604\ub300\uc801\uc774\uace0 \ubc18\uc751\ud615\uc801\uc778 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ucd95\ud558\ub294 \ubc29\ubc95"},"content":{"rendered":"

Tailwind CSS\ub294 \ubb34\uc5c7\uc774\uba70 \uadf8 \uc8fc\uc694 \uac15\uc810\uc740 \ubb34\uc5c7\uc778\uac00?<\/h2>\n\n\n\n

Tailwind CSS\ub294 \uae30\ub2a5\uc131\uc744 \ucd5c\uc6b0\uc120\uc73c\ub85c \ud558\ub294 \uc2e4\uc6a9\uc801\uc778 CSS \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4. Bootstrap\uc774\ub098 Material-UI\uc640 \uac19\uc774 \ubbf8\ub9ac \uc815\uc758\ub41c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc81c\uacf5\ud558\ub294 \ud504\ub808\uc784\uc6cc\ud06c\ub4e4\uacfc\ub294 \ub2ec\ub9ac, Tailwind CSS\ub294 \ub2e4\uc591\ud55c \uc138\ubc00\ud55c \uc218\uc900\uc758 CSS \ud074\ub798\uc2a4\ub4e4\uc744 \uc81c\uacf5\ud558\uc5ec HTML \ub0b4\uc5d0\uc11c \uc774\ub7ec\ud55c \ud074\ub798\uc2a4\ub4e4\uc744 \uc9c1\uc811 \uc870\ud569\ud568\uc73c\ub85c\uc368 \uc6d0\ud558\ub294 \ub514\uc790\uc778\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4. \uc774 \ud504\ub808\uc784\uc6cc\ud06c\uc758 \ud575\uc2ec \ucca0\ud559\uc740 \u201c\uc2e4\uc6a9\uc131 \uc6b0\uc120\u201d\uc774\uba70, \uc774\ub294 HTML \ud30c\uc77c\uc744 \ubc97\uc5b4\ub098\uc9c0 \uc54a\uace0\ub3c4 \uc0ac\uc6a9\uc790 \uc815\uc758 CSS\ub97c \uc791\uc131\ud560 \ud544\uc694 \uc5c6\uc774 \ubcf5\uc7a1\ud55c \uc2a4\ud0c0\uc77c\uc744 \uad6c\ud604\ud560 \uc218 \uc788\ub2e4\ub294 \uac83\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

\uadf8 \ud575\uc2ec\uc801\uc778 \uc7a5\uc810\uc740 \uc5ec\ub7ec \uac00\uc9c0 \uce21\uba74\uc5d0\uc11c \ub098\ud0c0\ub0a9\ub2c8\ub2e4. \uccab\uc9f8\ub85c, \uac1c\ubc1c \uc18d\ub3c4\uac00 \ud06c\uac8c \ud5a5\uc0c1\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uae30\uc874\uc758 \ub3c4\uad6c\ub4e4\uc744 \uc870\ud569\ud568\uc73c\ub85c\uc368 \ud504\ub85c\ud1a0\ud0c0\uc785 \uc124\uacc4\uc640 \ub808\uc774\uc544\uc6c3\uc744 \ube60\ub974\uac8c \uad6c\ud604\ud560 \uc218 \uc788\uc73c\uba70, CSS\uc640 HTML \ud30c\uc77c \uc0ac\uc774\ub97c \ubc18\ubcf5\uc801\uc73c\ub85c \uc804\ud658\ud560 \ud544\uc694\uac00 \uc5c6\uc2b5\ub2c8\ub2e4. \ub458\uc9f8\ub85c, \ub514\uc790\uc778\uc758 \uc644\uc804\ud55c \uc81c\uc5b4\uac00 \uac00\ub2a5\ud569\ub2c8\ub2e4. \ub354 \uc774\uc0c1 \ud2b9\uc815 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uae30\ubcf8 \uc2a4\ud0c0\uc77c\uc5d0 \uc81c\ud55c\ubc1b\uc9c0 \uc54a\uace0, \ud53d\uc140 \ub2e8\uc704\uae4c\uc9c0 \uc815\ubc00\ud558\uac8c \ub514\uc790\uc778\uc744 \uad6c\ud604\ud558\uc5ec \ub3c5\ud2b9\ud55c \uc778\ud130\ud398\uc774\uc2a4\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub9c8\uc9c0\ub9c9\uc73c\ub85c, \uc774 \ub3c4\uad6c\ub294\u2026 tailwind.config.js<\/code> \uad6c\uc131 \ud30c\uc77c\uc740 \uac15\ub825\ud55c \ub9de\ucda4 \uc124\uc815 \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc790\uc2e0\ub9cc\uc758 \uc0c9\uc0c1, \uac04\uaca9, \uc911\ub2e8\uc810 \ub4f1 \ub514\uc790\uc778 \uc694\uc18c\ub97c \uc27d\uac8c \uc815\uc758\ud560 \uc218 \uc788\uc5b4 \ud504\ub85c\uc81d\ud2b8 \uc804\ubc18\uc758 \uc2a4\ud0c0\uc77c \uc77c\uad00\uc131\uc744 \ud655\ubcf4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

\uccab \ubc88\uc9f8 Tailwind CSS \ud504\ub85c\uc81d\ud2b8\ub97c \uad6c\ucd95\ud574 \ubcf4\uc138\uc694.<\/h2>\n\n\n\n

Tailwind CSS\ub97c \uc0ac\uc6a9\ud558\uae30 \uc2dc\uc791\ud558\ub294 \ubc29\ubc95\uc740 \uc5ec\ub7ec \uac00\uc9c0\uac00 \uc788\uc9c0\ub9cc, \uac00\uc7a5 \uac04\ub2e8\ud558\uace0 \ube60\ub978 \ubc29\ubc95\uc740 CDN\uc744 \ud1b5\ud574 \uccb4\ud5d8\ud574 \ubcf4\ub294 \uac83\uc785\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc2e4\uc81c \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 \ubaa8\ub4e0 \uae30\ub2a5\uc744 \ud65c\uc6a9\ud558\uace0 \ucd5c\uc801\ud654\ub41c CSS \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uae30 \uc704\ud574 \ube4c\ub4dc \ud504\ub85c\uc138\uc2a4\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \uac15\ub825\ud788 \uad8c\uc7a5\ud569\ub2c8\ub2e4.<\/p>\n

\ucd94\ucc9c \uc77d\uae30 Tailwind CSS \uc785\ubb38 \uac00\uc774\ub4dc: \uc81c\ub85c\uc5d0\uc11c \uc2dc\uc791\ud558\uc5ec \ud604\ub300\uc801\uc778 \ubc18\uc751\ud615 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ucd95\ud558\ub294 \ubc29\ubc95<\/a>\u3002<\/p>\n\n\n\n\n

\uac00\uc7a5 \uc77c\ubc18\uc801\uc778 \ubc29\ubc95\uc740 \uc774\ub97c PostCSS \ud50c\ub7ec\uadf8\uc778\uc73c\ub85c \uc124\uce58\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \uba3c\uc800, \ud504\ub85c\uc81d\ud2b8\ub97c \ucd08\uae30\ud654\ud558\uace0 \ud544\uc694\ud55c \uc758\uc874\uc131\uc744 \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4. npm \ub610\ub294 yarn\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc124\uce58\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. tailwindcss<\/code>\u3001postcss<\/code> \uadf8\ub9ac\uace0 autoprefixer<\/code>\uadf8\ub7f0 \ub2e4\uc74c, \uc0ac\uc6a9\ud558\uc138\uc694. npx tailwindcss init<\/code> \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud558\uc5ec \uae30\ubcf8 \uc124\uc815 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uc138\uc694. tailwind.config.js<\/code>\u3002<\/p>\n\n

\r\n\t\r\n\t\t\r\n\t\r\n\t
\r\n\t\t
\r\n\t\t\t\r\n\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\uc6cc\ub4dc\ud504\ub808\uc2a4\ub2f7\ucef4\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t\t\uc6cc\ub4dc\ud504\ub808\uc2a4\ub2f7\ucef4 \uc6f9\uc0ac\uc774\ud2b8 \ube4c\ub354 \ub3c4\uc6b0\ubbf8<\/strong>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t99.999% \uac00\uc6a9\uc131 + \uc9c0\uc5ed \uac04 \uc7ac\ud574 \ubcf5\uad6c, \uc5f0\uc911\ubb34\ud734 \uc9c0\uc6d0, \ube14\ub85c\uadf8 \ud328\ud0a4\uc9c0 \uad6c\ub9e4 \uc2dc \ubb34\ub8cc AI \ube4c\ub4dc \uc0ac\uc774\ud2b8 \uc81c\uacf5<\/span>\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t \r\n\t\t\t
\r\n\t\t\t\t\t\t\t\t
1\ub144\uac04 \ubb34\ub8cc \ub3c4\uba54\uc778 \uc774\ub984<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\uc6cc\ub4dc\ud504\ub808\uc2a4\ub2f7\ucef4 \uc6f9\uc0ac\uc774\ud2b8 \ube4c\ub354 \ub3c4\uc6b0\ubbf8 \u2192 \ubc29\ubb38\ud558\uae30<\/a>\r\n\t\t\t\t\t\t\t<\/div> \r\n\t\t<\/div>\r\n\t<\/div>\r\n\t\t\r\n\t\r\n\t
\r\n\t\t
\r\n\t\t\t\r\n\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\uc6b8\ud0c0\ud638\uc2a4\ud2b8\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t\t\uc6b8\ud0c0\ud638\uc2a4\ud2b8 \uc6f9\uc0ac\uc774\ud2b8 \ube4c\ub354 \ub3c4\uc6b0\ubbf8<\/strong>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t\uac80\uc0c9 \ub178\ucd9c\uc744 \uc704\ud574 \uc6f9\uc0ac\uc774\ud2b8\ub97c \ucd5c\uc801\ud654\ud558\ub294 \ub370 \ud544\uc694\ud55c SEO \uae30\ub2a5\uc744 \uac16\ucd98 900\uac1c \uc774\uc0c1\uc758 \ubb34\ub8cc \ub9de\ucda4\ud615 \ud15c\ud50c\ub9bf\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/span>\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t \r\n\t\t\t
\r\n\t\t\t\t\t\t\t\t
Offer 40%<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\uc6b8\ud0c0\ud638\uc2a4\ud2b8 \uc6f9\uc0ac\uc774\ud2b8 \ube4c\ub354 \ub3c4\uc6b0\ubbf8 \ubc29\ubb38 \u2192<\/a>\r\n\t\t\t\t\t\t\t<\/div> \r\n\t\t<\/div>\r\n\t<\/div>\r\n\t\t\r\n<\/div>\r\n\r\n\r\n\n\n\n\n\n\n\n

\ub2e4\uc74c\uc73c\ub85c, PostCSS \uc124\uc815 \ud30c\uc77c\uc744 \uc0dd\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. postcss.config.js<\/code>\uadf8\ub7f0 \ub2e4\uc74c Tailwind CSS\uc640 Autoprefixer\ub97c \ud50c\ub7ec\uadf8\uc778\uc73c\ub85c \ucd94\uac00\ud558\uc138\uc694. \uadf8 \ud6c4, \uc8fc CSS \ud30c\uc77c(\uc608: `main.css`)\uc744 \uc0dd\uc131\ud558\uc138\uc694. src\/input.css<\/code>), \uadf8\ub9ac\uace0 \uc0ac\uc6a9\ud558\uc138\uc694. @tailwind<\/code> \uc774 \uc9c0\uce68\uc740 Tailwind CSS\uc758 \uac01 \uad6c\uc131 \uc694\uc18c\ub97c \ud3ec\ud568\ud558\ub294 \ubc29\ubc95\uc744 \uc124\uba85\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

\/* src\/input.css *\/\n@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n\n\n\n
\ub9c8\uc9c0\ub9c9\uc73c\ub85c, Vite, Webpack \ub610\ub294 Tailwind CLI\ub97c \uc0ac\uc6a9\ud558\uc5ec CSS \ud30c\uc77c\uc744 \ucc98\ub9ac\ud558\ub3c4\ub85d \ube4c\ub4dc \ud504\ub85c\uc138\uc2a4\ub97c \uc124\uc815\ud558\uc138\uc694. \uc774\ub97c \ud1b5\ud574 CSS \ud30c\uc77c\uc774 \ucef4\ud30c\uc77c\ub418\uc5b4 \ucd5c\uc885 \uc704\uce58\uc5d0 \ucd9c\ub825\ub429\ub2c8\ub2e4. HTML \ud30c\uc77c\uc5d0 \ucd5c\uc885\uc801\uc73c\ub85c \uc0dd\uc131\ub41c CSS \ud30c\uc77c\uc744 \ud3ec\ud568\uc2dc\ud0a4\uba74 Tailwind\uc758 \ub3c4\uad6c \ud074\ub798\uc2a4\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uac8c \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n
\ud575\uc2ec \ub3c4\uad6c\ub4e4\uacfc \ubc18\uc751\ud615 \ub514\uc790\uc778\uc744 \uc219\ub2ec\ud558\uc138\uc694.<\/h2>\n\n\n\n
Tailwind CSS\uc758 \ub3c4\uad6c \ud074\ub798\uc2a4\ub4e4\uc740 CSS\uc758 \uac70\uc758 \ubaa8\ub4e0 \uce21\uba74\uc744 \ub2e4\ub8e8\uace0 \uc788\uc73c\uba70, \uadf8 \uba85\uba85 \uaddc\uce59\uc740 \uc9c1\uad00\uc801\uc774\uace0 \uae30\uc5b5\ud558\uae30 \uc27d\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
Layout and Spacing Classes<\/h3>\n\n\n\n
\ub808\uc774\uc544\uc6c3 \uad00\ub828 \ud074\ub798\uc2a4\ub4e4, \uc608\ub97c \ub4e4\uc5b4\u2026 flex<\/code>\u3001grid<\/code>\u3001block<\/code>\u3001inline-block<\/code> \ub514\uc2a4\ud50c\ub808\uc774 \ubaa8\ub4dc\ub97c \uc81c\uc5b4\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \uac04\uaca9\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 \ubc29\ubc95\uc73c\ub85c \uc870\uc815\ub429\ub2c8\ub2e4. p-{size}<\/code>(\ub0b4\ubd80 \uc5ec\ubc31) \ubc0f m-{size}<\/code>(\uc678\ubd80 \ub9c8\uc9c4)\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc81c\uc5b4\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc11c\u2026 {size}<\/code> 0\uc5d0\uc11c 96\uae4c\uc9c0\uc758 \uc2a4\ucf00\uc77c\ub9c1 \ube44\uc728\uc744 \ub530\ub974\uc138\uc694. \uc608\ub97c \ub4e4\uc5b4\u2026 p-4<\/code> \ud45c\ud604\ud558\ub2e4 1rem<\/code> \ub0b4\ubd80 \uc5ec\ubc31(padding)\uc5d0 \ub300\ud55c \uc124\uc815\uc785\ub2c8\ub2e4. \ub108\ube44(width)\uc640 \ub192\uc774(height)\uc758 \uac12\uc774 \uc0ac\uc6a9\ub418\uace0 \uc788\uc2b5\ub2c8\ub2e4. w-<\/code> \uadf8\ub9ac\uace0 h-<\/code> \uc811\ub450\uc0ac, \uc608\ub97c \ub4e4\uc5b4\u2026 w-full<\/code>\u3001h-screen<\/code>\u3002<\/p>\n
\ucd94\ucc9c \uc77d\uae30 Tailwind CSS\uc758 \ud575\uc2ec \uac1c\ub150 \ud574\uc11d<\/a>\u3002<\/p>\n\n\n\n\n
Color and Formatting Category<\/h3>\n\n\n\n
\ubc30\uacbd\uc0c9 \uc0ac\uc6a9 \ubc29\ubc95 bg-{color}-{shade}<\/code>\ud14d\uc2a4\ud2b8 \uc0c9\uc0c1 \uc0ac\uc6a9 \ubc29\ubc95: text-{color}-{shade}<\/code>\uc608\ub97c \ub4e4\uba74 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. bg-blue-500<\/code> \uadf8\ub9ac\uace0 text-gray-800<\/code>\uc870\ud310 \uce21\uba74\uc5d0\uc11c\ub294 \uae00\uaf34 \ud06c\uae30\ub97c \ub2e4\uc74c\uacfc \uac19\uc740 \ubc29\ubc95\uc73c\ub85c \uc870\uc815\ud569\ub2c8\ub2e4: text-{size}<\/code>\uc608\ub97c \ub4e4\uc5b4, text-xl<\/code>) \uc81c\uc5b4\ub97c \ud1b5\ud574 \uae00\uaf34\uc758 \uad75\uae30\ub97c \uc870\uc808\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. font-{weight}<\/code>\uc608\ub97c \ub4e4\uc5b4, font-bold<\/code>\uff09\uc81c\uc5b4.<\/p>\n\n\n\n
\ubc18\uc751\ud615 \ub514\uc790\uc778\uc744 \uad6c\ud604\ud558\uae30<\/h3>\n\n\n\n
Tailwind\ub294 \ubaa8\ubc14\uc77c \uc6b0\uc120(Mobile First) \ub514\uc790\uc778 \uc6d0\uce59\uc5d0 \uae30\ubc18\ud55c \ube0c\ub808\uc774\ud06c\ud3ec\uc778\ud2b8 \uc2dc\uc2a4\ud15c\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc73c\ub85c \uc0ac\uc6a9\ub418\ub294 \ube0c\ub808\uc774\ud06c\ud3ec\uc778\ud2b8 \uc811\ub450\uc0ac\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4: sm:<\/code>\u3001md:<\/code>\u3001lg:<\/code>\u3001xl:<\/code>\u30012xl:<\/code>\uc5b4\ub5a4 \ub3c4\uad6c \ud074\ub798\uc2a4 \uc55e\uc5d0\ub3c4 \uc774\ub7ec\ud55c \uc811\ub450\uc0ac\ub97c \ucd94\uac00\ud560 \uc218 \uc788\uc5b4, \ud2b9\uc815 \ud654\uba74 \ub108\ube44 \uc774\uc0c1\uc5d0\uc11c\ub9cc \ud574\ub2f9 \uae30\ub2a5\uc774 \uc801\uc6a9\ub429\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4,<div class="text-center md:text-left"><\/code> \uc911\uac04 \ud06c\uae30 \uc774\uc0c1\uc758 \ud654\uba74\uc5d0\uc11c\ub294 \ud14d\uc2a4\ud2b8\uac00 \uc67c\ucabd\uc73c\ub85c \uc815\ub82c\ub418\uace0, \uadf8\ub807\uc9c0 \uc54a\uc740 \uacbd\uc6b0\uc5d0\ub294 \uac00\uc6b4\ub370\ub85c \uc815\ub82c\ub429\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ub2e4\uc591\ud55c \uae30\uae30\uc5d0 \ub9de\uac8c \uc778\ud130\ud398\uc774\uc2a4\ub97c \ub9e4\uc6b0 \uc6d0\ud65c\ud558\uac8c \uad6c\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\uace0\uae09 \uae30\uc220: \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \ubc0f \ucd5c\uc801\ud654<\/h2>\n\n\n\n
\ud504\ub85c\uc81d\ud2b8\uc758 \uaddc\ubaa8\uac00 \ucee4\uc9c8\uc218\ub85d Tailwind CSS\ub97c \ub9de\ucda4\ud654\ud558\uace0 \ucd5c\uc801\ud654\ud558\ub294 \uac83\uc774 \ub9e4\uc6b0 \uc911\uc694\ud574\uc9d1\ub2c8\ub2e4.<\/p>\n\n\n  
\n\n      
\n        \ube14\ub8e8\ud638\uc2a4\ud2b8 \uc6f9\uc0ac\uc774\ud2b8 \ube4c\ub354<\/strong>\n        
AI \uc6f9\uc0ac\uc774\ud2b8 \uc81c\uc791 \ub3c4\uad6c, \uc5f0\uc911\ubb34\ud734 \ub77c\uc774\ube0c \ucc44\ud305 \ubc0f \uc804\ud654 \uc9c0\uc6d0, 1\ub144\uac04 \ubb34\ub8cc \ub3c4\uba54\uc778 \uc774\ub984, \ubb34\ub8cc CDN, 99.99% \uac00\ub3d9 \uc2dc\uac04 SLA\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/div>\n      <\/div>\n\n      
\n                  \n                          \n              \"\uc6f9\uc0ac\uc774\ud2b8\n                      <\/a>\n          \n        \n          \ube14\ub8e8\ud638\uc2a4\ud2b8 \ubc29\ubb38\ud558\uae30        <\/a>\n      <\/div>\n    <\/div>\n\n    \n\n\n\n\n\n\n
\uc2ec\uce35\uc801\uc73c\ub85c \uc0ac\uc6a9\uc790 \uc815\uc758\ub41c \ub514\uc790\uc778 \uc2dc\uc2a4\ud15c<\/h3>\n\n\n\n
\ubaa8\ub4e0 \ub9de\ucda4 \uc124\uc815\uc774 \uc644\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4. tailwind.config.js<\/code> \uc791\uc5c5\uc740 \ud30c\uc77c \ub0b4\uc5d0\uc11c \uc774\ub8e8\uc5b4\uc9d1\ub2c8\ub2e4. \ub2f9\uc2e0\uc740 \ud30c\uc77c \ub0b4\uc5d0\uc11c \ud544\uc694\ud55c \uc791\uc5c5\uc744 \uc218\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. theme.extend<\/code> \uac1d\uccb4\uc5d0 \uc0c8\ub85c\uc6b4 \uac12\uc744 \ucd94\uac00\ud558\uc5ec \uae30\ubcf8 \ud14c\ub9c8\ub97c \ud655\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc0c8\ub85c\uc6b4 \uc0c9\uc0c1, \uac04\uaca9, \uae00\uaf34\uc744 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c \uae30\ubcf8 \ud14c\ub9c8\uc758 \uc77c\ubd80 \ub0b4\uc6a9\uc744 \uc644\uc804\ud788 \ub36e\uc5b4\uc4f8 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \ucd94\uac00\ub85c, \uc5ec\uae30\uc11c \ud504\ub85c\uc81d\ud2b8\uc758 \uc0ac\uc6a9\uc790 \uc815\uc758 \uc2a4\ud06c\ub9b0 \uc911\ub2e8\uc810\uc744 \uc815\uc758\ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\/\/ tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        'brand-primary': '#1d4ed8',\n      },\n      spacing: {\n        '128': '32rem',\n      }\n    },\n    screens: {\n      'tablet': '640px',\n      'laptop': '1024px',\n      'desktop': '1280px',\n    },\n  },\n}<\/code><\/pre>\n\n\n\n
Component extraction and package size reduction<\/h3>\n\n\n\n
\uc2e4\uc6a9\uc801\uc778 \uae30\ub2a5\uc774 \uc6b0\uc120\uc774\uc9c0\ub9cc, \uc911\ubcf5\uc744 \ud53c\ud558\uae30 \uc704\ud574 \ub2e4\uc74c\uacfc \uac19\uc740 \ubc29\ubc95\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. @layer components<\/code> CSS\uc5d0\uc11c\ub294 \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c \ucef4\ud3ec\ub10c\ud2b8 \ud074\ub798\uc2a4\ub97c \ucd94\ucd9c\ud558\ub294 \uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4. \ub2e8 \ud55c \ubc88\ub9cc \uc0ac\uc6a9\ub418\ub294 \uc2a4\ud0c0\uc77c \uc870\ud569\uc758 \uacbd\uc6b0\uc5d0\ub294 HTML \ub0b4\uc5d0\uc11c \uc9c1\uc811 \ud074\ub798\uc2a4\ub97c \uc870\ud569\ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n
\uc0dd\uc0b0 \ud658\uacbd\uc744 \ucd5c\uc801\ud654\ud558\uae30 \uc704\ud574 Tailwind CSS\ub294 PurgeCSS\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0ac\uc6a9\ub418\uc9c0 \uc54a\ub294 \ubaa8\ub4e0 CSS \ucf54\ub4dc\ub97c \uc81c\uac70\ud569\ub2c8\ub2e4(Tailwind CSS v3 \uc774\uc0c1 \ubc84\uc804\uc5d0\uc11c\ub294 \uc774 \uacfc\uc815\uc744 \u201c\ucf58\ud150\uce20 \uc2a4\uce94(content scanning)\u201d\uc774\ub77c\uace0 \ubd80\ub985\ub2c8\ub2e4). \uc774\ub97c \uc704\ud574 \uc124\uc815 \ud30c\uc77c(configuration file)\uc5d0\uc11c \uad00\ub828 \uc124\uc815\uc744 \uc801\uc808\ud788 \uad6c\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. content<\/code> \uc18d\uc131\uc5d0\uc11c Tailwind \ud074\ub798\uc2a4 \uc774\ub984\uc774 \ud3ec\ud568\ub41c \ubaa8\ub4e0 \ud30c\uc77c \uacbd\ub85c(\uc608: HTML, JSX, Vue \ud15c\ud50c\ub9bf)\ub97c \uc9c0\uc815\ud558\uba74, \ube4c\ub4dc \ub3c4\uad6c\uac00 \uc2e4\uc81c\ub85c \uc0ac\uc6a9\ub418\ub294 \uc2a4\ud0c0\uc77c\ub9cc\uc744 \ud328\ud0a4\uc9d5\ud558\uc5ec \ub9e4\uc6b0 \uc791\uc740 CSS \ud30c\uc77c\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n
\ucd94\ucc9c \uc77d\uae30 Tailwind CSS \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud604\ub300\uc801\uc778 \ubc18\uc751\ud615 \uc6f9\uc0ac\uc774\ud2b8\ub97c \uad6c\ucd95\ud558\ub294 \uc785\ubb38 \uac00\uc774\ub4dc<\/a>\u3002<\/p>\n\n\n\n\n
\uc694\uc57d<\/h2>\n\n\n\n
Tailwind CSS\ub294 \ub3c5\ud2b9\ud55c \uc720\ud2f8\ub9ac\ud2f0 \ud074\ub798\uc2a4 \uae30\ubc18\uc758 \ubc29\ubc95\ub860\uc744 \ud1b5\ud574 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc790\ub4e4\uc758 \uc2a4\ud0c0\uc77c \uc791\uc131 \ubc29\uc2dd\uc744 \uc644\uc804\ud788 \ubc14\uafb8\uc5c8\uc2b5\ub2c8\ub2e4. Tailwind CSS\ub97c \ubc30\uc6b0\ub294 \uacfc\uc815\uc740 \ucc98\uc74c\ubd80\ud130 \uba85\ud655\ud558\uac8c \uad6c\uc131\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4: \ud575\uc2ec \uac1c\ub150\uacfc \uc7a5\uc810\uc744 \uc774\ud574\ud558\ub294 \uac83\ubd80\ud130 \ud504\ub85c\uc81d\ud2b8 \ud658\uacbd\uc744 \uc124\uc815\ud558\ub294 \uac83\uae4c\uc9c0; \ub808\uc774\uc544\uc6c3, \uac04\uaca9, \uc0c9\uc0c1\uacfc \uac19\uc740 \uae30\ubcf8\uc801\uc778 \uc720\ud2f8\ub9ac\ud2f0 \ud074\ub798\uc2a4\uc640 \ubc18\uc751\ud615 \ub514\uc790\uc778 \uae30\ubc95\uc744 \uc219\ub2ec\ud558\ub294 \uac83, \uadf8\ub9ac\uace0 \uc124\uc815 \ud30c\uc77c\uc744 \ud1b5\ud574 \ub514\uc790\uc778 \uc2dc\uc2a4\ud15c\uc744 \uc138\ubc00\ud558\uac8c \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5\ud558\uace0 \ucd5c\uc801\ud654\ud558\ub294 \uac83\uae4c\uc9c0\uc785\ub2c8\ub2e4. Tailwind CSS\ub97c \ub9c8\uc2a4\ud130\ud558\uba74 \uc778\ud130\ud398\uc774\uc2a4 \uac1c\ubc1c\uc758 \ud6a8\uc728\uc131\uc744 \ud06c\uac8c \ud5a5\uc0c1\uc2dc\ud0ac \uc218 \uc788\uc744 \ubfd0\ub9cc \uc544\ub2c8\ub77c, \uac1c\ubc1c\uc790\ub4e4\uc774 \ub3c5\ud2b9\ud558\uace0 \uc815\ud655\ud558\uba70 \uace0\uc131\ub2a5\uc758 \ud604\ub300\uc801\uc778 \uc6f9 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ucd95\ud558\ub294 \ub370 \uc9d1\uc911\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc90d\ub2c8\ub2e4. \uc2e4\uc81c\ub85c \uc0ac\uc6a9\uc744 \ud558\uba74 \ud560\uc218\ub85d \u201c\uc81c\uc57d \uc18d\uc758 \uc790\uc720\u201d\uac00 \uac00\uc838\ub2e4\uc8fc\ub294 \uac15\ub825\ud55c \ud798\uc744 \ub354\uc6b1 \uae68\ub2eb\uac8c \ub420 \uac83\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
\uc790\uc8fc \ubb3b\ub294 \uc9c8\ubb38<\/h2>\n\n\n\n
Tailwind CSS\uc640 Bootstrap\uc758 \ucc28\uc774\uc810\uc740 \ubb34\uc5c7\uc778\uac00?<\/h3>\n\n\n\n
Tailwind CSS\ub294 \u201c\uc2a4\ud0c0\uc77c\uc774 \uc5c6\ub294\u201d \uae30\ubcf8 \ub3c4\uad6c \ubaa8\uc74c\uc73c\ub85c, \ub124\ube44\uac8c\uc774\uc158 \ubc14\ub098 \uce74\ub4dc\uc640 \uac19\uc774 \ubbf8\ub9ac \uc815\ud574\uc9c4 \ub514\uc790\uc778\uc744 \uac00\uc9c4 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc81c\uacf5\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \ub300\uc2e0 \uc774\ub7ec\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uad6c\ucd95\ud558\ub294 \ub370 \ud544\uc694\ud55c \uae30\ubcf8\uc801\uc778 \ud074\ub798\uc2a4\ub4e4\ub9cc\uc744 \uc81c\uacf5\ud558\uba70, \uac1c\ubc1c\uc790\ub294 \ub514\uc790\uc778\uc5d0 \ub300\ud55c \uc644\uc804\ud55c \uc81c\uc5b4\uad8c\uc744 \uac00\uc9d1\ub2c8\ub2e4.<\/p>\n\n\n  
\n\n      
\n        \ud638\uc2a4\ud305.com<\/strong>\n        
\ubb34\ub8cc SSL, Cloudflare CDN, WAF, 40\uac1c \uc774\uc0c1\uc758 \uae00\ub85c\ubc8c \uc11c\ubc84\uc2e4 \uc120\ud0dd, \uac00\uae4c\uc6b4 \uacf3\uc5d0\uc11c \ub300\uae30 \uc2dc\uac04 \ub2e8\ucd95, \uc5f0\uc911\ubb34\ud734 \uc11c\ube44\uc2a4 \uc9c0\uc6d0, \ucd5c\ub300 67% \uc808\uc57d, AI \ube4c\ub4dc \ubc0f SEO \ucd5c\uc801\ud654 \uc9c0\uc6d0!<\/div>\n      <\/div>\n\n      
\n                  \n                          \n              \"\n              \n              \n                      <\/a>\n          \n        \n          \ud638\uc2a4\ud305\ub2f7\ucef4 \ubc29\ubb38\ud558\uae30        <\/a>\n      <\/div>\n    <\/div>\n\n    \n\n\n\n\n\n\n
Bootstrap\ub294 \uace0\uae09 \uc218\uc900\uc758 \ucef4\ud3ec\ub10c\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \uae30\ubcf8 \uc2a4\ud0c0\uc77c\uacfc \uc0c1\ud638\uc791\uc6a9 \uae30\ub2a5\uc774 \ub0b4\uc7a5\ub41c \ub2e4\uc591\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc744 \uc81c\uacf5\ud558\uc5ec \uc77c\uad00\ub41c \uc2a4\ud0c0\uc77c\uc758 \uc778\ud130\ud398\uc774\uc2a4\ub97c \ube60\ub974\uac8c \uad6c\ucd95\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc0ac\uc6a9\uc790 \uc815\uc758 \ub514\uc790\uc778\uc744 \ud560 \ub54c\ub294 \ub9ce\uc740 \uae30\ubcf8 \uc2a4\ud0c0\uc77c\uc744 \ub36e\uc5b4\uc4f0\uc544\uc57c \ud558\ubbc0\ub85c \ub54c\ub85c\ub294 \ubc88\uac70\ub85c\uc6b8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
HTML\uc5d0\uc11c \ub9ce\uc740 \ud074\ub798\uc2a4 \uc774\ub984\uc744 \uc0ac\uc6a9\ud558\uba74 \ucf54\ub4dc\uac00 \uc77d\uae30 \uc5b4\ub824\uc6cc\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud074\ub798\uc2a4 \uc774\ub984\uc740 \uba85\ud655\ud558\uace0 \uac04\uacb0\ud574\uc57c \ud558\uba70, \ub2e4\ub978 \ud074\ub798\uc2a4\uc640\uc758 \uad00\uacc4\ub97c \uc27d\uac8c \uc774\ud574\ud560 \uc218 \uc788\ub3c4\ub85d \uc791\uc131\ub418\uc5b4\uc57c \ud569\ub2c8\ub2e4. \ub108\ubb34 \uae38\uac70\ub098 \ubcf5\uc7a1\ud55c \ud074\ub798\uc2a4 \uc774\ub984\uc740 \ucf54\ub4dc\uc758 \uac00\ub3c5\uc131\uc744 \uc800\ud558\uc2dc\ud0a4\uace0 \uc720\uc9c0\ubcf4\uc218\ub97c \uc5b4\ub835\uac8c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c \ud074\ub798\uc2a4 \uc774\ub984\uc744 \uc124<\/h3>\n\n\n\n
\ucd08\uae30\uc5d0\ub294 \uc774\ub7f0 \ub290\ub08c\uc774 \ub4e4 \uc218 \uc788\uc9c0\ub9cc, \uc801\uc808\ud55c \uc904\ubc14\uafc8\uacfc \uc815\ub82c(\ud504\ub9ac\ud2f0\uc5b4(Prettier) \ud50c\ub7ec\uadf8\uc778\uc744 \uc0ac\uc6a9\ud558\uba74 \uc790\ub3d9\uc73c\ub85c \uc815\ub82c\ub428), \uadf8\ub9ac\uace0 \ubcf5\uc7a1\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc744 \ubcc4\ub3c4\uc758 \ud30c\uc77c(\uc608: Vue, React \ucef4\ud3ec\ub10c\ud2b8 \ud30c\uc77c)\ub85c \ubd84\ub9ac\ud568\uc73c\ub85c\uc368 \uac00\ub3c5\uc131\uc744 \ud6a8\uacfc\uc801\uc73c\ub85c \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub9ce\uc740 \uac1c\ubc1c\uc790\ub4e4\uc740 CSS \ud30c\uc77c\uacfc HTML \ud30c\uc77c \uc0ac\uc774\ub97c \uacc4\uc18d \uc624\uac00\uba70 \uc2a4\ud0c0\uc77c\uc744 \ucc3e\ub294 \uac83\ubcf4\ub2e4\ub294 \ubaa8\ub4e0 \uc2a4\ud0c0\uc77c\uc744 \ubdf0 \uacc4\uce35\uc5d0 \uc9d1\uc911\uc2dc\ud0a4\ub294 \uac83\uc774 \ub354 \uba85\ud655\ud558\ub2e4\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
Tailwind CSS\ub85c \uc0dd\uc131\ub41c CSS \ud30c\uc77c\uc740 \ud070 \ud06c\uae30\uac00 \ub420\uae4c\uc694?<\/h3>\n\n\n\n
\uac1c\ubc1c \ubaa8\ub4dc\uc5d0\uc11c\ub294 \uac00\ub2a5\ud55c \ubaa8\ub4e0 \ub3c4\uad6c \ud074\ub798\uc2a4\ub97c \uc81c\uacf5\ud558\uae30 \uc704\ud574 CSS \ud30c\uc77c\uc758 \ud06c\uae30\uac00 \uc0c1\ub2f9\ud788 \ucee4\uc9d1\ub2c8\ub2e4(\ubcf4\ud1b5 \uc218 MB\ub97c \ucd08\uacfc\ud569\ub2c8\ub2e4). \ud558\uc9c0\ub9cc \ud504\ub85c\ub355\uc158 \ud658\uacbd\uc5d0\uc11c\ub294 \uc62c\ubc14\ub978 \uc124\uc815\uc744 \ud1b5\ud574 \ud30c\uc77c \ud06c\uae30\ub97c \uc904\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4. content<\/code> \uacbd\ub85c\ub97c \ud1b5\ud574 \ucf54\ub4dc\ub97c \uc7ac\uad6c\uc131\ud558\ub294 \uacfc\uc815\uc744 \u201c\ud2b8\ub9ac \uc170\uc774\ud0b9(tree-shaking)\u201d\uc774\ub77c\uace0 \ud569\ub2c8\ub2e4. \uc774 \uacfc\uc815\uc744 \uac70\uce5c \ucd5c\uc885 CSS \ud30c\uc77c\uc740 \uc77c\ubc18\uc801\uc73c\ub85c \ub9e4\uc6b0 \uc791\uc740 \ud06c\uae30\ub85c \uc0dd\uc131\ub429\ub2c8\ub2e4(\uc27d\uac8c 10KB \ubbf8\ub9cc\uc73c\ub85c \uc555\ucd95\ud560 \uc218 \uc788\uc74c). \uadf8 \uc774\uc720\ub294 \ud574\ub2f9 \ud30c\uc77c\uc5d0\ub294 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \uc2e4\uc81c\ub85c \uc0ac\uc6a9\ub418\ub294 \ud074\ub798\uc2a4\ub4e4\ub9cc \ud3ec\ud568\ub418\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
Tailwind CSS\ub9cc \uc0ac\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790 \uc815\uc758 CSS\ub97c \uc804\ud600 \uc791\uc131\ud558\uc9c0 \uc54a\uc744 \uc218 \uc788\uc744\uae4c\uc694?<\/h3>\n\n\n\n
\ub300\ubd80\ubd84\uc758 \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc788\uc5b4\uc11c \ub2f5\uc740 \u2018\uc608\u2019\uc785\ub2c8\ub2e4. Tailwind CSS\uc758 \uc124\uacc4 \ubaa9\ud45c\ub294 99%\uc758 \uc2a4\ud0c0\uc77c \uc694\uad6c\uc0ac\ud56d\uc744 \ubaa8\ub450 \ucda9\uc871\uc2dc\ud0a4\ub294 \uac83\uc785\ub2c8\ub2e4. \ub3c4\uad6c\ub098 \ud074\ub798\uc2a4 \uc870\ud569\uc73c\ub85c\ub294 \uad6c\ud604\ud560 \uc218 \uc5c6\ub294 \ub9e4\uc6b0 \ud2b9\ubcc4\ud55c \uc2a4\ud0c0\uc77c\uc774 \ud544\uc694\ud55c \uacbd\uc6b0\uc5d0\ub9cc \uc18c\ub7c9\uc758 \uc0ac\uc6a9\uc790 \uc815\uc758 CSS\ub97c \uc791\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. @layer<\/code> \uc774 \uc9c0\uce68\uc740 \ud574\ub2f9 \uae30\ub2a5\uc744 Tailwind CSS \uc2dc\uc2a4\ud15c\uc5d0 \ud1b5\ud569\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>","protected":false},"excerpt":{"rendered":"
\uc774 \uae00\uc5d0\uc11c\ub294 Tailwind CSS\uc758 \ud575\uc2ec \uc7a5\uc810\uacfc \uc2e4\uc6a9\uc131\uc744 \ucd5c\uc6b0\uc120\ud558\ub294 \uac1c\ubc1c \ucca0\ud559\uc744 \uc18c\uac1c\ud558\uba70, \ud504\ub85c\uc81d\ud2b8 \uc124\uc815, \ud575\uc2ec \ub3c4\uad6c\uc758 \uc0ac\uc6a9, \ubc18\uc751\ud615 \ub514\uc790\uc778 \uad6c\ud604, \uadf8\ub9ac\uace0 \ub9de\ucda4\ud615 \ucd5c\uc801\ud654\uc5d0 \uc774\ub974\ub294 \uc804\uccb4 \uacfc\uc815\uc744 \uc0c1\uc138\ud788 \uc124\uba85\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uac1c\ubc1c\uc790\ub4e4\uc774 \ud604\ub300\uc801\uc774\uace0 \ubc18\uc751\ud615\uc774 \ub6f0\uc5b4\ub09c \uc778\ud130\ud398\uc774\uc2a4\ub97c \ube60\ub974\uac8c \uad6c\ucd95\ud560 \uc218 \uc788\ub3c4\ub85d \ub3d5\uc2b5\ub2c8\ub2e4.<\/p>","protected":false},"author":7,"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[2257,2256,2199,430,367],"knowledge_category":[281],"class_list":["post-12394615","knowledge_post","type-knowledge_post","status-publish","hentry","tag-css-frameworks","tag-tailwind-css","tag-getting-started-tutorial","tag-frontend-development","tag-responsive-design","knowledge_category-website-building"],"acf":{"site_seo_keywords":"Tailwind CSS \u5165\u95e8, \u54cd\u5e94\u5f0f\u8bbe\u8ba1, \u5b9e\u7528\u5de5\u5177\u7c7b, CSS \u6846\u67b6, \u9879\u76ee\u642d\u5efa, \u5b9a\u5236\u4f18\u5316, \u524d\u7aef\u5f00\u53d1\u6559\u7a0b"},"_links":{"self":[{"href":"https:\/\/www.likacloud.com\/ko\/wp-json\/wp\/v2\/knowledge_posts\/12394615","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.likacloud.com\/ko\/wp-json\/wp\/v2\/knowledge_posts"}],"about":[{"href":"https:\/\/www.likacloud.com\/ko\/wp-json\/wp\/v2\/types\/knowledge_post"}],"author":[{"embeddable":true,"href":"https:\/\/www.likacloud.com\/ko\/wp-json\/wp\/v2\/users\/7"}],"version-history":[{"count":3,"href":"https:\/\/www.likacloud.com\/ko\/wp-json\/wp\/v2\/knowledge_posts\/12394615\/revisions"}],"predecessor-version":[{"id":12394622,"href":"https:\/\/www.likacloud.com\/ko\/wp-json\/wp\/v2\/knowledge_posts\/12394615\/revisions\/12394622"}],"wp:attachment":[{"href":"https:\/\/www.likacloud.com\/ko\/wp-json\/wp\/v2\/media?parent=12394615"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.likacloud.com\/ko\/wp-json\/wp\/v2\/tags?post=12394615"},{"taxonomy":"knowledge_category","embeddable":true,"href":"https:\/\/www.likacloud.com\/ko\/wp-json\/wp\/v2\/knowledge_category?post=12394615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}