CSS Framework & Library

wonder1ng·2025년 1월 15일
CSSbootstrapdaisyuitailwindCSS풀스택기초프론트엔드기초

풀스택 기초

목록 보기
4/12

01 tailwindcss

  • tailwindcss: CSS 프레임워크로 각 HTML 요소에 스타일을 적용하는 데 필요한 작은 유틸리티 클래스를 제공.(ChatGPT 응답)

    • css를 사용하여 클래스명을 이용해 사용
    • react와 궁합이 좋음
    • 사이트 주소(https://tailwindcss.com/)

  • 사용법: tailwindcss Get started with Tailwind CSS 참조

    • 이 포스트는 cdn 방법 사용.
    • 클래스명은 tailwindcss docs에서 crtl + k로 찾으면 됨.
    • 형식은 예약어와 임의값([])이 있음 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- cdn 연결 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- tailwindcss에 css reset도 포함됨. -->
</head>
<body>
  <!-- tailwind 예약어 사용 -->
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
  <!-- 임의값 지정 사용 -->
  <h1 class="text-[24px] font-[600] underline">Hello world!</h1>
</body>
</html>

  • 기본 단위

    • 숫자: 0.25rem. (ex: w-4(1rem), h-10(2.5rem)
    • sm, md, lg, xl, 2xl, 3xl: small, middle, large, extra large, 2extra large, 3extra large
    • t, b, r, l, s, e: top, bottom, right, left, start, end. -(하이픈)이 붙을 때도 있음(ex: rounded-tl).

  • 주요 클래스(ChatGPT 응답)

범주클래스설명
높이h-{size}높이 설정 (예: h-10, h-full)
너비w-{size}너비 설정 (예: w-10, w-full)
여백 (Margin)m-{size}모든 방향에 여백 적용
mt-{size}, mb-{size}, ml-{size}, mr-{size}각 방향별 여백 설정
패딩 (Padding)p-{size}모든 방향에 패딩 적용
pt-{size}, pb-{size}, pl-{size}, pr-{size}각 방향별 패딩 설정
테두리border기본 테두리 설정
border-{color}테두리 색상 설정
border-{width}테두리 두께 설정
border-t, border-b, border-l, border-r특정 방향에 테두리 설정
테두리 곡률rounded, rounded-{size}, rounded-tl, rounded-br모서리 둥글게 처리
배경색bg-{color}배경색 설정
bg-{color}-{intensity}특정 색상과 농도 설정
배경 투명도bg-opacity-{value}배경 투명도 설정 (0~100%)
글자 크기text-{size}텍스트 크기 설정
text-xs, text-sm, text-lg, text-xl 등다양한 텍스트 크기
글자 색text-{color}텍스트 색상 설정
글꼴font-{family}글꼴 설정
font-bold, font-medium, font-light 등글꼴 두께 설정
텍스트 장식underline, line-through, no-underline텍스트 장식 (밑줄, 취소선 등) 설정
글자 간격tracking-tight, tracking-normal, tracking-wide글자 간격 설정
텍스트 높이leading-none, leading-tight, leading-loose텍스트 줄 간격 설정
텍스트 정렬text-left, text-center, text-right텍스트 정렬 설정
수직 정렬align-baseline, align-middle요소의 수직 정렬 설정
컬럼columns-{n}텍스트나 요소의 열 수 설정
반응형sm:, md:, lg:, xl:반응형 클래스 (화면 크기에 따라 적용)
위치static, relative, absolute, fixed, sticky위치 설정 (정적, 상대적, 절대적, 고정, 고정)
디스플레이block, inline, inline-block, hidden, flex, grid, inline-flex, inline-grid디스플레이 속성 설정
플렉스flex-row, flex-col플렉스 방향 설정
justify-center, justify-between, justify-start, justify-end플렉스 아이템의 가로 정렬 설정
items-center, items-start, items-end플렉스 아이템의 세로 정렬 설정
플렉스 래핑flex-wrap, flex-nowrap플렉스 아이템의 래핑 설정
순서order-{number}요소의 표시 순서 설정 (기본 0)
숨김/보이기visible, invisible요소 보이기/숨기기 설정
그리드grid-cols-{n}그리드 열 개수 설정
gap-{size}그리드 및 플렉스 항목 간 간격 설정
그리드 아이템col-span-{n}, row-span-{n}그리드 아이템의 열/행 병합 설정
오버플로우overflow-auto, overflow-hidden, overflow-scroll오버플로우 설정
반전 효과invert이미지 반전 효과
그라데이션bg-gradient-to-r, bg-gradient-to-t그라데이션 배경 설정
박스 그림자shadow, shadow-md, shadow-lg, shadow-xl박스 그림자 효과 설정

01-01 width, height, margin, padding

  • 예시 코드
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      div {
        border: 1px solid gray;
      }
    </style>
  </head>
  <body>
    <div class="w-10 h-10 m-10 p-10"></div>
    <div class="w-[100px] h-[100px] m-[100px] p-[100px]"></div>
    <div class="w-full max-w-[1000px] min-h-20 m-px p-0"></div>
  </body>
</html>
  • width & margin: w-[], h-[]
ClassProperties
w-0width: 0px;
w-pxwidth: 1px;
w-autowidth: auto;
w-fullwidth: 100%;
w-screenwidth: 100vw;
w-svwwidth: 100svw;
w-lvwwidth: 100lvw;
w-dvwwidth: 100dvw;
w-minwidth: min-content;
w-maxwidth: max-content;
w-fitwidth: fit-content;

※ 참고
https://tailwindcss.com/docs/width
https://tailwindcss.com/docs/height

  • min & max: min-w-[], max-h-[]
ClassProperties
min-w-0min-width: 0px;
min-w-pxmin-width: 1px;
min-w-fullmin-width: 100%;
min-w-minmin-width: min-content;
min-w-maxmin-width: max-content;
min-w-fitmin-width: fit-content;

※ 참고
https://tailwindcss.com/docs/min-width
https://tailwindcss.com/docs/max-width
https://tailwindcss.com/docs/min-height
https://tailwindcss.com/docs/max-height

  • margin: m-[]
ClassProperties
m-0margin: 0px;
m-pxmargin: 1px;
m-automargin: auto;
mx-automargin-left: auto;
margin-right: auto;
my-automargin-top: auto;
margin-bottom: auto;
ms-automargin-inline-start: auto;
me-automargin-inline-end: auto;
mt-automargin-top: auto;
mr-automargin-right: auto;
mb-automargin-bottom: auto;
ml-automargin-left: auto;

※ 참고: https://tailwindcss.com/docs/margin

  • padding: p-[]
ClassProperties
p-0padding: 0px;
p-pxpadding: 1px;
px-0padding-left: 0px;
padding-right: 0px;
py-0padding-top: 0px;
padding-bottom: 0px;

※ 참고: https://tailwindcss.com/docs/padding

01-02 border(width, style, color, radius)

  • border width: border-[]
ClassProperties
border-0border-width: 0px;
borderborder-width: 1px;
border-xborder-left-width: 1px;
border-right-width: 1px;
border-yborder-top-width: 1px;
border-bottom-width: 1px;
border-sborder-inline-start-width: 1px;
border-eborder-inline-end-width: 1px;
border-tborder-top-width: 1px;
border-rborder-right-width: 1px;
border-bborder-bottom-width: 1px;
border-lborder-left-width: 1px;

※ 참고: https://tailwindcss.com/docs/border-width

  • border style: border-[]
ClassProperties
border-solidborder-style: solid;
border-dashedborder-style: dashed;
border-dottedborder-style: dotted;
border-doubleborder-style: double;
border-hiddenborder-style: hidden;
border-noneborder-style: none;

※ 참고: https://tailwindcss.com/docs/border-style

  • border color: border-[color]-[opacity] (opacity는 50, 100~900(100단위), 950 존재)
ClassProperties
border-inheritborder-color: inherit;
border-currentborder-color: currentColor;
border-transparentborder-color: transparent;
border-blackborder-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
border-whiteborder-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
border-[color]-50border-color: rgb([] [] [] / var(--tw-border-opacity, 1));
border-[color]-[n00]border-color: rgb([] [] [] / var(--tw-border-opacity, 1));
border-[color]-950border-color: rgb([] [] [] / var(--tw-border-opacity, 1));

※ 참고: https://tailwindcss.com/docs/border-color

  • border radius: rounded-[]
ClassProperties
rounded-noneborder-radius: 0px;
roundedborder-radius: 0.25rem; /* 4px */
rounded-smborder-radius: 0.125rem; /* 2px */
rounded-fullborder-radius: 9999px;
rounded-sborder-start-start-radius: 0.25rem; /* 4px */
border-end-start-radius: 0.25rem; /* 4px */
rounded-eeborder-end-end-radius: 0.25rem; /* 4px */

※ 참고: https://tailwindcss.com/docs/border-radius

01-03 background(color, opacity, image, repeat, position)

  • background-color: bg-[color]-[opacity]
ClassProperties
bg-inheritbackground-color: inherit;
bg-currentbackground-color: currentColor;
bg-transparentbackground-color: transparent;
bg-blackbackground-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
bg-whitebackground-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
bg-[color]-50background-color: rgb([] [] [] / var(--tw-bg-opacity, 1));
bg-[color]-[n00]background-color: rgb([] [] [] / var(--tw-border-opacity, 1));
bg-[color]-950background-color: rgb([] [] [] / var(--tw-border-opacity, 1));

※ 참고: https://tailwindcss.com/docs/background-color

  • background-opacity: color 클래스 뒤에 /[숫자]. 0 ~ 100
    • ex) bg-sky-500/100, bg-sky-500/50, bg-sky-500/[0.6]

※ 참고: https://tailwindcss.com/docs/background-color#changing-the-opacity

  • background-image: bg-gradient-to-[]
ClassProperties
bg-nonebackground-image: none;
bg-gradient-to-tbackground-image: linear-gradient(to top, var(--tw-gradient-stops));
bg-gradient-to-trbackground-image: linear-gradient(to top right, var(--tw-gradient-stops));
bg-gradient-to-rbackground-image: linear-gradient(to right, var(--tw-gradient-stops));
bg-gradient-to-brbackground-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
bg-gradient-to-bbackground-image: linear-gradient(to bottom, var(--tw-gradient-stops));
bg-gradient-to-blbackground-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
bg-gradient-to-lbackground-image: linear-gradient(to left, var(--tw-gradient-stops));
bg-gradient-to-tlbackground-image: linear-gradient(to top left, var(--tw-gradient-stops));

※ 참고: https://tailwindcss.com/docs/background-image

  • background repeat: bg-repeat-[]
ClassProperties
bg-repeatbackground-repeat: repeat;
bg-no-repeatbackground-repeat: no-repeat;
bg-repeat-xbackground-repeat: repeat-x;
bg-repeat-ybackground-repeat: repeat-y;
bg-repeat-roundbackground-repeat: round;
bg-repeat-spacebackground-repeat: space;

※ 참고: https://tailwindcss.com/docs/background-repeat

  • background position: bg-[position]
ClassProperties
bg-bottombackground-position: bottom;
bg-centerbackground-position: center;
bg-leftbackground-position: left;
bg-left-bottombackground-position: left bottom;
bg-left-topbackground-position: left top;
bg-rightbackground-position: right;
bg-right-bottombackground-position: right bottom;
bg-right-topbackground-position: right top;
bg-topbackground-position: top;

※ 참고: https://tailwindcss.com/docs/background-position

01-04 Typography(size, color, weight, line height, align, family)

  • font-size: text-[]
Classfont-sizeline-height
text-xs0.75rem; / 12px /1rem; / 16px /
text-sm0.875rem; / 14px /1.25rem; / 20px /
text-base1rem; / 16px /1.5rem; / 24px /
text-lg1.125rem; / 18px /1.75rem; / 28px /
text-xl1.25rem; / 20px /1.75rem; / 28px /
text-9xl8rem; / 128px /1;

※ 참고: https://tailwindcss.com/docs/font-size

  • font color: text-[color]-[opacity]
ClassProperties
text-inheritcolor: inherit;
text-currentcolor: currentColor;
text-transparentcolor: transparent;
text-[color]-[opacity]color: rgb([] [] [] / var(--tw-text-opacity, 1));

※ 참고: https://tailwindcss.com/docs/text-color

  • font weight: font-[]
ClassProperties
font-thin100
font-extralight200
font-light300
font-normal400
font-medium500
font-semibold600
font-bold700
font-extrabold800
font-black900

※ 참고: https://tailwindcss.com/docs/font-weight

  • line height: leading-[]
ClassProperties
leading-30.75rem; / 12px /
leading-102.5rem; / 40px /
leading-none1;
leading-tight1.25;
leading-snug1.375;
leading-normal1.5;
leading-relaxed1.625;
leading-loose2;

※ 참고: https://tailwindcss.com/docs/line-height

  • text-align: text-[]
ClassProperties
text-leftleft;
text-centercenter;
text-rightright;
text-justifyjustify;
text-startstart;
text-endend;

※ 참고: https://tailwindcss.com/docs/text-align

  • vertical-align: align-[]
ClassProperties
align-baselinebaseline;
align-toptop;
align-middlemiddle;
align-bottombottom;
align-text-toptext-top;
align-text-bottomtext-bottom;
align-subsub;
align-supersuper;

※ 참고: https://tailwindcss.com/docs/vertical-align

  • font-family
ClassProperties
font-sansfont-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-seriffont-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-monofont-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

※ 참고: https://tailwindcss.com/docs/font-family

01-06 Pseudo Class & Pseudo Element

  • 콜론(:)으로 사용
Class예시 코드
hoverhover:bg-blue-500
focusfocus:ring-2 focus:ring-blue-500
activeactive:bg-blue-700
visitedvisited:text-purple-500
first-childfirst-child:text-red-500
last-childlast-child:text-green-500
nth-childnth-child(2):text-blue-500
eveneven:bg-gray-100
oddodd:bg-gray-200
disableddisabled:bg-gray-300
checkedchecked:bg-green-500
focus-visiblefocus-visible:outline-none
group-hovergroup hover:bg-gray-200 group-hover:text-red-500
group-focusgroup focus:bg-blue-500 group-focus:text-white
beforebefore:content-['Hello'] before:text-lg
afterafter:content-['!'] after:text-xl
first-letterfirst-letter:text-4xl
first-linefirst-line:font-bold
placeholderplaceholder:text-gray-400
selectionselection:bg-yellow-300
backdropbackdrop:bg-black backdrop:bg-opacity-50

※ 참고: https://tailwindcss.com/docs/hover-focus-and-other-states#appendix

01-06 반응형

  • min: 테이블 참고
Breakpoint prefixMinimum widthCSS
sm640px@media (min-width: 640px) { ... }
md768px@media (min-width: 768px) { ... }
lg1024px@media (min-width: 1024px) { ... }
xl1280px@media (min-width: 1280px) { ... }
2xl1536px@media (min-width: 1536px) { ... }

※ 참고: https://tailwindcss.com/docs/responsive-design

  • max: 테이블 참고
Breakpoint prefixMaximum widthCSS
max-sm639px@media not all and (min-width: 640px) { ... }
max-md767px@media not all and (min-width: 768px) { ... }
max-lg1023px@media not all and (min-width: 1024px) { ... }
max-xl1279px@media not all and (min-width: 1280px) { ... }
max-2xl1535px@media not all and (min-width: 1536px) { ... }

※ 참고: https://tailwindcss.com/docs/responsive-design#targeting-a-breakpoint-range

  • 임의값: min-[], max-[]
    • ex) <div class="min-[320px]:text-center max-[600px]:bg-sky-300">

※ 참고: https://tailwindcss.com/docs/responsive-design#arbitrary-values

01-07 display

ClassProperties
blockdisplay: block;
inline-blockdisplay: inline-block;
inlinedisplay: inline;
flexdisplay: flex;
inline-flexdisplay: inline-flex;
tabledisplay: table;
inline-tabledisplay: inline-table;
table-captiondisplay: table-caption;
table-celldisplay: table-cell;
table-columndisplay: table-column;
table-column-groupdisplay: table-column-group;
table-footer-groupdisplay: table-footer-group;
table-header-groupdisplay: table-header-group;
table-row-groupdisplay: table-row-group;
table-rowdisplay: table-row;
flow-rootdisplay: flow-root;
griddisplay: grid;
inline-griddisplay: inline-grid;
contentsdisplay: contents;
list-itemdisplay: list-item;
hiddendisplay: none;

※ 참고: https://tailwindcss.com/docs/display

01-08 flex

  • flex: flex-[]
ClassProperties
flexdisplay: flex;
flex-1flex: 1 1 0%;
flex-autoflex: 1 1 auto;
flex-initialflex: 0 1 auto;
flex-noneflex: none;

※ 참고: https://tailwindcss.com/docs/flex

  • flex-basis: basis-[]
ClassProperties
basis-0flex-basis: 0px;
basis-1flex-basis: 0.25rem; / 4px /
basis-2flex-basis: 0.5rem; / 8px /
basis-3flex-basis: 0.75rem; / 12px /
basis-4flex-basis: 1rem; / 16px /
basis-5flex-basis: 1.25rem; / 20px /
basis-6flex-basis: 1.5rem; / 24px /
basis-7flex-basis: 1.75rem; / 28px /

※ 참고: https://tailwindcss.com/docs/flex-basis

  • flex-wrap
ClassProperties
flex-wrapflex-wrap: wrap;
flex-wrap-reverseflex-wrap: wrap-reverse;
flex-nowrapflex-wrap: nowrap;

※ 참고: https://tailwindcss.com/docs/flex-wrap

  • flex-direction
ClassProperties
flex-rowflex-direction: row;
flex-row-reverseflex-direction: row-reverse;
flex-colflex-direction: column;
flex-col-reverseflex-direction: column-reverse;

※ 참고: https://tailwindcss.com/docs/flex-direction

  • flex-grow, flex-shrink
ClassProperties
growflex-grow: 1;
grow-0flex-grow: 0;
shrinkflex-shrink: 1;
shrink-0flex-shrink: 0;

※ 참고
https://tailwindcss.com/docs/flex-grow
https://tailwindcss.com/docs/flex-shrink

  • justify-content, justify-items: justify-[]
ClassProperties
justify-normaljustify-content: normal;
justify-startjustify-content: flex-start;
justify-endjustify-content: flex-end;
justify-centerjustify-content: center;
justify-betweenjustify-content: space-between;
justify-aroundjustify-content: space-around;
justify-evenlyjustify-content: space-evenly;
justify-stretchjustify-content: stretch;
-------------------------------------------------
justify-items-startjustify-items: start;
justify-items-endjustify-items: end;
justify-items-centerjustify-items: center;
justify-items-stretchjustify-items: stretch;

※ 참고
https://tailwindcss.com/docs/justify-content
https://tailwindcss.com/docs/justify-items

  • align-content, align-items, align-self: content-[], items-[], self-[]
ClassProperties
content-normalalign-content: normal;
content-centeralign-content: center;
content-startalign-content: flex-start;
content-endalign-content: flex-end;
content-betweenalign-content: space-between;
content-aroundalign-content: space-around;
content-evenlyalign-content: space-evenly;
content-baselinealign-content: baseline;
content-stretchalign-content: stretch;
----------------------------------------------
items-startalign-items: flex-start;
items-endalign-items: flex-end;
items-centeralign-items: center;
items-baselinealign-items: baseline;
items-stretchalign-items: stretch;
----------------------------------------------
self-autoalign-self: auto;
self-startalign-self: flex-start;
self-endalign-self: flex-end;
self-centeralign-self: center;
self-stretchalign-self: stretch;
self-baselinealign-self: baseline;

※ 참고
https://tailwindcss.com/docs/align-content
https://tailwindcss.com/docs/align-items

  • order: order-[]
ClassProperties
order-noneorder: 0;
order-1order: 1;
order-12order: 12;
order-firstorder: -9999;
order-lastorder: 9999;

※ 참고: https://tailwindcss.com/docs/order

01-09 grid

  • grid-auto-flow: grid-flow-[]
ClassProperties
grid-flow-rowgrid-auto-flow: row;
grid-flow-colgrid-auto-flow: column;
grid-flow-densegrid-auto-flow: dense;
grid-flow-row-densegrid-auto-flow: row dense;
grid-flow-col-densegrid-auto-flow: column dense;

※ 참고: https://tailwindcss.com/docs/grid-auto-flow

  • grid columns:
    auto-cols-[], col-span-[], grid-cols-[]
ClassProperties
auto-cols-autogrid-auto-columns: auto;
auto-cols-mingrid-auto-columns: min-content;
auto-cols-maxgrid-auto-columns: max-content;
auto-cols-frgrid-auto-columns: minmax(0, 1fr);
----------------------------------------------------------------------------
col-autogrid-column: auto;
col-span-1grid-column: span 1 / span 1;
col-span-7grid-column: span 7 / span 7;
----------------------------------------------------------------------------
grid-cols-1grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-8grid-template-columns: repeat(8, minmax(0, 1fr));

※ 참고
https://tailwindcss.com/docs/grid-auto-columns
https://tailwindcss.com/docs/grid-column
https://tailwindcss.com/docs/grid-template-columns

  • grid rows: auto-rows-[], grid-rows-[], row-span-[]
ClassProperties
auto-rows-autogrid-auto-rows: auto;
auto-rows-mingrid-auto-rows: min-content;
auto-rows-maxgrid-auto-rows: max-content;
auto-rows-frgrid-auto-rows: minmax(0, 1fr);
--------------------------------------------------------------------------------
row-autogrid-row: auto;
row-span-1grid-row: span 1 / span 1;
row-span-7grid-row: span 7 / span 7;
--------------------------------------------------------------------------------
grid-rows-1grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-8grid-template-rows: repeat(8, minmax(0, 1fr));

※ 참고
https://tailwindcss.com/docs/grid-auto-rows
https://tailwindcss.com/docs/grid-row
https://tailwindcss.com/docs/grid-template-rows

  • gab: grid-flow-[]
ClassProperties
gap-0gap: 0px;
gap-x-0column-gap: 0px;
gap-y-0row-gap: 0px;
gap-pxgap: 1px;
gap-0.5gap: 0.125rem; / 2px /
gap-96gap: 24rem; / 384px /

※ 참고: https://tailwindcss.com/docs/gap

02 daisyUI

  • daisyUI: Tailwind CSS 기반의 사용자 인터페이스(UI) 컴포넌트 라이브러리.(ChatGPT 응답)

    • tailwindcss에 추가로 사용하는 것.
    • tailwindcss는 클래스를 통해 편리하게 꾸미는 느낌이라면
      daisyUI는 이미 완성된 그림을 불러오는 느낌.
    • 사이트 주소(https://daisyui.com/)

  • 사용법: The most popular
    component library for Tailwind CSS     참조

    • 이 포스트는 [cdn 방법](Use daisyUI from CDN) 사용.
    • 클래스명은 daisyui docs에서 crtl + k로 찾으면 됨.
    • 형식은 예약어만 있음.

  • 테마: 여러 테마가 있으며 daisyUI themes를 보고 선택.

<!DOCTYPE html>
<html lang="ko" data-theme="cupcake">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- daisyUI cdn 연결 -->
    <link
      href="https://cdn.jsdelivr.net/npm/daisyui@4.12.23/dist/full.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <!-- tailwindcss cdn 연결. -->
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <!-- class="btn"만으로 완성된 버튼 생성 -->
    <button type="button" class="btn">Button</button>
    <!-- tailwindcss와 혼용 -->
    <button type="button" class="btn bg-cyan-300 w-[50dvh]">Button</button>
  </body>
</html>

※ daisyUI는 정리하면서 공부하는 것보다 docs로 Preview를 보면서 하는 것이 공부에 더 도움되어 따로 정리하지 않음.

03 bootstrap

  • 강의에서 정확히 소개만 하고 넘어가 추후 정리 예정

출처
한국경제신문 K-Digital Training - toss bank
tailwindcss: tailwindcss docs
daisyUI: daisyUI docs
bootstrap: bootstrap docs

profile
데이터, 풀스택
이전 포스트

CSS 기초

다음 포스트

JavaScript 기초-01

0개의 댓글