{"id":12377963,"date":"2026-03-19T15:36:02","date_gmt":"2026-03-19T07:36:02","guid":{"rendered":"https:\/\/www.likacloud.com\/knowledge\/%e6%8e%8c%e6%8f%a1-tailwind-css%ef%bc%9a%e4%bb%8e%e5%85%a5%e9%97%a8%e5%88%b0%e5%ae%9e%e6%88%98%e7%9a%84%e5%ae%9e%e7%94%a8%e6%8c%87%e5%8d%97\/"},"modified":"2026-03-19T15:46:23","modified_gmt":"2026-03-19T07:46:23","slug":"master-tailwind-css-from-beginner-to-practical-guide-2026","status":"publish","type":"knowledge_post","link":"https:\/\/www.likacloud.com\/ko\/knowledge\/website-building\/master-tailwind-css-from-beginner-to-practical-guide-2026\/","title":{"rendered":"Tailwind CSS \ub9c8\uc2a4\ud130\ud558\uae30: \uc785\ubb38\ubd80\ud130 \uc2e4\uc804\uae4c\uc9c0\uc758 \uc2e4\uc6a9\uc801\uc778 \uac00\uc774\ub4dc"},"content":{"rendered":"<p class=\"wp-block-paragraph\">\ud604\ub300 \uc6f9 \uac1c\ubc1c \ubd84\uc57c\uc5d0\uc11c\ub294 \uc2e4\uc6a9\uc131\uc744 \uc911\uc2dc\ud558\ub294 CSS \ud504\ub808\uc784\uc6cc\ud06c\ub4e4\uc774 \uc810\ucc28 \uc8fc\ub958\ub85c \uc790\ub9ac\uc7a1\uace0 \uc788\uc2b5\ub2c8\ub2e4. <code data-no-auto-translation=\"\">Tailwind CSS<\/code> \uc758\uc2ec\ud560 \uc5ec\uc9c0 \uc5c6\uc774 \uadf8 \uc911\uc5d0\uc11c\ub3c4 \ub450\uac01\uc744 \ub098\ud0c0\ub0b4\ub294 \ub3c4\uad6c\uc785\ub2c8\ub2e4. \uc774 \ub3c4\uad6c\ub294 \ubbf8\ub9ac \ub9cc\ub4e4\uc5b4\uc9c4 UI \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc81c\uacf5\ud558\ub294 \uac83\uc774 \uc544\ub2c8\ub77c, \uace0\ub3c4\ub85c \uc870\ud569 \uac00\ub2a5\ud558\uace0 \uc138\ubd84\ud654\ub41c \uc720\ud2f8\ub9ac\ud2f0 \ud074\ub798\uc2a4(Utility Classes)\ub97c \ud1b5\ud574 \uc9c1\uc811 \ub514\uc790\uc778\uc744 \uad6c\ucd95\ud569\ub2c8\ub2e4. \uc774\ub7ec\ud55c \u201c\uc6d0\uc790\ud654\ub41c CSS(Atomized CSS)\u201d \ubc29\uc2dd\uc740 \uac1c\ubc1c\uc790\uac00 \uc2a4\ud0c0\uc77c\uc744 \uc791\uc131\ud558\ub294 \ubc29\uc2dd\uc744 \uc644\uc804\ud788 \ubc14\uafb8\uc5c8\uc73c\uba70, \uc2a4\ud0c0\uc77c \uad00\ub828 \uacb0\uc815\uc744 CSS \ud30c\uc77c\uc5d0\uc11c HTML\uc774\ub098 JSX \ud15c\ud50c\ub9bf\uc73c\ub85c \uc62e\uaca8\uc11c \uac1c\ubc1c \ud6a8\uc728\uc131\uacfc \ub514\uc790\uc778 \uc77c\uad00\uc131\uc744 \ud06c\uac8c \ud5a5\uc0c1\uc2dc\ucf30\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc740 \ud575\uc2ec \uac1c\ub150\ubd80\ud130 \uc2e4\uc81c \ud504\ub85c\uc81d\ud2b8 \uc801\uc6a9\uae4c\uc9c0\uc758 \uc644\uc804\ud55c \ud559\uc2b5 \uacbd\ub85c\ub97c \uc81c\uacf5\ud558\uc5ec, \uac1c\ubc1c\uc790\ub4e4\uc774 \ube60\ub974\uac8c \uc774 \ub3c4\uad6c\ub97c \uc775\ud788\uace0 \ud6a8\uc728\uc801\uc73c\ub85c \ud65c\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ub3d5\ub294 \uac83\uc744 \ubaa9\ud45c\ub85c \ud569\ub2c8\ub2e4. <code data-no-auto-translation=\"\">Tailwind CSS<\/code>\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tailwind CSS\uc758 \ud575\uc2ec \uac1c\ub150 \ubc0f \uac15\uc810<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ud574\ud558\ub824\uba74 <code data-no-auto-translation=\"\">Tailwind CSS<\/code> \uadf8 \uac00\uce58\ub97c \uc774\ud574\ud558\ub824\uba74 \uba3c\uc800 \uae30\uc874\uc758 CSS\ub098 \ucef4\ud3ec\ub10c\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc5d0 \ub300\ud55c \uace0\uc815\uad00\ub150\uc744 \ubc84\ub824\uc57c \ud569\ub2c8\ub2e4. \uadf8 \ud575\uc2ec\uc740 \u201c\uc2e4\uc6a9\uc801\uc778 \ud074\ub798\uc2a4\ub97c \uc6b0\uc120\uc2dc\ud558\ub294\u201d \ud328\ub7ec\ub2e4\uc784\uc5d0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u201c\uc2e4\uc6a9\uc801\uc778 \ud074\ub798\uc2a4\ub97c \uc6b0\uc120\uc2dc\ud558\ub294 \uc791\uc5c5 \ud328\ub7ec\ub2e4\uc784\u201d(A work paradigm that prioritizes practical classes)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code data-no-auto-translation=\"\">Tailwind CSS<\/code> \uc218\ucc9c \uac1c\uc758 \uc720\uc6a9\ud55c \ud074\ub798\uc2a4\ub4e4\uc774 \uc81c\uacf5\ub418\uba70, \uac01 \ud074\ub798\uc2a4\ub294 \ubcf4\ud1b5 \ub2e8 \ud558\ub098\uc758 CSS \uc18d\uc131\ub9cc\uc744 \ub2f4\ub2f9\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4,<code data-no-auto-translation=\"\">.text-center<\/code> corresponding <code data-no-auto-translation=\"\">text-align: center;<\/code>\uff0c<code data-no-auto-translation=\"\">.mt-4<\/code> corresponding <code data-no-auto-translation=\"\">margin-top: 1rem;<\/code>\uac1c\ubc1c\uc790\ub4e4\uc740 HTML \uc694\uc18c\uc5d0 \uc774\ub7ec\ud55c \ud074\ub798\uc2a4\ub4e4\uc744 \uc9c1\uc811 \uc801\uc6a9\ud568\uc73c\ub85c\uc368 \ubcf5\uc7a1\ud55c \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4(UI)\ub97c \uad6c\ucd95\ud560 \uc218 \uc788\uc73c\uba70, \ubcc4\ub3c4\uc758 \uc0ac\uc6a9\uc790 \uc815\uc758 CSS\ub97c \uc791\uc131\ud560 \ud544\uc694\uac00 \uc5c6\uc2b5\ub2c8\ub2e4. \uc774 \ubc29\uc2dd\uc740 \uc0c1\ud669 \uc804\ud658(Context Switching)\uc744 \ud06c\uac8c \uc904\uc5ec\uc90d\ub2c8\ub2e4. \uc65c\ub0d0\ud558\uba74 \ub354 \uc774\uc0c1 HTML \ud30c\uc77c\uacfc CSS \ud30c\uc77c \uc0ac\uc774\ub97c \uc654\ub2e4 \uac14\ub2e4 \ud558\uba70 \uc791\uc5c5\ud560 \ud544\uc694\uac00 \uc5c6\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\uc804\ud1b5\uc801\uc778 \ubc29\ubc95\ub4e4\uc5d0 \ube44\ud574 \uac00\uc9c0\ub294 \ub69c\ub837\ud55c \uc7a5\uc810\ub4e4<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\uc8fc\uc694 \uc7a5\uc810\uc740 \uac1c\ubc1c \uc18d\ub3c4, \ub514\uc790\uc778 \uc77c\uad00\uc131, \uadf8\ub9ac\uace0 \uc720\uc9c0\ubcf4\uc218\uc131\uc5d0 \uc788\uc2b5\ub2c8\ub2e4. \uc2e4\uc6a9\uc801\uc778 \ud074\ub798\uc2a4\ub4e4\uc744 \uc870\ud569\ud568\uc73c\ub85c\uc368 \ube60\ub974\uac8c \ud504\ub85c\ud1a0\ud0c0\uc785\uc744 \uc124\uacc4\ud558\uace0 \ubc18\ubcf5\uc801\uc73c\ub85c \uac1c\uc120\ud560 \uc218 \uc788\uc73c\uba70, \uc0c8\ub85c\uc6b4 \uc694\uc18c\ub9c8\ub2e4 \ubcc4\ub3c4\uc758 \ud074\ub798\uc2a4\uba85\uc744 \ub9cc\ub4e4 \ud544\uc694\uac00 \uc5c6\uc2b5\ub2c8\ub2e4. \ub0b4\uc7a5\ub41c \ub514\uc790\uc778 \uc2dc\uc2a4\ud15c(\uc608: \uac04\uaca9, \uc0c9\uc0c1, \uae00\uaf34 \ud06c\uae30\uc758 \ube44\uc728 \ub4f1)\uc740 \ud504\ub85c\uc81d\ud2b8 \uc804\uccb4\uc758 \uc2dc\uac01\uc801 \uc77c\uad00\uc131\uc744 \ubcf4\uc7a5\ud569\ub2c8\ub2e4. \ub610\ud55c \uc2a4\ud0c0\uc77c\uc774 \uc778\ub77c\uc778\uc73c\ub85c \uc791\uc131\ub418\uc5b4 \uc788\uc9c0\ub9cc(\uad6c\ucd95 \ub3c4\uad6c\ub97c \ud1b5\ud574 \ucd5c\uc801\ud654\ub428), \uc0ac\uc6a9\ub418\uc9c0 \uc54a\ub294 CSS \ucf54\ub4dc\uac00 \uc0dd\uae30\ub294 \uc77c\uc740 \uc5c6\uc73c\uba70, \ucd5c\uc885\uc801\uc73c\ub85c \uc0dd\uc131\ub418\ub294 \ud30c\uc77c\uc5d0\ub294 \uc2e4\uc81c\ub85c \uc0ac\uc6a9\ub418\ub294 \uc2a4\ud0c0\uc77c\ub9cc \ud3ec\ud568\ub418\uc5b4 \uc131\ub2a5\uc774 \ud5a5\uc0c1\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ud658\uacbd \uc124\uc815 \ubc0f \uae30\ubcf8 \uc0ac\uc6a9\ubc95<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\uc0ac\uc6a9 \uc2dc\uc791 <code data-no-auto-translation=\"\">Tailwind CSS<\/code> \uccab \ubc88\uc9f8 \ub2e8\uacc4\ub294 \uc774\ub97c \uc5ec\ub7ec\ubd84\uc758 \ud504\ub85c\uc81d\ud2b8\uc5d0 \ud1b5\ud569\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \uacf5\uc2dd\uc801\uc73c\ub85c\ub294 PostCSS\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc124\uce58\ud558\ub294 \uac83\uc774 \uac00\uc7a5 \uc6d0\ud65c\ud55c \ud1b5\ud569 \ubc29\ubc95\uc73c\ub85c \ucd94\ucc9c\ub429\ub2c8\ub2e4.<\/p>\n<!-- AUTO_SYNCED_PATTERN_INSERT_START -->\n<div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 mb-8 md:mb-10 mt-10\"> \r\n\t<!-- \u91cd\u590d\u5668\u5faa\u73af\u5f00\u59cb -->\r\n\t\t\r\n\t<!-- \u5546\u5bb6\u5361\u7247 -->\r\n\t<div class=\"bg-white dark:bg-gray-750 rounded-lg overflow-hidden shadow-md flex gap-1 flex-col     justify-between\" data-link=\"https:\/\/www.likacloud.com\/ko\/tolink\/wordpress-com-ai-website-builder\/\">\r\n\t\t<div class=\"flex items-start justify-between\"> \r\n\t\t\t<!-- \u5546\u5bb6logo -->\r\n\t\t\t<div class=\"w-16 h-16 bg-blue-200 dark:bg-blue-500\/30 flex items-center justify-center flex-shrink-0 p-3\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2026\/01\/20260107032104.svg\" alt=\"\uc6cc\ub4dc\ud504\ub808\uc2a4\ub2f7\ucef4 \uc6f9\uc0ac\uc774\ud2b8 \ube4c\ub354 \ub3c4\uc6b0\ubbf8\" class=\"w-12 object-contain !dark-filter08\" title=\"\">\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<!-- \u5546\u5bb6\u4fe1\u606f -->\r\n\t\t\t<div class=\"px-4 pt-2 flex-grow\">\r\n\t\t\t\t<div class=\"flex justify-between items-start mb-2\">\r\n\t\t\t\t\t<strong class=\"text-xl font-bold\">\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\t<span class=\"text-gray-500 dark:text-gray-300 !text-sm p-4 pb-0\">99.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<div class=\"flex flex-col gap-4 md:gap-6 justify-between p-4\"> \r\n\t\t\t<!-- \u6807\u7b7e -->\r\n\t\t\t\t\t\t\r\n\t\t\t<!-- \u6d3b\u52a8\u548c\u94fe\u63a5 --> \r\n\t\t\t<div class=\"flex justify-between items-center gap-3 flex-col\">\r\n\t\t\t\t\t\t\t\t<div class=\"text-gray-500 dark:text-gray-300 !text-sm line-clamp-1\">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<a href=\"https:\/\/www.likacloud.com\/ko\/tolink\/wordpress-com-ai-website-builder\/\" class=\"flex justify-end font-bold !text-lg !text-blue-600 dark:!text-blue-500\">\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<!-- \u5546\u5bb6\u5361\u7247 -->\r\n\t<div class=\"bg-white dark:bg-gray-750 rounded-lg overflow-hidden shadow-md flex gap-1 flex-col     justify-between\" data-link=\"https:\/\/www.likacloud.com\/ko\/tolink\/ultahost-website-builder\/\">\r\n\t\t<div class=\"flex items-start justify-between\"> \r\n\t\t\t<!-- \u5546\u5bb6logo -->\r\n\t\t\t<div class=\"w-16 h-16 bg-blue-200 dark:bg-blue-500\/30 flex items-center justify-center flex-shrink-0 p-3\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/12\/20251227023708.webp\" alt=\"\uc6b8\ud0c0\ud638\uc2a4\ud2b8 \uc6f9\uc0ac\uc774\ud2b8 \ube4c\ub354 \ub3c4\uc6b0\ubbf8\" class=\"w-12 object-contain !dark-filter08\" title=\"\">\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<!-- \u5546\u5bb6\u4fe1\u606f -->\r\n\t\t\t<div class=\"px-4 pt-2 flex-grow\">\r\n\t\t\t\t<div class=\"flex justify-between items-start mb-2\">\r\n\t\t\t\t\t<strong class=\"text-xl font-bold\">\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<span class=\"text-gray-500 dark:text-gray-300 !text-sm p-4 pb-0\">\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<div class=\"flex flex-col gap-4 md:gap-6 justify-between p-4\"> \r\n\t\t\t<!-- \u6807\u7b7e -->\r\n\t\t\t\t\t\t\r\n\t\t\t<!-- \u6d3b\u52a8\u548c\u94fe\u63a5 --> \r\n\t\t\t<div class=\"flex justify-between items-center gap-3 flex-col\">\r\n\t\t\t\t\t\t\t\t<div class=\"text-gray-500 dark:text-gray-300 !text-sm line-clamp-1\">Offer 40%<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.likacloud.com\/ko\/tolink\/ultahost-website-builder\/\" class=\"flex justify-end font-bold !text-lg !text-blue-600 dark:!text-blue-500\">\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<!-- \u91cd\u590d\u5668\u5faa\u73af\u7ed3\u675f -->\r\n<\/div>\r\n\r\n\r\n\n<!-- AUTO_SYNCED_PATTERN_INSERT_END -->\n\n\n\n\n\n<h3 class=\"wp-block-heading\">PostCSS\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc124\uce58 \ubc0f \uc124\uc815\uc744 \uc218\ud589\ud569\ub2c8\ub2e4.<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\uba3c\uc800, npm \ub610\ub294 yarn\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud574\ub2f9 \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud558\uc138\uc694. <code data-no-auto-translation=\"\">Tailwind CSS<\/code> \uadf8\ub9ac\uace0 \uadf8\uc5d0 \uc758\uc874\ud558\ub294 \uad6c\uc131 \uc694\uc18c\ub4e4\uc785\ub2c8\ub2e4. \ud575\uc2ec \uad6c\uc131 \ud30c\uc77c\uc740\u2026 <code data-no-auto-translation=\"\">tailwind.config.js<\/code>\ub2f9\uc2e0\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 \ubc29\ubc95\uc73c\ub85c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4: <code data-no-auto-translation=\"\">npx tailwindcss init<\/code> \uc774 \ud30c\uc77c\uc740 \uc0ac\uc6a9\uc790 \uc815\uc758 \ud14c\ub9c8, \uc0c9\uc0c1, \uac04\uaca9, \ud50c\ub7ec\uadf8\uc778 \ub4f1 \ubaa8\ub4e0 \uc124\uc815\uc744 \uc800\uc7a5\ud558\ub294 \uacf3\uc785\ub2c8\ub2e4. \ub610\ud55c, \ud504\ub85c\uc81d\ud2b8\uc758 CSS \uae30\ubcf8 \uc124\uc815 \ud30c\uc77c(\uc608: `style.css`)\uc5d0\uc11c \uc774 \ud30c\uc77c\uc744 \ucc38\uc870\ud558\uc5ec \ud574\ub2f9 \uc124\uc815\ub4e4\uc744 \uc801\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4. <code data-no-auto-translation=\"\">src\/styles.css<\/code>)\uc5d0 \ub3c4\uc785\ud569\ub2c8\ub2e4. <code data-no-auto-translation=\"\">Tailwind<\/code> \ub0b4 \uc9c0\uc2dc\uc5d0 \ub530\ub77c.<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-auto-translation=\"\"><code class=\"language-css\" data-no-auto-translation=\"\">\/* src\/styles.css *\/\n@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub7f0 \ub2e4\uc74c, Vite\ub098 Webpack\uacfc \uac19\uc740 \ube4c\ub4dc \ub3c4\uad6c\ub97c \uc124\uc815\ud558\uc5ec \uc774 CSS \ud30c\uc77c\uc744 \ucc98\ub9ac\ud558\ub3c4\ub85d \ud569\ub2c8\ub2e4.<code data-no-auto-translation=\"\">Tailwind<\/code> \uc774 PostCSS \ud50c\ub7ec\uadf8\uc778\uc740 \ud574\ub2f9 \uc9c0\uc2dc\uc5b4\ub4e4\uc744 \uc0dd\uc131\ub41c \uc2e4\uc6a9\uc801\uc778 \ud074\ub798\uc2a4\ub4e4\ub85c \ub300\uccb4\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u201cUnderstanding and Customizing Design Tokens\u201d<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code data-no-auto-translation=\"\">Tailwind CSS<\/code> \uc774 \ub514\uc790\uc778 \uc2dc\uc2a4\ud15c\uc740 \uc0c9\uc0c1, \uae00\uaf34 \ud06c\uae30, \uac04\uaca9 \ube44\uc728 \ub4f1\uacfc \uac19\uc740 \uc77c\ub828\uc758 \u201c\ub514\uc790\uc778 \ud1a0\ud070\u201d\uc5d0 \uc758\ud574 \uad6c\ub3d9\ub429\ub2c8\ub2e4. <code data-no-auto-translation=\"\">tailwind.config.js<\/code> \uc5ec\uae30\uc11c\ub294 \uc774\ub7ec\ud55c \uae30\ubcf8\uac12\uc744 \uc27d\uac8c \ud655\uc7a5\ud558\uac70\ub098 \uc218\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ube0c\ub79c\ub4dc \uc0c9\uc0c1\uc744 \ucd94\uac00\ud558\uac70\ub098 \uae30\ubcf8 \uac04\uaca9 \ube44\uc728\uc744 \ubcc0\uacbd\ud558\uc5ec \ud504\ub85c\uc81d\ud2b8 \ub514\uc790\uc778 \uaddc\uaca9\uc5d0 \ub9de\uac8c \uc870\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uc0ac\uc6a9\uc790 \uc815\uc758 \uae30\ub2a5 \ub355\ubd84\uc5d0\u2026 <code data-no-auto-translation=\"\">Tailwind<\/code> \uc5b4\ub5a4 \ub514\uc790\uc778\uc5d0\ub3c4 \uc801\uc751\ud560 \uc218 \uc788\uc73c\uba70, \ub2e8\uc21c\ud788 \uae30\ubcf8\uc801\uc778 \uc678\uad00\uc5d0 \uad6d\ud55c\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uc2e4\uc6a9\uc801\uc778 \ud074\ub798\uc2a4 \uc870\ud569\uacfc \ubc18\uc751\ud615 \ub514\uc790\uc778 (Practical Class Combinations and Responsive Design)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\uc644\ubcbd\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <code data-no-auto-translation=\"\">Tailwind CSS<\/code> \ud575\uc2ec\uc740 \ud574\ub2f9 \ud074\ub798\uc2a4\uc758 \uba85\uba85 \uaddc\uce59\uacfc \ubc18\uc751\ud615 \ub514\uc790\uc778\uc744 \uc704\ud55c \uc811\ub450\uc0ac\ub97c \uc798 \uc774\ud574\ud558\ub294 \ub370 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\ubcf5\uc7a1\ud55c \uad6c\uc131 \uc694\uc18c\ub97c \uad6c\uc131\ud558\ub294 \ud074\ub798\uc2a4 \uc774\ub984\uc758 \uc870\ud569\uc744 \ub9cc\ub4e4\uae30<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\uc5ec\ub7ec \uc720\uc6a9\ud55c \ud074\ub798\uc2a4\ub97c \ud558\ub098\uc758 \uc694\uc18c\uc5d0 \uacb0\ud569\ud568\uc73c\ub85c\uc368, \uc6d0\ud558\ub294 \ub9cc\ud07c \ubcf5\uc7a1\ud55c \uc2a4\ud0c0\uc77c\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uac00\uc6b4\ub370\uc5d0 \uc704\uce58\ud558\uace0 \ud30c\ub780\uc0c9\uc778 \ubc84\ud2bc\uc744 \ub9cc\ub4e4\ub824\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-auto-translation=\"\"><code class=\"language-html\" data-no-auto-translation=\"\">&lt;button class=&quot;px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500&quot;&gt;\n  \u70b9\u51fb\u6211\n&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc5ec\uae30\uc5d0 \ub0b4\ubd80 \uc5ec\ubc31(padding), \ubc30\uacbd\uc0c9\/background color), \ud14d\uc2a4\ud2b8 \uc0c9\uc0c1(text color), \uae00\uaf34 \uad75\uae30(text weight), \ub465\uadfc \ubaa8\uc11c\ub9ac(rounded corners), \uadf8\ub9ac\uace0 \ub9c8\uc6b0\uc2a4 \uc624\ubc84(hover) \ubc0f \ud3ec\ucee4\uc2a4(focus) \uc0c1\ud0dc\uc758 \uc2a4\ud0c0\uc77c\uc774 \ubaa8\ub450 \uacb0\ud569\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uc6d0\ud558\ub294 \ub300\ub85c \uc0ac\uc6a9\ud558\uc2e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <code data-no-auto-translation=\"\">@layer<\/code> \uc9c0\uc2dc \ubc0f <code data-no-auto-translation=\"\">@apply<\/code> CSS\uc5d0\uc11c\ub294 \uc911\ubcf5\ub418\ub294 \uc720\ud2f8\ub9ac\ud2f0 \ud074\ub798\uc2a4 \uc870\ud569\uc744 \ucd94\ucd9c\ud558\uc5ec \uc0ac\uc6a9\uc790 \uc815\uc758 \ucef4\ud3ec\ub10c\ud2b8 \ud074\ub798\uc2a4\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc774 \ubc29\ubc95\uc740 \uc2e4\uc81c\ub85c \ub9ce\uc740 \uc911\ubcf5\uc774 \uc874\uc7ac\ud558\ub294 \uacbd\uc6b0\uc5d0\ub9cc \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4. \uadf8\ub807\uac8c \ud568\uc73c\ub85c\uc368 \u201c\uc720\ud2f8\ub9ac\ud2f0 \ud074\ub798\uc2a4\uc758 \uc6b0\uc120\uc21c\uc704\u201d\ub77c\ub294 \uc6d0\uce59\uc744 \uc720\uc9c0\ud558\uace0 \ucf54\ub4dc\ub97c \ub354 \uac04\uacb0\ud558\uac8c \uc720\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\ubaa8\ubc14\uc77c \uc6b0\uc120\uc758 \ubc18\uc751\ud615 \ub808\uc774\uc544\uc6c3\uc744 \uad6c\ud604\ud558\uae30<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code data-no-auto-translation=\"\">Tailwind CSS<\/code> \ubaa8\ubc14\uc77c \uc6b0\uc120\uc758 \uc911\ub2e8\uc810 \uc2dc\uc2a4\ud15c\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc73c\ub85c \uc81c\uacf5\ub418\ub294 \uc911\ub2e8\uc810\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4: <code data-no-auto-translation=\"\">sm<\/code>\u3001<code data-no-auto-translation=\"\">md<\/code>\u3001<code data-no-auto-translation=\"\">lg<\/code>\u3001<code data-no-auto-translation=\"\">xl<\/code>\u3001<code data-no-auto-translation=\"\">2xl<\/code>\uc2e4\uc6a9\uc801\uc778 \ud074\ub798\uc2a4 \uc55e\uc5d0 \ube0c\ub808\uc774\ud06c\ud3ec\uc778\ud2b8 \uc811\ub450\uc0ac\ub97c \ucd94\uac00\ud568\uc73c\ub85c\uc368 \ubc18\uc751\ud615 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uc27d\uac8c \uad6c\ucd95\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4,<code data-no-auto-translation=\"\">text-sm md:text-lg<\/code> \uc774\ub294 \ubaa8\ubc14\uc77c \uae30\uae30\uc5d0\uc11c\ub294 \uc791\uc740 \uae00\uaf34 \ud06c\uae30\ub97c, \uc911\uac04 \ud06c\uae30 \uc774\uc0c1\uc758 \ud654\uba74\uc5d0\uc11c\ub294 \ud070 \uae00\uaf34 \ud06c\uae30\ub97c \uc0ac\uc6a9\ud558\ub3c4\ub85d \uc9c0\uc815\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \ub808\uc774\uc544\uc6c3\uc5d0 \uad00\ud574\uc11c\ub294\u2026<code data-no-auto-translation=\"\">flex flex-col md:flex-row<\/code> \ubaa8\ubc14\uc77c \uae30\uae30\uc5d0\uc11c\ub294 \uc218\uc9c1 \ubc30\uc5f4\uc744, \ub370\uc2a4\ud06c\ud1b1 \uae30\uae30\uc5d0\uc11c\ub294 \uc218\ud3c9 \ubc30\uc5f4\uc744 \uc27d\uac8c \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uace0\uae09 \uae30\ub2a5 \ubc0f \ud504\ub85c\uc81d\ud2b8 \uc2e4\uc804 (Advanced Features and Project Practice)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\uae30\ucd08\ub97c \uc775\ud788\uac8c \ub418\uba74,<code data-no-auto-translation=\"\">Tailwind CSS<\/code> \uc77c\ubd80 \uace0\uae09 \uae30\ub2a5\ub4e4\uc744 \ud65c\uc6a9\ud558\uba74 \uc2e4\uc81c \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \ub354 \ud070 \ud6a8\uacfc\ub97c \ubc1c\ud718\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<!-- AUTO_SYNCED_PATTERN_INSERT_START -->\n\n  <div class=\"flex justify-between items-center flex-col lg:flex-row xl:flex-col 2xl:flex-row gap-6 sm:gap-8 rounded-lg border border-gray-200 dark:border-gray-700 p-4 mb-8 lg:mb-10 sm:p-6 bg-white dark:bg-gray-750 shadow-md transition-colors duration-300\"\n         data-link=\"https:\/\/www.likacloud.com\/ko\/tolink\/bluehost-wordpress-hosting\/\">\n\n      <div class=\"flex flex-col gap-3 gap-4 sm:gap-6 w-full\">\n        <strong class=\"text-2xl font-semibold text-gray-900 dark:text-gray-200\">\ube14\ub8e8\ud638\uc2a4\ud2b8 \uc6f9\uc0ac\uc774\ud2b8 \ube4c\ub354<\/strong>\n        <div class=\"text-gray-600 dark:text-gray-300 word-word\">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      <div class=\"flex items-center flex-col md:flex-row lg:flex-col xl:flex-row 2xl:flex-col gap-6 shrink-0\">\n                  <a href=\"https:\/\/www.likacloud.com\/ko\/tolink\/bluehost-wordpress-hosting\/\">\n                          <!-- \u53ea\u6709\u4e00\u4e2a\u53ef\u7528 icon\uff08\u6216\u591c\u95f4\u56de\u9000\uff09\uff0c\u4e24\u79cd\u6a21\u5f0f\u5171\u7528 -->\n              <img decoding=\"async\" src=\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/12\/20251231095441.svg\" alt=\"\uc6f9\uc0ac\uc774\ud2b8 \ub3c4\uc6b0\ubbf8 \ub85c\uace0\" class=\"content-promotion-card-icon h-9 min-h-9\" title=\"\">\n                      <\/a>\n          \n        <a href=\"https:\/\/www.likacloud.com\/ko\/tolink\/bluehost-wordpress-hosting\/\"\n           class=\"bg-blue-500 w-full md:w-auto lg:w-full xl:w-auto 2xl:w-full text-center !text-white dark:!text-gray-200 !px-5 !py-1.5 rounded-full hover:bg-blue-600 transition-colors\">\n          \ube14\ub8e8\ud638\uc2a4\ud2b8 \ubc29\ubb38\ud558\uae30        <\/a>\n      <\/div>\n    <\/div>\n\n    \n<!-- AUTO_SYNCED_PATTERN_INSERT_END -->\n\n\n\n\n\n<h3 class=\"wp-block-heading\">\uc9c0\uc2dc\uc5b4\uc640 \ud568\uc218\ub97c \ud65c\uc6a9\ud558\uc5ec \ud6a8\uc728\uc131\uc744 \ub192\uc774\uc138\uc694.<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code data-no-auto-translation=\"\">Tailwind CSS<\/code> \uba87 \uac00\uc9c0 \uac15\ub825\ud55c CSS \uc9c0\uc2dc\uc5b4\ub4e4\uc774 \uc81c\uacf5\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc55e\uc11c \uc5b8\uae09\ud55c \uac83\ub4e4 \uc678\uc5d0\ub3c4\u2026 <code data-no-auto-translation=\"\">@apply<\/code>\uadf8\ub9ac\uace0 <code data-no-auto-translation=\"\">@screen<\/code>(\uc0ac\uc6a9\uc790 \uc815\uc758 \ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub97c \uc0dd\uc131\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.) <code data-no-auto-translation=\"\">theme()<\/code> `function` (\uc0ac\uc6a9\uc790 \uc815\uc758 CSS\uc5d0\uc11c \ub514\uc790\uc778 \ud1a0\ud070\uc5d0 \uc811\uadfc\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4). \uc608\ub97c \ub4e4\uc5b4, \uc0ac\uc6a9\uc790 \uc815\uc758 CSS\uc5d0\uc11c \ub2e4\uc74c\uacfc \uac19\uc774 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<code data-no-auto-translation=\"\">color: theme(\u2018colors.blue.500\u2019);<\/code>\uc774\ub97c \ud1b5\ud574 \uc0ac\uc6a9\uc790 \uc815\uc758 \uc2a4\ud0c0\uc77c\uc774 \uc6d0\ubcf8 \ub514\uc790\uc778\uacfc \uc644\ubcbd\ud558\uac8c \uc77c\uce58\ud558\ub3c4\ub85d \ubcf4\uc7a5\ub429\ub2c8\ub2e4. <code data-no-auto-translation=\"\">Tailwind<\/code> \ud574\ub2f9 \ub514\uc790\uc778 \uc2dc\uc2a4\ud15c\uc740 \uc77c\uad00\uc131\uc744 \uc720\uc9c0\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">React\/Vue\uc640 \uac19\uc740 \ud504\ub808\uc784\uc6cc\ud06c\uc5d0\uc11c\uc758 \ubaa8\ubc94 \uc0ac\ub840(Best Practices):<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ud604\ub300\uc758 \ud504\ub860\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c\uc5d0\uc11c\ub294\u2026<code data-no-auto-translation=\"\">Tailwind CSS<\/code> \ud2b9\ud788 \ub6f0\uc5b4\ub09c \uc131\ub2a5\uc744 \ubcf4\uc778 \ubd80\ubd84\uc774 \uc788\uc2b5\ub2c8\ub2e4. \ud55c \uac00\uc9c0 \ubaa8\ubc94 \uc0ac\ub840\ub294 \uc2a4\ud0c0\uc77c(\uc989, \ud074\ub798\uc2a4 \uc774\ub984 \ubb38\uc790\uc5f4)\uc744 \uac00\ub2a5\ud55c \ud55c \ud15c\ud50c\ub9bf\/JSX \ub0b4\uc5d0 \uc720\uc9c0\ud558\uace0, \uc870\uac74 \ub17c\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc5ec \ubb38\uc790\uc5f4\uc744 \uc870\ud569\ud558\uc9c0 \uc54a\ub294 \uac83\uc785\ub2c8\ub2e4. \uc870\uac74 \ud310\ub2e8\uc774 \ud544\uc694\ud55c \ud074\ub798\uc2a4\uc758 \uacbd\uc6b0, \ub2e4\uc74c\uacfc \uac19\uc740 \ubc29\ubc95\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4: <code data-no-auto-translation=\"\">clsx<\/code> \ub610\ub294 <code data-no-auto-translation=\"\">classnames<\/code> \uc774\ub7ec\ud55c \ub3c4\uad6c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc5ec \ucf54\ub4dc\ub97c \uae54\ub054\ud558\uac8c \uc720\uc9c0\ud558\uc138\uc694. \ub3d9\uc2dc\uc5d0, \uacfc\ub3c4\ud55c \ucd94\uc0c1\ud654\ub97c \ud53c\ud574\uc57c \ud569\ub2c8\ub2e4. \ud2b9\uc815 \uc2a4\ud0c0\uc77c\uc774 \uc5ec\ub7ec \uacf3\uc5d0\uc11c \uc644\uc804\ud788 \uc77c\uad00\ub418\uba70 \ub17c\ub9ac\uc801\uc73c\ub85c \uc9c4\uc815\ud55c \u201c\ucef4\ud3ec\ub10c\ud2b8\u201d\ub85c \uac04\uc8fc\ub420 \ub54c\uc5d0\ub9cc \ud574\ub2f9 \uc2a4\ud0c0\uc77c\uc744 \ud504\ub808\uc784\uc6cc\ud06c \ucef4\ud3ec\ub10c\ud2b8(\uc608: React \ucef4\ud3ec\ub10c\ud2b8\ub098 Vue \ucef4\ud3ec\ub10c\ud2b8)\ub85c \ucd94\uc0c1\ud654\ud558\ub294 \uac83\uc744 \uace0\ub824\ud574\uc57c \ud569\ub2c8\ub2e4. \ub108\ubb34 \uc774\ub974\uac8c \ucd94\uc0c1\ud654\ub97c \uc801\uc6a9\ud558\ub294 \uac83\uc740 \ubc14\ub78c\uc9c1\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. <code data-no-auto-translation=\"\">@apply<\/code> CSS \ucef4\ud3ec\ub10c\ud2b8 \ud074\ub798\uc2a4\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\uc0dd\uc0b0 \ud658\uacbd \ucd5c\uc801\ud654 \uc804\ub7b5<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code data-no-auto-translation=\"\">Tailwind CSS<\/code> \uac1c\ubc1c \ubaa8\ub4dc\uc5d0\uc11c\ub294 \uc644\uc804\ud55c \uc2a4\ud0c0\uc77c\uc2dc\ud2b8\uac00 \uc0dd\uc131\ub418\uc9c0\ub9cc, \ud504\ub85c\ub355\uc158 \ube4c\ub4dc \uc2dc\uc5d0\ub294 HTML, JSX, Vue \ucef4\ud3ec\ub10c\ud2b8\uc640 \uac19\uc740 \ud504\ub85c\uc81d\ud2b8 \ud30c\uc77c\uc744 \ubd84\uc11d\ud558\uc5ec \u201c\ud2b8\ub9ac \uc250\uc774\ud0b9 \ucd5c\uc801\ud654\u201d(tree shaking optimization)\ub97c \uc218\ud589\ud569\ub2c8\ub2e4. \uc774 \uacfc\uc815\uc5d0\uc11c \uc2e4\uc81c\ub85c \uc0ac\uc6a9\ub418\ub294 \ud074\ub798\uc2a4\ub4e4\ub9cc \uc720\uc9c0\ub418\uc5b4 \ub9e4\uc6b0 \uc791\uc740 CSS \ud30c\uc77c\uc774 \uc0dd\uc131\ub429\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574\uc11c\ub294 \uc62c\ubc14\ub974\uac8c \uc124\uc815\uc744 \ud574\uc57c \ud569\ub2c8\ub2e4. <code data-no-auto-translation=\"\">tailwind.config.js<\/code> \uc911\uad6d\uc758 <code data-no-auto-translation=\"\">content<\/code> \uc635\uc158\uc73c\ub85c, \ud074\ub798\uc2a4 \uc774\ub984\uc774 \ud3ec\ud568\ub41c \ubaa8\ub4e0 \uc18c\uc2a4 \ud30c\uc77c\uc758 \uacbd\ub85c\ub97c \uc9c0\uc815\ud558\uc5ec \ucd5c\uc801\ud654 \uacfc\uc815\uc774 \uc62c\ubc14\ub974\uac8c \uc218\ud589\ub418\ub3c4\ub85d \ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uc694\uc57d<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code data-no-auto-translation=\"\">Tailwind CSS<\/code> \uc774\uac83\uc740 \ub2e8\uc21c\ud55c CSS \ud504\ub808\uc784\uc6cc\ud06c\uac00 \uc544\ub2c8\ub77c, \ud6a8\uc728\uc801\uc774\uace0 \uc720\uc9c0\ubcf4\uc218\uac00 \uc6a9\uc774\ud55c \uc2a4\ud0c0\uc77c \uac1c\ubc1c \ubc29\ubc95\ub860\uc744 \ub300\ud45c\ud569\ub2c8\ub2e4. \uc2e4\uc6a9\uc801\uc778 \ud074\ub798\uc2a4 \uc6b0\uc120\uc758 \ud328\ub7ec\ub2e4\uc784\uc744 \ud1b5\ud574 \uac1c\ubc1c\uc790\ub4e4\uc740 \ub180\ub77c\uc6b4 \uc18d\ub3c4\ub85c \uc77c\uad00\ub418\uace0 \ubc18\uc751\ud615\uc774\uba70 \uc0ac\uc6a9\uc790 \uce5c\ud654\uc801\uc778 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ucd95\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ube60\ub978 \ud504\ub85c\ud1a0\ud0c0\uc774\ud551\ubd80\ud130 \ub300\uaddc\ubaa8 \ud504\ub85c\ub355\uc158 \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc774\ub974\uae30\uae4c\uc9c0, \uc774 \ud504\ub808\uc784\uc6cc\ud06c\ub294 \ub2e4\uc591\ud55c \ud658\uacbd\uc5d0\uc11c \ud6a8\uacfc\uc801\uc73c\ub85c<code data-no-auto-translation=\"\">Tailwind CSS<\/code> \uac15\ub825\ud55c \uc124\uc815 \uae30\ub2a5, \ub0b4\uc7a5\ub41c \ub514\uc790\uc778 \uc2dc\uc2a4\ud15c, \uadf8\ub9ac\uace0 \ub6f0\uc5b4\ub09c \uc0dd\uc0b0\uc131 \ucd5c\uc801\ud654 \ub355\ubd84\uc5d0 \uc774 \ub3c4\uad6c\ub294 \ud604\ub300 \uc6f9 \uac1c\ubc1c\uc5d0 \uc788\uc5b4 \ucd5c\uc801\uc758 CSS \ub3c4\uad6c\ub85c\uc11c\uc758 \uac00\uce58\ub97c \uc785\uc99d\ud588\uc2b5\ub2c8\ub2e4. \uc774 \ub3c4\uad6c\ub97c \uc219\ub2ec\ud55c\ub2e4\uba74 \ub354\uc6b1 \uc6d0\ud65c\ud55c \uc2a4\ud0c0\uc77c \uac1c\ubc1c \ud504\ub85c\uc138\uc2a4\uc640 \uc608\uce21 \uac00\ub2a5\uc131\uc774 \ub192\uc740 UI \ucf54\ub4dc\ub97c \ud655\ubcf4\ud560 \uc218 \uc788\uac8c \ub420 \uac83\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uc790\uc8fc \ubb3b\ub294 \uc9c8\ubb38<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Tailwind CSS\ub97c \uc0ac\uc6a9\ud558\uba74 HTML \ucf54\ub4dc\uac00 \ub2e4\uc18c \ubcf5\uc7a1\ud574 \ubcf4\uc77c \uc218 \uc788\ub098\uc694?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\uac83\uc740 \uc2e4\uc81c\ub85c \ud754\ud788 \ub098\ud0c0\ub098\ub294 \ucd08\uae30 \uc778\uc0c1\uc785\ub2c8\ub2e4. \ud074\ub798\uc2a4 \uc774\ub984\uc774 \ub9ce\uc544\uc9c0\uba74 HTML \uc904\uc758 \uae38\uc774\uac00 \uae38\uc5b4\uc9c8 \uc218 \uc788\uc9c0\ub9cc, \uc774\ub294 \uc2a4\ud0c0\uc77c \ub85c\uc9c1\uc744 \uba85\ud655\ud558\uac8c \ud45c\ud604\ud558\uace0 \ud604\uc9c0\ud654\ud558\ub294 \ub370 \ub530\ub978 \ub2e8\uc810\uc785\ub2c8\ub2e4. CSS \ud30c\uc77c\uc5d0\uc11c \ucd94\uc0c1\uc801\uc778 \ud074\ub798\uc2a4 \uc774\ub984\uc744 \uc815\uc758\ud55c \ud6c4 HTML\uc5d0\uc11c \ucc38\uc870\ud558\ub294 \ubc29\uc2dd\uc5d0 \ube44\ud574, \uc804\uc790\uc758 \uacbd\uc6b0 \ud300 \ud611\uc5c5 \uc2dc \uac00\ub3c5\uc131\uacfc \uc720\uc9c0\ubcf4\uc218\uc131\uc774 \ub354 \ub192\uc2b5\ub2c8\ub2e4. \uc774 \ubb38\uc81c\ub97c \uc644\ud654\ud558\uae30 \uc704\ud574 \uc904 \ud3ec\ub9f7\ud305 \ub3c4\uad6c\ub97c \uc0ac\uc6a9\ud558\uac70\ub098, \uae34 \ud074\ub798\uc2a4 \uc774\ub984 \ubaa9\ub85d\uc744 \ub17c\ub9ac\uc801\uc73c\ub85c \uadf8\ub8f9\ud654\ud558\uac70\ub098, \uc2e4\uc81c\ub85c \ubc18\ubcf5\ub418\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub300\ud574 \ud504\ub808\uc784\uc6cc\ud06c \uc218\uc900\uc758 \ucd94\uc0c1\ud654\ub97c \uc801\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\uc5b4\ub5bb\uac8c \uc81c3\uc790 \ucef4\ud3ec\ub10c\ud2b8\uc758 Tailwind \uc2a4\ud0c0\uc77c\uc744 \ub36e\uc5b4\uc4f0\uac70\ub098 \uc0ac\uc6a9\uc790 \uc815\uc758\ud560 \uc218 \uc788\ub098\uc694?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ucd5c\uc120\uc758 \ubc29\ubc95\uc740 \ud574\ub2f9 \uae30\ub2a5\uc774\ub098 \ub3c4\uad6c\ub97c \ud6a8\uacfc\uc801\uc73c\ub85c \ud65c\uc6a9\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. <code data-no-auto-translation=\"\">Tailwind CSS<\/code> \ud2b9\uc815 \ud074\ub798\uc2a4\uc758 \uad00\ub9ac \ubc0f \uc2e4\uc6a9\uc801\uc778 \uae30\ub2a5\ub4e4\uc785\ub2c8\ub2e4. \uc2e4\uc6a9\uc801\uc778 \ud074\ub798\uc2a4\uc758 \uc218\ub97c \ub298\ub9ac\uac70\ub098 \ub354 \ud2b9\uc774\uc801\uc778 \uc120\ud0dd\uc790\ub97c \uc0ac\uc6a9\ud568\uc73c\ub85c\uc368(\ud074\ub798\uc2a4\uba85 \ub4a4\uc5d0 \ucd94\uac00) \uc774\ub7ec\ud55c \uae30\ub2a5\ub4e4\uc744 \ub36e\uc5b4\uc4f8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub9cc\uc57d \uc81c3\uc790 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ud074\ub798\uc2a4\uba85\uc744 \uc778\uc81d\uc158\ud560 \uc218 \uc788\ub294 \ud3ec\uc778\ud2b8\ub97c \uc81c\uacf5\ud55c\ub2e4\uba74, \uadf8\ub0e5 \uc790\uc2e0\uc758 \uc2e4\uc6a9\uc801\uc778 \ud074\ub798\uc2a4\ub97c \uadf8\ub300\ub85c \uc804\ub2ec\ud558\uba74 \ub429\ub2c8\ub2e4. \uc2a4\ud0c0\uc77c\uc774 \ub0b4\u8054\ub418\uc5b4 \uc788\uac70\ub098 \ub354 \ud2b9\uc774\uc801\uc778 CSS\ub85c \uc815\uc758\ub418\uc5b4 \uc788\ub2e4\uba74, \uc790\uc2e0\uc758 \ucf54\ub4dc\uc5d0\uc11c \ud574\ub2f9 \uc2a4\ud0c0\uc77c\uc744 \ucc98\ub9ac\ud574\uc57c \ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. <code data-no-auto-translation=\"\">tailwind.config.js<\/code> \uc911\uad6d\uc744 \ud1b5\ud574 <code data-no-auto-translation=\"\">important<\/code> \uc635\uc158 \ub610\ub294 \uc0ac\uc6a9\ubc95 <code data-no-auto-translation=\"\">!important<\/code> \uc218\uc815\uc790(\uc608: ) <code data-no-auto-translation=\"\">!text-red-500<\/code>)\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac15\uc81c\ub85c \ub36e\uc5b4\uc4f0\ub3c4\ub85d \ud560 \uc218 \uc788\uc9c0\ub9cc, \uc774\ub294 \ucd5c\ud6c4\uc758 \uc218\ub2e8\uc73c\ub85c\ub9cc \uc0ac\uc6a9\ub418\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<!-- AUTO_SYNCED_PATTERN_INSERT_START -->\n\n  <div class=\"flex justify-between items-center flex-col lg:flex-row xl:flex-col 2xl:flex-row gap-6 sm:gap-8 rounded-lg border border-gray-200 dark:border-gray-700 p-4 mb-8 lg:mb-10 sm:p-6 bg-white dark:bg-gray-750 shadow-md transition-colors duration-300\"\n         data-link=\"https:\/\/www.likacloud.com\/ko\/tolink\/hosting-com-sitebuilder\/\">\n\n      <div class=\"flex flex-col gap-3 gap-4 sm:gap-6 w-full\">\n        <strong class=\"text-2xl font-semibold text-gray-900 dark:text-gray-200\">\ud638\uc2a4\ud305.com<\/strong>\n        <div class=\"text-gray-600 dark:text-gray-300 word-word\">\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      <div class=\"flex items-center flex-col md:flex-row lg:flex-col xl:flex-row 2xl:flex-col gap-6 shrink-0\">\n                  <a href=\"https:\/\/www.likacloud.com\/ko\/tolink\/hosting-com-sitebuilder\/\">\n                          <!-- \u767d\u5929 -->\n              <img decoding=\"async\" src=\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/09\/20250901222940.svg\" alt=\" LOGO\" class=\"content-promotion-card-icon h-9 min-h-9 dark:hidden\" title=\"\">\n              <!-- \u591c\u95f4 -->\n              <img decoding=\"async\" src=\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/12\/20251228220957.webp\" alt=\" LOGO\" class=\"content-promotion-card-icon h-9 min-h-9 hidden dark:block\" title=\"\">\n                      <\/a>\n          \n        <a href=\"https:\/\/www.likacloud.com\/ko\/tolink\/hosting-com-sitebuilder\/\"\n           class=\"bg-blue-500 w-full md:w-auto lg:w-full xl:w-auto 2xl:w-full text-center !text-white dark:!text-gray-200 !px-5 !py-1.5 rounded-full hover:bg-blue-600 transition-colors\">\n          \ud638\uc2a4\ud305\ub2f7\ucef4 \ubc29\ubb38\ud558\uae30        <\/a>\n      <\/div>\n    <\/div>\n\n    \n<!-- AUTO_SYNCED_PATTERN_INSERT_END -->\n\n\n\n\n\n<h3 class=\"wp-block-heading\">\ud300 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c Tailwind CSS\uc758 \ud074\ub798\uc2a4\uba85 \uc0ac\uc6a9\uc774 \uc77c\uad00\ub418\ub3c4\ub85d \ud558\ub824\uba74 \uc5b4\ub5bb\uac8c \ud574\uc57c \ud560\uae4c\uc694?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ud300\uc758 \uaddc\uce59\uc744 \uc218\ub9bd\ud558\uace0 \uc801\uc808\ud55c \ub3c4\uad6c\ub97c \ud65c\uc6a9\ud558\ub294 \uac83\uc774 \ub9e4\uc6b0 \uc911\uc694\ud569\ub2c8\ub2e4. \ucf54\ub4dc \ud45c\uc900\uc744 \uc815\ud560 \uc218\ub3c4 \uc788\ub294\ub370, \uc608\ub97c \ub4e4\uc5b4 \ud074\ub798\uc2a4\uba85\uc758 \uc815\ub82c \ubc29\uc2dd\uc744 \uba85\uc2dc\ud558\ub294 \uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4. Prettier\uc640 \uac19\uc740 \ud50c\ub7ec\uadf8\uc778\uc744 \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \uad8c\uc7a5\ud569\ub2c8\ub2e4. <code data-no-auto-translation=\"\">prettier-plugin-tailwindcss<\/code> \uc790\ub3d9 \uc815\ub82c \uae30\ub2a5\uc758 \uc0ac\uc6a9 \ubc29\ubc95, \uc5b8\uc81c \ud574\ub2f9 \uae30\ub2a5\uc744 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ucd94\uc0c1\ud654\ud574\uc57c \ud558\ub294\uc9c0 \ub4f1\uc5d0 \ub300\ud55c \ub0b4\uc6a9\uc785\ub2c8\ub2e4. \uacf5\uc720\ub418\ub294 \ub9ac\uc18c\uc2a4\ub098 \ub3c4\uad6c\ub4e4\uc744 \ud65c\uc6a9\ud558\ub294 \ubc29\ubc95\ub3c4 \ud568\uaed8 \uc124\uba85\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. <code data-no-auto-translation=\"\">tailwind.config.js<\/code> \ud30c\uc77c\uc744 \ud1b5\ud574 \ud1a0\ud070\uc758 \ub514\uc790\uc778(\uc0c9\uc0c1, \uac04\uaca9 \ub4f1)\uc744 \ud1b5\uc77c\ud654\ud574\uc57c \ud569\ub2c8\ub2e4. \ub610\ud55c, \ucf54\ub4dc \ub9ac\ubdf0(Code Review)\ub294 \uc77c\uad00\uc131\uc744 \ud655\ubcf4\ud558\uace0 \ucd5c\uc0c1\uc758 \uad00\ud589\uc744 \uacf5\uc720\ud558\ub294 \ub370 \ub9e4\uc6b0 \uc911\uc694\ud55c \uacfc\uc815\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tailwind CSS\ub294 \uae30\uc874\uc758, \uad6c\uc2dd \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \uc0ac\uc6a9\ub418\uace0 \uc788\ub294 \uc804\ud1b5\uc801\uc778 CSS\uc640 \ud568\uaed8 \uc0ac\uc6a9\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Tailwind CSS\ub294 \uae30\uc874\uc758 CSS \uc2a4\ud0c0\uc77c\uc744 \ud655\uc7a5\ud558\uace0 \uac1c\uc120\ud558\ub294 \ub3c4\uad6c\uc774\uae30 \ub54c\ubb38\uc5d0, \ub450 \uac00\uc9c0 \uc2a4\ud0c0\uc77c\uc744 \ub3d9\uc2dc\uc5d0 \uc801\uc6a9\ud558\ub294 \uac83\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc77c\ubd80 \uacbd\uc6b0\uc5d0\ub294 \ub450 \uac00\uc9c0 \uc2a4\ud0c0\uc77c\uc774 \ucda9\ub3cc\ud560 \uc218 \uc788\uc73c\ubbc0\ub85c \uc8fc\uc758\uac00 \ud544\uc694<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ubb3c\ub860 \uac00\ub2a5\ud569\ub2c8\ub2e4.<code data-no-auto-translation=\"\">Tailwind CSS<\/code> \uae30\uc874 \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc810\uc9c4\uc801\uc73c\ub85c \ud1b5\ud569\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud504\ub85c\uc81d\ud2b8\uc758 \uc0c8\ub85c\uc6b4 \uae30\ub2a5\uc774\ub098 \uc0c8 \ud398\uc774\uc9c0\uc5d0\uc11c\ubd80\ud130 \uc0ac\uc6a9\uc744 \uc2dc\uc791\ud558\uc154\ub3c4 \ub429\ub2c8\ub2e4. <code data-no-auto-translation=\"\">Tailwind<\/code>\uae30\uc874 \uc2a4\ud0c0\uc77c\uc744 \ub2e4\uc2dc \uc791\uc131\ud560 \ud544\uc694 \uc5c6\uc774\ub3c4 \uac00\ub2a5\ud569\ub2c8\ub2e4. \ub2e8, PostCSS\uc640 \ucc98\ub9ac \uacfc\uc815\uc774 \uc62c\ubc14\ub974\uac8c \uad6c\uc131\ub418\uc5b4 \uc788\ub294\uc9c0 \ud655\uc778\ud558\uae30\ub9cc \ud558\uba74 \ub429\ub2c8\ub2e4.<code data-no-auto-translation=\"\">Tailwind<\/code> \uc0dd\uc131\ub41c \uc720\ud2f8\ub9ac\ud2f0 \ud074\ub798\uc2a4\ub294 \uae30\uc874\uc758 CSS\uc640 \ud568\uaed8 \uc874\uc7ac\ud558\uac8c \ub429\ub2c8\ub2e4. \uc2a4\ud0c0\uc77c \ucda9\ub3cc\uc758 \uac00\ub2a5\uc131\uc5d0 \uc8fc\uc758\ud558\uc2dc\uace0, \ube4c\ub4dc \uc21c\uc11c\ub098 \ud074\ub798\uc2a4\uc758 \ud2b9\uc774\uc131\uc744 \uc870\uc815\ud558\uc5ec \uc774\ub97c \uad00\ub9ac\ud558\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>","protected":false},"excerpt":{"rendered":"<p>\uc774 \uae00\uc5d0\uc11c\ub294 \uc2e4\uc6a9\uc131\uc744 \ucd5c\uc6b0\uc120\uc73c\ub85c \ud558\ub294 CSS \ud504\ub808\uc784\uc6cc\ud06c\uc778 Tailwind CSS\uc5d0 \ub300\ud574 \uccb4\uacc4\uc801\uc73c\ub85c \uc18c\uac1c\ud569\ub2c8\ub2e4. Tailwind CSS\ub294 \uc138\ubc00\ud55c \uc218\uc900\uc758 \uc720\ud2f8\ub9ac\ud2f0 \ud074\ub798\uc2a4\ub97c \uc0ac\uc6a9\ud558\uc5ec UI\ub97c \uc9c1\uc811 \uad6c\ucd95\ud568\uc73c\ub85c\uc368 \uae30\uc874\uc758 \uc2a4\ud0c0\uc77c \uc791\uc131 \ubc29\uc2dd\uc744 \ud601\uc2e0\ud569\ub2c8\ub2e4. \uae00\uc740 Tailwind CSS\uc758 \ud575\uc2ec \uac1c\ub150, \uc7a5\uc810, \ud658\uacbd \uc124\uc815 \ubc29\ubc95\uc744 \ub2e4\ub8e8\uba70, \uc720\ud2f8\ub9ac\ud2f0 \ud074\ub798\uc2a4\ub97c \uc870\ud569\ud558\ub294 \ubc29\ubc95\uacfc \ubaa8\ubc14\uc77c \uc911\uc2ec\uc758 \ubc18\uc751\ud615 \ub514\uc790\uc778\uc744 \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc744 \uc0c1\uc138\ud788 \uc124\uba85\ud558\uc5ec \uac1c\ubc1c\uc790\ub4e4\uc5d0\uac8c \ud6a8\uc728\uc801\uc778 \ud559\uc2b5 \uacbd\ub85c\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>","protected":false},"author":7,"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"knowledge_category":[281],"class_list":["post-12377963","knowledge_post","type-knowledge_post","status-publish","hentry","knowledge_category-website-building"],"acf":{"site_seo_keywords":"Tailwind CSS,\u5b9e\u7528\u7c7b\u4f18\u5148,\u539f\u5b50\u5316 CSS,\u54cd\u5e94\u5f0f\u8bbe\u8ba1,Web \u5f00\u53d1,\u524d\u7aef\u6846\u67b6,\u4ece\u5165\u95e8\u5230\u5b9e\u6218,Tailwind \u73af\u5883\u914d\u7f6e"},"_links":{"self":[{"href":"https:\/\/www.likacloud.com\/ko\/wp-json\/wp\/v2\/knowledge_posts\/12377963","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":0,"href":"https:\/\/www.likacloud.com\/ko\/wp-json\/wp\/v2\/knowledge_posts\/12377963\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.likacloud.com\/ko\/wp-json\/wp\/v2\/media?parent=12377963"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.likacloud.com\/ko\/wp-json\/wp\/v2\/tags?post=12377963"},{"taxonomy":"knowledge_category","embeddable":true,"href":"https:\/\/www.likacloud.com\/ko\/wp-json\/wp\/v2\/knowledge_category?post=12377963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}