{"id":10509,"date":"2026-09-20T13:23:03","date_gmt":"2026-09-20T04:23:03","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=10509"},"modified":"2026-09-20T15:48:13","modified_gmt":"2026-09-20T06:48:13","slug":"webui-tailwind-nextjs-1","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/09\/20\/webui-tailwind-nextjs-1\/","title":{"rendered":"[WebUI]Tailwind + nextjs – 1"},"content":{"rendered":"\n

\ud83d\udc49\ud83c\udffb \uc6f9\ud398\uc774\uc9c0\ub97c \ud654\uba74\uc5d0 \ud45c\ud604\ud558\uae30 \uc704\ud574\uc11c HTML\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.
HTML is used to display web pages on the screen.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uc774 \uc6f9\ud398\uc774\uc9c0\ub97c \uc2a4\ud0c0\uc77c\ub9c1 \ud558\uae30\uc704\ud574\uc11c\ub294 \uae30\ubcf8\uc801\uc73c\ub85c css\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.
CSS is primarily used to style this webpage.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uc6f9\ud398\uc774\uc9c0 \uc2a4\ud0c0\uc77c\ub9c1\uc744 \ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ud558\ub294 \uae30\ubcf8 css\ucf54\ub4dc\uac00 \ub108\ubb34 \uae38\uae30 \ub54c\ubb38\uc5d0 tailwindcss\ub97c \uc0ac\uc6a9\ud558\uba74 \uac19\uc740 \uae30\ub2a5\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud55c \ucf54\ub4dc\uac00 \ub354 \uc9e7\uc544\uc9d1\ub2c8\ub2e4.
Standard CSS code for styling web pages can be quite lengthy, whereas using Tailwind CSS allows you to implement the same functionality with less code.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb tailwind\ub294 \uc2e4\ud589\uc18d\ub3c4\uac00 \ube60\ub974\uace0 \ub2e4\ud06c\ubaa8\ub4dc\ub4f1\uc758 \uae30\ub2a5\uc744 \uad6c\ud604\ud558\uae30\uac00 \ud6e8\uc52c \uc6a9\uc774\ud569\ub2c8\ub2e4.
Tailwind offers fast execution speeds and makes it much easier to implement features like dark mode.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uc774 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 \ud14d\uc2a4\ud2b8\uc640 \uac04\ub2e8\ud55c \ubc84\ud2bc\uc744 css\uc640 tailwindcss\ub85c \uad6c\ud604\ud569\ub2c8\ub2e4.
In this project, text and simple buttons are implemented using CSS and Tailwind CSS.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb Nextjs\ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131\uc740 \uc774 \ud3ec\uc2a4\ud2b8\uc758 \uac00\uc7a5 \uc544\ub798 \ubd80\ubd84\uc744 \ucc38\uc870\ud558\uc138\uc694
Please refer to the bottom of this post for instructions on creating a Next.js project.<\/p>\n\n\n\n

\n\n\n\n

\ud83d\udcc1 \ud14d\uc2a4\ud2b8 \/ Text<\/p>\n\n\n\n

\u2714\ufe0f tailwincss\uc0ac\uc6a9\ud558\ub824\uba74 \uae30\ubcf8 \uc6f9\ud398\uc774\uc9c0\uc5d0 \uc548\uc758 HTML \ud0dc\uadf8\uc5d0 tailwindcss\ub97c \ub2e4\uc74c\ucc98\ub7fc \uc801\uc6a9\ud569\ub2c8\ub2e4.
To use Tailwind CSS, apply it to the HTML tags within your web page as follows.<\/p>\n\n\n\n

<p className=\"mt-4 text-sm text-gray-400<\/strong>\">Next.js + Tailwind CSS<\/p><\/code><\/pre>\n\n\n\n
1) mt-4 : <\/p>\n\n\n\n
— \uacf5\uc2dd\ubb38\uc11c\/Official Documentation <\/p>\n\n\n\n
 https:\/\/tailwindcss.com\/docs\/margin#adding-margin-to-a-single-side<\/a><\/p>\n\n\n\n
A. \ucef4\ud3ec\ub10c\ud2b8 \uc704\ucabd\uc5d0 4\ub9cc\ud07c\uc758 \uc5ec\ubc31\uc744 \ud655\ubcf4\ud569\ub2c8\ub2e4.
Leave a margin of 4 above the component.<\/p>\n\n\n\n
B. mt\uc606\uc758 \uc22b\uc790\ub294 \uc544\ub798\uc758 \ud45c\ub97c \ucc38\uc870\ud558\uc138\uc694 
Please refer to the table below for the numbers next to ‘mt’.<\/p>\n\n\n\n
\ud074\ub798\uc2a4 \/ Class<\/th>rem<\/th>px <\/th><\/tr><\/thead>
mt-1<\/code><\/td>0.25rem<\/td>4px<\/td><\/tr>
mt-2<\/code><\/td>0.5rem<\/td>8px<\/td><\/tr>
mt-3<\/code><\/td>0.75rem<\/td>12px<\/td><\/tr>
mt-4<\/code><\/td>1rem<\/td>16px<\/td><\/tr>
mt-6<\/code><\/td>1.5rem<\/td>24px<\/td><\/tr>
mt-8<\/code><\/td>2rem<\/td>32px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
2) text-sm :<\/p>\n\n\n\n
— \uad00\ub828 \ubb38\uc11c \/ Official Documents<\/p>\n\n\n\n
 https:\/\/tailwindcss.com\/docs\/font-size#basic-example<\/a><\/p>\n\n\n\n
A.\uae00\uc790\ud06c\uae30\ub97c 14px\ub85c \uc124\uc815\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
B.text\uc606\uc758 \ubb38\uc790\ub294 \uc544\ub798\uc758 \ud45c\ub97c \ucc38\uc870\ud558\uc138\uc694
Please refer to the table below for the characters next to the text.
<\/p>\n\n\n\n
\ud074\ub798\uc2a4\/Class<\/th>rem<\/th>px<\/th>line-height<\/th><\/tr><\/thead>
text-xs<\/code><\/td>0.75rem<\/td>12px<\/td>16px<\/td><\/tr>
text-sm<\/code><\/td>0.875rem<\/td>14px<\/td>20px<\/td><\/tr>
text-base<\/code><\/td>1rem<\/td>16px<\/td>24px – \uae30\ubcf8\uac12\/default value<\/td><\/tr>
text-lg<\/code><\/td>1.125rem<\/td>18px<\/td>28px<\/td><\/tr>
text-xl<\/code><\/td>1.25rem<\/td>20px<\/td>28px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
3)text-gray-400 :<\/p>\n\n\n\n
— \uad00\ub828\ubb38\uc11c \/ Official Documents<\/p>\n\n\n\n
  https:\/\/tailwindcss.com\/docs\/colors#using-color-utilities<\/a><\/p>\n\n\n\n
A.\uae00\uc790 \uc0c9\uc740 \ud68c\uc0c9\uc73c\ub85c \uc124\uc815\ud558\uace0 \uc9c4\ud558\uae30\ub294 400\uc73c\ub85c \uc124\uc815\ud569\ub2c8\ub2e4.
Set the text color to gray and the weight to 400.<\/p>\n\n\n\n
B.\uc22b\uc790\uc5d0 \ubd80\ubd84\uc740 \uc544\ub798\uc758 \uc124\uba85\uc744 \ucc38\uc870\ud558\uc138\uc694
Please refer to the explanation below regarding the numbers.<\/p>\n\n\n\n
text-gray-50\n - \uc544\uc8fc \uc5f0\ud55c \ud68c\uc0c9 \/ Very light gray\n\ntext-gray-200\n - \uc5f0\ud55c \ud68c\uc0c9 \/ Light gray\n\ntext-gray-400\n - \uc57d\uac04 \uc5f0\ud55c \ud68c\uc0c9  \/ A slightly light gray - #9ca3af\n\ntext-gray-600\n - \uc9c4\ud55c \ud68c\uc0c9 \/ Dark gray\n\ntext-gray-900 \n- \uc544\uc8fc \uc9c4\ud55c \ud68c\uc0c9 \/ Very dark gray<\/code><\/pre>\n\n\n\n
\u2714\ufe0f \uae30\ubcf8 CSS\uc5d0\uc11c\ub294 \uc704\uc758 \ucf54\ub4dc\ub97c \uad6c\ud604\ud558\uba74 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.
Implementing the code above using standard CSS results in the following:<\/p>\n\n\n\n
 <p className=\"helper<\/strong>\">Next.js + Pure CSS<\/p>\n     <style>{` ...\n        .helper<\/strong> {\n          margin-top: 16px;\n          font-size: 14px;\n          color: #9ca3af;\n        }\n      `}<\/style><\/code><\/pre>\n\n\n\n
\ud83d\udca1 \uacf5\uc2dd\ubb38\uc11c\ub294 tailwind.com\uc758 \uac80\uc0c9\uc744 \ud65c\uc6a9\ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.
You can find official documents by using the search function on tailwind.com.<\/p>\n\n\n\n
\ud83d\udcc1 \ubc84\ud2bc \/ Button<\/p>\n\n\n\n
\u2714\ufe0f tailwindcss\ub97c \ubc84\ud2bc\uc5d0 \uc801\uc6a9\ud558\uae30 \uc704\ud55c \ucf54\ub4dc\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.
The code for applying Tailwind CSS to a button is as follows.<\/p>\n\n\n\n
\u2714\ufe0f \ubc84\ud2bc \ud14d\uc2a4\ud2b8\ub294 “tailwind \uc2dc\uc791\ud558\uae30\/Start”\uac00 \ud654\uba74\uc5d0 \ud45c\uc2dc\ub418\uace0 \ubc84\ud2bc \ud074\ub9ad\uc2dc “\ud074\ub9ad\ub428\/Clicked”\uac00 \ud45c\uc2dc\ub429\ub2c8\ub2e4.
The button displays “tailwind \uc2dc\uc791\ud558\uae30\/Start,” and changes to “\ud074\ub9ad\ub428\/Clicked” when clicked.<\/p>\n\n\n\n
      <button\n        onClick={handleClick}\n        className=\"px-6 py-3 bg-blue-500 text-white rounded-xl font-bold shadow-md hover:bg-blue-600 hover:-translate-y-0.5 active:scale-95 transition-all\"\n      >\n        {clicked ? '\ud074\ub9ad\ub428\/Clicked \ud83c\udf89' : 'tailwind \uc2dc\uc791\ud558\uae30\/Start'}\n      <\/button><\/code><\/pre>\n\n\n\n
1) \uc704\uc758 \ucf54\ub4dc\uc5d0 \ub300\ud55c \uc124\uba85\uc740 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.
An explanation of the code above is provided below.<\/p>\n\n\n\n
1. \ud06c\uae30 (\uc5ec\ubc31) \/ Size (Margins)\n\npx-6<\/strong>  \n- \uc88c\uc6b0 \uc548\ucabd \uc5ec\ubc31 24px (6 * 4px)\nLeft and right inner margins: 24px (6 \u00d7 4px)\n\npy-3 <\/strong> \n- \uc704\uc544\ub798 \uc548\ucabd \uc5ec\ubc31 12px (3 * 4px)\nTop and bottom inner margins: 12px (3 \u00d7 4px)\n\n2. \uc0c9 \/ Color\n\nbg-blue-500 <\/strong>\n- \ubc30\uacbd\uc0c9 \ud30c\ub780\uc0c9 \uc9c4\ud558\uae30 \uc911\uac04 \uc815\ub3c4 (#3b82f6)\nBackground color: blue, medium intensity.\n\ntext-white<\/strong>\n- \uae00\uc790\uc0c9 \ud770\uc0c9\nText color: white\n\n3. \ubaa8\uc591 \/ shape\n\nrounded-xl<\/strong>\n- \ubaa8\uc11c\ub9ac \ub465\uae00\uac8c 12px\nRounded corners 12px\n\nfont-bold<\/strong>\n- \uae00\uc790 \ub450\uaed8 700 (\uad75\uac8c)\nFont weight 700 (Bold)\n\nshadow-md<\/strong>\n- \uadf8\ub9bc\uc790 \uc911\uac04 \ud06c\uae30\nMedium-sized shadow\n\n4. \uc0c1\ud638\uc791\uc6a9 \/ Interaction\n\nhover:bg-blue-600<\/strong>\n- \ub9c8\uc6b0\uc2a4 \uc62c\ub9ac\uba74 \ubc30\uacbd\uc0c9 \ub354 \uc9c4\ud55c \ud30c\ub791\uc73c\ub85c\nChange the background color to a darker blue on hover.\n\nhover:-translate-y-0.5<\/strong>\n- \ub9c8\uc6b0\uc2a4 \uc62c\ub9ac\uba74 2px \uc704\ub85c \uc0b4\uc9dd \ub738 (-0.5 = -2px)\nHovers up by 2px (-0.5 = -2px)\n\nactive:scale-95<\/strong>\n- \ud074\ub9ad\ud558\ub294 \uc21c\uac04 95% \ud06c\uae30\ub85c \uc0b4\uc9dd \uc791\uc544\uc9d0\nIt shrinks slightly to 95% of its size the moment you click it.\n\ntransition-all <\/strong>\n- \uc704 \ubcc0\ud654\ub4e4\uc744 \ubd80\ub4dc\ub7fd\uac8c \uc560\ub2c8\uba54\uc774\uc158\uc73c\ub85c\nSmoothly animate the above changes<\/code><\/pre>\n\n\n\n
\u2714\ufe0f \uae30\ubcf8 CSS\uc5d0\uc11c\ub294 \uc704\uc758 \ubc84\ud2bc \ucf54\ub4dc\ub97c \uad6c\ud604\ud558\uba74 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.
Implementing the button code above with basic CSS results in the following.<\/p>\n\n\n\n
... ... \n        <button\n          onClick={handleClick}\n          className=\"btn-primary\"\n        >\n          {clicked ? '\ud074\ub9ad\ub428\/Clicked \ud83c\udf89' : 'CSS \uc2dc\uc791\ud558\uae30\/Start'}\n        <\/button>\n... ...\n      <style>{`\n         \/* \ubc84\ud2bc \uae30\ubcf8 \/ Button Basic *\/\n        .btn-primary {\n          padding: 12px 24px;\n          background-color: #3b82f6;\n          color: white;\n          border-radius: 12px;\n          font-weight: 700;\n          font-size: 16px;\n          border: none;\n          cursor: pointer;\n          box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n          transition: all 0.2s ease;\n        }\n        \/* \ubc84\ud2bc \ub9c8\uc6b0\uc2a4 \uc624\ubc84 \/ Button mouseover *\/\n        .btn-primary:hover {\n          background-color: #2563eb;\n          transform: translateY(-2px);\n          box-shadow: 0 6px 10px rgba(0,0,0,0.15);\n        }\n        \/* \ubc84\ud2bc \ud074\ub9ad \/ Button active *\/\n        .btn-primary:active {\n          transform: scale(0.95);\n        }\n        \/* \ubc84\ud2bc \ud558\ub2e8 \ud14d\uc2a4\ud2b8 \/ Text below the button *\/\n        .helper {\n          margin-top: 16px;\n          font-size: 14px;\n          color: #9ca3af;\n        }\n      `}<\/style>\n... ...<\/code><\/pre>\n\n\n\n
\u2714\ufe0f \ub098\uba38\uc9c0\ub294 \ucee8\ud14c\uc774\ub108 \uc785\ub2c8\ub2e4.
The rest are containers.<\/p>\n\n\n\n
— tailwind<\/p>\n\n\n\n
<main className=\"min-h-screen flex flex-col items-center justify-center bg-gray-50\"> ... ... <\/main><\/code><\/pre>\n\n\n\n
1)tailwind\ucf54\ub4dc \uc124\uba85\uc785\ub2c8\ub2e4.
Here is an explanation of the Tailwind code.<\/p>\n\n\n\n
1. min-h-screen\n- \ud654\uba74 \ub192\uc774\ub9cc\ud07c \ucd5c\uc18c \ub192\uc774\ub97c \ud655\ubcf4, \ub0b4\uc6a9\uc774 \uc801\uc5b4\ub3c4 \ud654\uba74 \uaf49 \ucc28\uac8c.\nEnsure a minimum height equal to the screen height so that the content fills the screen, even if there is little content.\n\n2. flex \n- \ud50c\ub809\uc2a4 \ubaa8\ub4dc \ucf1c\uae30\nTurn on Flex mode\n\ndisplay: flex\n- \uc790\uc2dd \uc694\uc18c\ub4e4\uc744 \uc720\uc5f0\ud558\uac8c \ubc30\uce58\ud558\ub294 \ubaa8\ub4dc. \uc774\uac78 \ucf1c\uc57c \uc544\ub798 \uc815\ub82c \uba85\ub839\ub4e4 \uc0ac\uc6a9\uac00\ub2a5 \ud568.\nA mode for flexibly arranging child elements. You must enable this to use the alignment commands below.\n\n3. flex-col \n- \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc758 \ubc29\ud5a5\nOrientation of child components\n- flex-direction: column\n- \uc790\uc2dd\ub4e4\uc744 \uc138\ub85c\ub85c \uc313\uae30 (\ubc84\ud2bc \uc704\uc5d0 \ud14d\uc2a4\ud2b8 \uc544\ub798 \uac19\uc740\ud615\uc2dd) \uc548 \uc4f0\uba74 \uae30\ubcf8\uc740 \uac00\ub85c(row).\nIf you don't specify otherwise, the default layout for children is horizontal (row); stacking them vertically (e.g., text below a button) requires a different setting.\n\n4. items-center \n- \uac00\ub85c(\uc88c\uc6b0) \uc911\uc559 \uc815\ub82c\nHorizontal (left-right) center alignment\n- align-items: center\n- \uc138\ub85c\ub85c \uc313\uc600\uc744 \ub54c\ub294 \uc88c\uc6b0\ub97c \uac00\uc6b4\ub370\ub85c \uc815\ub82c\nWhen stacked vertically, center the left and right sides.\n- flex-col\uc77c \ub54c \uc88c\uc6b0 \uc911\uc559 \uc815\ub82c \ub2f4\ub2f9\nHandles horizontal centering when using flex-col.\n\n5. justify-center \n- \uc138\ub85c(\uc704\uc544\ub798) \uc911\uc559 \uc815\ub82c\nVertical (top-to-bottom) center alignment\n- justify-content: center\n- \uc138\ub85c\ub85c \uc313\uc600\uc744 \ub54c\ub294 \uc704\uc544\ub798\ub97c \uac00\uc6b4\ub370\ub85c \uc815\ub82c\nWhen stacked vertically, center the top and bottom.\n- items-center + justify-center \uac19\uc774 \uc4f0\uba74 \uc815\uac00\uc6b4\ub370 \uc815\ub82c\nUse `items-center` and `justify-center` together to center-align perfectly.\n\n6. bg-gray-50 \n- \ubc30\uacbd\uc0c9\nbackground color\n- background-color: #f9fafb\n- \uc544\uc8fc \uc5f0\ud55c \ud68c\uc0c9. \nA very pale gray.<\/code><\/pre>\n\n\n\n
— css<\/p>\n\n\n\n
<main className=\"wrapper\"> ... ... <\/main>\n <style>{` \n        \/* \ucee8\ud14c\uc774\ub108 \/ Container *\/\n        .wrapper {\n          width: 100%;\n          min-height: 100vh;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          justify-content: center;\n          background-color: #f9fafb;\n        }\n`}<\/style><\/code><\/pre>\n\n\n\n
\n\n\n\n
\ud83d\udcc1 Nextjs \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131 \/ Create a Next.js project<\/p>\n\n\n\n
\u2714\ufe0f nextjs\ud504\ub85c\uc81d\ud2b8\ub97c \ud130\ubbf8\ub110\uc5d0\uc11c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
npx create-next-app@latest<\/code><\/pre>\n\n\n\n
\u2714\ufe0f \uc544\ub798\ucc98\ub7fc \uae30\ubcf8\uac12\uc73c\ub85c Nextjs\ub97c \uae30\ubcf8\uac12\uc73c\ub85c \uc124\uce58\ud558\uba74 tailwindcss\uac00 \uc790\ub3d9\uc73c\ub85c \uc124\uce58\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n
WebUI % npx create-next-app@latest<\/strong>\n\u2714 What is your project named? \u2026 tailwindcss-nextjs<\/strong>\n\u2714 Would you like to use the recommended Next.js defaults? \u203a Yes, use recommended defaults<\/strong>\nCreating a new Next.js app in \/Users\/... ...\/tailwindcss-nextjs.\n\nUsing npm.\n\nInitializing project with template: app-tw \n\n\nInstalling dependencies:\n- next\n- react\n- react-dom\n\nInstalling devDependencies:\n- @tailwindcss\/postcss\n- @types\/node\n- @types\/react\n- @types\/react-dom\n- eslint\n- eslint-config-next\n- tailwindcss<\/strong>\n- typescript\n\n<\/code><\/pre>\n\n\n\n
\n\n\n\n
\ud83d\udcc1 \ud14c\uc2a4\ud2b8 \/ Test<\/p>\n\n\n\n
\u2714\ufe0f tailwind button<\/p>\n\n\n\n
\"\"
tailwindcss<\/figcaption><\/figure>\n\n\n\n
\u2714\ufe0f css button<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
CSS<\/p>\n\n\n\n
\n
\uc694\ud55c\ubcf5\uc74c 8\uc7a5 32\uc808 \/ John 8:32<\/p>\n\n\n\n
“\uadf8\ub9ac\uace0 \ub108\ud76c\ub294 \uc9c4\ub9ac\ub97c \uc54c\uac8c \ub420 \uac83\uc774\uba70, \uc9c4\ub9ac\uac00 \ub108\ud76c\ub97c \uc790\uc720\ub86d\uac8c \ud560 \uac83\uc774\ub2e4.”<\/p>\n\n\n\n
“Then you will know the truth ,and the truth will set you free”<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
\ud83d\udc49\ud83c\udffb \uc6f9\ud398\uc774\uc9c0\ub97c \ud654\uba74\uc5d0 \ud45c\ud604\ud558\uae30 \uc704\ud574\uc11c HTML\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.HTML is used to display web pages on the screen. \ud83d\udc49\ud83c\udffb \uc774 \uc6f9\ud398\uc774\uc9c0\ub97c \uc2a4\ud0c0\uc77c\ub9c1 \ud558\uae30\uc704\ud574\uc11c\ub294 \uae30\ubcf8\uc801\uc73c\ub85c css\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.CSS is primarily used to style this webpage. \ud83d\udc49\ud83c\udffb \uc6f9\ud398\uc774\uc9c0 \uc2a4\ud0c0\uc77c\ub9c1\uc744 \ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ud558\ub294 \uae30\ubcf8 css\ucf54\ub4dc\uac00 \ub108\ubb34 \uae38\uae30 \ub54c\ubb38\uc5d0 tailwindcss\ub97c \uc0ac\uc6a9\ud558\uba74 \uac19\uc740 \uae30\ub2a5\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud55c \ucf54\ub4dc\uac00 \ub354 \uc9e7\uc544\uc9d1\ub2c8\ub2e4.Standard CSS code for styling […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,7],"tags":[],"class_list":["post-10509","post","type-post","status-publish","format-standard","hentry","category-uncategorized","category-website","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/10509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=10509"}],"version-history":[{"count":62,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/10509\/revisions"}],"predecessor-version":[{"id":10574,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/10509\/revisions\/10574"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=10509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=10509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=10509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}