{"id":11133,"date":"2026-09-27T10:31:36","date_gmt":"2026-09-27T01:31:36","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=11133"},"modified":"2026-09-27T16:06:08","modified_gmt":"2026-09-27T07:06:08","slug":"webui-tailwind-nextjs-2","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/09\/27\/webui-tailwind-nextjs-2\/","title":{"rendered":"[WebUI]Tailwind + nextjs(card) \u2013 2"},"content":{"rendered":"\n

\ud83d\udc49\ud83c\udffb \uce74\ub4dc\ub294 \uc6f9 \uc571\uc774\ub098 \ubaa8\ubc14\uc77c \uc571\uc5d0\uc11c \ub9e4\uc6b0 \ub9ce\uc774 \uc4f0\uc774\ub294 \uc694\uc18c\uc785\ub2c8\ub2e4.
Cards are a widely used element in web and mobile apps.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \ub370\uc774\ud130\ub97c \ud654\uba74\uc5d0 \ud45c\uc2dc\ud560 \ub54c \uce74\ub4dc \uc694\uc18c\uc5d0 \ub370\uc774\ud130\ub97c \ub2f4\uc544 \ud654\uba74\uc5d0 \ud45c\ud604\ud558\ub294 \uacbd\uc6b0\uac00 \ub9e4\uc6b0 \ub9ce\uc2b5\ub2c8\ub2e4.
When displaying data on the screen, it is very common to present it using card elements.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb tailwind\ub294 \uc544\ub798\uc758 \uc6f9\uc0ac\uc774\ud2b8\uc758 \uac80\uc0c9\uc744 \ud1b5\ud574\uc11c \uc790\uc138\ud55c \ub0b4\uc6a9\uc744 \ud655\uc778 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
You can find detailed information about Tailwind by searching on the website below.<\/p>\n\n\n\n

https:\/\/tailwindcss.com\/docs\/installation\/using-vite<\/a><\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uc804\uccb4 \ucf54\ub4dc\ub294 \uae43\ud5c8\ube0c\uc5d0\uc11c \ud655\uc778 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
You can find the full code on GitHub.<\/p>\n\n\n\n

https:\/\/github.com\/gideonslife01\/flm-webui<\/a><\/p>\n\n\n\n

\n\n\n\n

\ud83d\udcc1 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8 \/ Typescript<\/p>\n\n\n\n

\u2714\ufe0f page.tsx\ub294 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.
page.tsx uses TypeScript.<\/p>\n\n\n\n

\u2714\ufe0f \ub9cc\uc57d\uc5d0 \uc5d0\ub514\ud130\ub85c \ucf54\ub4dc \uc624\ud508\uc2dc \ud0dc\uadf8 \ubd80\ubd84\uc5d0 \ube68\uac04 \uc904\uc774 \uc0dd\uae30\uba74 \uc544\ub798\ucc98\ub7fc \ubaa8\ub4c8\uc744 \uc124\uce58\ud569\ub2c8\ub2e4.
If a red line appears under the tag section when opening the code in the editor, install the module as shown below.<\/p>\n\n\n\n

\u2714\ufe0f vscode\ub098 \uc5d0\ub514\ud130\uac00 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc778\uc2dd\ud560 \uc218 \uc788\uac8c \ub2e4\uc74c\ucc98\ub7fc \uc124\uce58\ud569\ub2c8\ub2e4.
Install the following so that VS Code or your editor can recognize TypeScript.<\/p>\n\n\n\n

npm install -D @types\/react @types\/node<\/code><\/pre>\n\n\n\n
\ud83d\udcc1 \ud0dc\uadf8 \uad6c\uc870 \/ Tag structure<\/p>\n\n\n\n
\u2714\ufe0f \uce74\ub4dc \ubd80\ubd84\uc758 HTML\uae30\ubcf8 \uad6c\uc870\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.
The basic HTML structure for the card section is as follows.<\/p>\n\n\n\n
\u2714\ufe0f \uc5ec\uae30\uc11c \uc911\uc694\ud558\uac8c\ubd10\uc57c\ud558\ub294\uac74 \uac01 \uc694\uc18c(div,p,button…)\ub4e4\uc758 \ubc30\uce58 \ubd80\ubd84\uc785\ub2c8\ub2e4.
The key aspect to focus on here is the layout of the individual elements (div, p, button, etc.).<\/p>\n\n\n\n
    <main className=\"min-h-screen flex items-center justify-center bg-gray-50 p-4\">\n\n      {\/* \uce74\ub4dc \uc2dc\uc791 \/ Start Card *\/}<\/strong>\n      <div className=\"w-full max-w-sm bg-white rounded-2xl shadow-lg overflow-hidden\">\n\n        {\/* \uc774\ubbf8\uc9c0 \uc601\uc5ed \/ Image Area *\/}<\/strong>\n        <div className=\"h-48 bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center\">\n          <span className=\"text-5xl\">\ud83d\ude80<\/span>\n        <\/div>\n\n        {\/* \ud14d\uc2a4\ud2b8 \uc601\uc5ed \/ Text area *\/}<\/strong>\n        <div className=\"p-6\">\n          <div className=\"flex items-center justify-between\">\n            <h2 className=\"text-xl font-bold text-gray-900\">Freelifemakers<\/h2>\n            <span className=\"px-2 py-1 text-xs font-bold bg-blue-100 text-blue-600 rounded-full\">NEW<\/span>\n          <\/div>\n          <p className=\"mt-2 text-sm text-gray-400\">\n            Next.js + Tailwind\ub85c \ub9cc\ub4e0 \uc18c\uac1c \uce74\ub4dc\uc785\ub2c8\ub2e4.<br><\/br>\n            This is an introductory card built with Next.js and Tailwind.\n          <\/p>\n\n          {\/* \ubc84\ud2bc \/ Button *\/}<\/strong>\n          <div className=\"mt-6 flex gap-3\">\n            <button\n              onClick={() => setLiked(!liked)}\n              className={`flex-1 py-3 rounded-xl font-bold transition-all active:scale-95 ${liked ? 'bg-red-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}\n            >\n              {liked ? '\u2764\ufe0f \uc88b\uc544\uc694\/like' : '\ud83e\udd0d \uc88b\uc544\uc694\/like'}\n            <\/button>\n            <button className=\"flex-1 py-3 bg-blue-500 text-white rounded-xl font-bold shadow-md hover:bg-blue-600 hover:-translate-y-0.5 transition-all active:scale-95\">\n              \uc2dc\uc791\ud558\uae30 \/ Start\n            <\/button>\n          <\/div>\n          \n        <\/div>\n      <\/div>\n      {\/* \uce74\ub4dc \ub05d \/ card end *\/}\n    <\/main><\/code><\/pre>\n\n\n\n
\ud83d\udcc1 \uac00\ub85c\ubc30\uce58 \/ Horizontal layout<\/p>\n\n\n\n
\u2714\ufe0f \uac01 \uc694\uc18c\ub4e4\uc740 \uae30\ubcf8\uc801\uc73c\ub85c \uc138\ub85c\ub85c \ubc30\uce58\ub429\ub2c8\ub2e4.
Each element is arranged vertically by default.<\/p>\n\n\n\n
\u2714\ufe0f \uc694\uc18c\ub4e4\uc758 \ubc30\uce58\ub97c \ucf54\ub4dc\ub85c \uc870\uc815\ud558\ub824\uba74 flex\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.
Use flex to adjust the layout of elements via code.<\/p>\n\n\n\n
\u2714\ufe0f \uce74\ub4dc\uac00 \uc2dc\uc791\ub418\ub294 \ubd80\ubd84\uc5d0 flex\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc740 \uacbd\uc6b0\uc785\ub2c8\ub2e4. \uc774 \uacbd\uc6b0 \uae30\ubcf8 \uac12\uc73c\ub85c \uac01 \uc694\uc18c\ub294 \uc138\ub85c\ub85c \ubc30\uce58\ub429\ub2c8\ub2e4.
This is a case where flex<\/code> is not used at the start of the card. In this instance, the elements are arranged vertically by default.<\/p>\n\n\n\n
      {\/* \uce74\ub4dc \uc2dc\uc791 \/ Start Card *\/}\n      <div className=\"w-full max-w-sm bg-white rounded-2xl shadow-lg overflow-hidden\">\n              ... ...\n      <\/div><\/code><\/pre>\n\n\n\n
\"\"
default<\/figcaption><\/figure>\n\n\n\n
\u2714\ufe0f flex\ub97c \uc0ac\uc6a9\ud55c \uacbd\uc6b0\uc785\ub2c8\ub2e4. \uc774 \uacbd\uc6b0 \uc774\ubbf8\uc9c0\uc640 \ud14d\uc2a4\ud2b8\uac00 \uac00\ub85c \ubc30\uce58\ub418\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
      {\/* \uce74\ub4dc \uc2dc\uc791 \/ Start Card *\/}\n      <div className=\"w-full flex<\/strong> max-w-sm bg-white rounded-2xl shadow-lg overflow-hidden\">\n              ... ...\n      <\/div><\/code><\/pre>\n\n\n\n
\"\"
Horizontal layout<\/figcaption><\/figure>\n\n\n\n
\ud83d\udcc1 \uc138\ub85c\ubc30\uce58 \/ Vertical layout<\/p>\n\n\n\n
\u2714\ufe0f \uae30\ubcf8\uac12\uc740 \uc138\ub85c \ubc30\uce58\uc9c0\ub9cc \uc815\ub82c\uae30\ub2a5\uc744 \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c flex-col\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
\u2714\ufe0f \uc544\ub798\ucc98\ub7fc \ubc84\ud2bc \ubd80\ubd84\uc5d0 \uc544\ub798 \ucc98\ub7fc flex-1\ub85c \uc801\uc6a9\ud558\uace0 <div className=”mt-6 flex gap-3″> \uc774\ub807\uac8c \uc801\uc6a9\ud558\uba74 \ub808\uc774\uc544\uc6c3\uc774 \uae68\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\u2714\ufe0f flex-1 \uac00\ub85c \ubaa8\ub4dc\uc5d0\uc11c \uc544\uc774\ud15c\uc774 \ucc28\uc9c0\ud558\ub294 \uacf5\uac04\uc774 1:1 \ube44\uc728\ub85c \ubc30\uce58\ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
 <button\n       onClick={() => setLiked(!liked)}\n       className={`flex-1<\/strong> py-3 rounded-xl ... ... > ... ... <\/button><\/code><\/pre>\n\n\n\n
\u2714\ufe0f \uadf8\ub798\uc11c \ucf54\ub4dc\ub97c \ub2e4\uc74c\uacfc \uac19\uc774 \ubc14\uafc9\ub2c8\ub2e4. w-full\uc740 \uc694\uc18c\uac00 \uc804\uccb4 \uacf5\uac04\uc744 \ucc28\uc9c0\ud558\uac8c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
\u2714\ufe0f \ubc84\ud2bc\uc774 \ub450\uac1c \uc788\ub2e4\uba74 \uac00\ub85c\ubaa8\ub4dc\uc5d0\uc11c w-full\uc744 \uc801\uc6a9\ud558\uba74 1:1\ube44\uc728\ub85c \ubc30\uce58\ub418\uace0 \uc138\ub85c \ubaa8\ub4dc\uc5d0\uc11c\ub294 \uc804\uccb4 \uacf5\uac04\uc744 \ucc28\uc9c0 \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
   <button\n        onClick={() => setLiked(!liked)}\n        className={`w-full<\/strong> py-3 rounded-xl ... ...> ... ... <\/button?<\/code><\/pre>\n\n\n\n
\u2714\ufe0f \uc544\ub798\ub294 flex-col\uc744 \uc774\uc6a9\ud574\uc11c \uc138\ub85c \ubc30\uce58\ub97c \uc801\uc6a9\ud55c \ubaa8\uc2b5\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
— \ucf54\ub4dc  \/  Code<\/p>\n\n\n\n
       {\/* \ubc84\ud2bc \/ Button *\/}\n          <div className=\"mt-6 flex-col<\/strong> gap-3\">\n            <button\n              onClick={() => setLiked(!liked)}\n              className={`w-full py-3 rounded-xl font-bold transition-all active:scale-95 ${liked ? 'bg-red-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}\n            >\n              {liked ? '\u2764\ufe0f \uc88b\uc544\uc694\/like' : '\ud83e\udd0d \uc88b\uc544\uc694\/like'}\n            <\/button>\n            <button className=\"w-full py-3 bg-blue-500 text-white rounded-xl font-bold shadow-md hover:bg-blue-600 hover:-translate-y-0.5 transition-all active:scale-95\">\n              \uc2dc\uc791\ud558\uae30 \/ Start\n            <\/button>\n          <\/div>\n\n       {\/* \ubc84\ud2bc flex \/ Button flex *}\n          <div className=\"mt-6 flex<\/strong>\">\n            <button\n              onClick={() => setLiked(!liked)}\n              className={`w-full py-3  ${liked ? 'bg-red-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}\n            >\n              {liked ? '\u2764\ufe0f \uc88b\uc544\uc694\/like' : '\ud83e\udd0d \uc88b\uc544\uc694\/like'}\n            <\/button>\n            <button className=\"w-full py-3 bg-blue-500 \">\n              \uc2dc\uc791\ud558\uae30 \/ Start\n            <\/button>\n          <\/div><\/code><\/pre>\n\n\n\n
\"\"
flex-col<\/figcaption><\/figure>\n\n\n\n
\ud83d\udca1 flex\uc5d0\uc11c \uc124\uc815 \uac12\n \n1.flex \n- \uc694\uc18c \uac00\ub85c \ubc30\uce58 \/ Horizontal element layout\n\n2.flex-col \n-  \uc694\uc18c \uc138\ub85c \ubc30\uce58 \/ Vertical element arrangement\n\n3.justify-center \n- \uac00\ub85c \uc911\uc559 \uc815\ub82c \/ Center-aligned horizontally\n\n4.items-center \n- \uc704 \uc544\ub798 \uc911\uc559 \uc815\ub82c \/ Vercital center alignment \n\n5.gap-3 \n- \uc694\uc18c \uc0ac\uc774 \uac04\uaca9 12px \/ 12px spacing between elements\n\n6.justify-between \n- \uc694\uc18c\ub97c \uc591\ucabd \ub05d\uc73c\ub85c \ubc30\uce58 (ex. \uc81c\ubaa9\uc740 \uc67c\ucabd, \ubc43\uc9c0\ub294 \uc624\ub978\ucabd)\nPosition elements at both ends (e.g., title on the left, badge on the right).<\/code><\/pre>\n\n\n\n
\ud83d\udcc1 CSS<\/p>\n\n\n\n
\u2714\ufe0f \uc138\ub85c \uc815\ub82c(\uae30\ubcf8 \uac12) \/ Vertical alignment (default)<\/p>\n\n\n\n
        \n        <style> ...\n        \/* \uce74\ub4dc \ubcf8\uccb4 \/ Card body *\/\n        .card {\n          width: 100%;\n          max-width: 384px; \/* max-w-sm = 384px *\/\n          background-color: white;\n          border-radius: 16px; \/* rounded-2xl *\/\n          box-shadow: 0 10px 15px rgba(0,0,0,0.1);\n          overflow: hidden;\n        } ...\n        <\/style><\/code><\/pre>\n\n\n\n
\u2714\ufe0f \uac00\ub85c\uc815\ub82c \/ Horizontal alignment(flex)<\/p>\n\n\n\n
        <style> ...\n        .card-actions {\n          margin-top: 24px;\n          display: flex;\n          gap: 12px;\n        } ... ...\n        <\/style><\/code><\/pre>\n\n\n\n
\u2714\ufe0f \uc138\ub85c\uc815\ub82c flex \/ Vertical alignment flex<\/p>\n\n\n\n
        <style> ...\n         .card-actions {\n          display: flex;\n          flex-direction: column; \/* vertical *\/\n          gap: 12px;\n        } ... ...\n        <\/style><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\ud83d\udc49\ud83c\udffb \uce74\ub4dc\ub294 \uc6f9 \uc571\uc774\ub098 \ubaa8\ubc14\uc77c \uc571\uc5d0\uc11c \ub9e4\uc6b0 \ub9ce\uc774 \uc4f0\uc774\ub294 \uc694\uc18c\uc785\ub2c8\ub2e4.Cards are a widely used element in web and mobile apps. \ud83d\udc49\ud83c\udffb \ub370\uc774\ud130\ub97c \ud654\uba74\uc5d0 \ud45c\uc2dc\ud560 \ub54c \uce74\ub4dc \uc694\uc18c\uc5d0 \ub370\uc774\ud130\ub97c \ub2f4\uc544 \ud654\uba74\uc5d0 \ud45c\ud604\ud558\ub294 \uacbd\uc6b0\uac00 \ub9e4\uc6b0 \ub9ce\uc2b5\ub2c8\ub2e4.When displaying data on the screen, it is very common to present it using card elements. \ud83d\udc49\ud83c\udffb tailwind\ub294 \uc544\ub798\uc758 \uc6f9\uc0ac\uc774\ud2b8\uc758 \uac80\uc0c9\uc744 \ud1b5\ud574\uc11c […]<\/p>\n","protected":false},"author":1,"featured_media":11164,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,1,7,29],"tags":[],"class_list":["post-11133","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-uncategorized","category-website","category-webui","has-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/11133","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=11133"}],"version-history":[{"count":55,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/11133\/revisions"}],"predecessor-version":[{"id":11196,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/11133\/revisions\/11196"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media\/11164"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=11133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=11133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=11133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}