[TIL] 2023-01-31

1월 30일에 이어서 테일윈드 CSS 학습 중 (기본서 개념 및 예제코드 연습)

• tailwindCSS flex(플렉스) 레이아웃

  display 스타일 속성에 flex라고 설정하고 (display: flex) 그 안에 콘텐츠 아이템을 배치한 것 => 플렉스 컨테이너 생성

  • flex (클래스 이름)

  • inline 과 block 성질을 완전히 무시

  • flex-direction (flex-row, flex-row-reverse, flex-col, flex-col-reverse)

  • overflow ( overflow-auto, overflow-hidden, overflow-visible, overflow-scroll)

  • flex-wrap (flex-wrap, flex-wrap-reverse, flex-nowrap)

  • min-width, max-width, min-height, max-height

  • justifiy-content, align-items (justify-start, justify-end, justify-center, justify-between, justify-around, justify-evenly, items-start, items-end, items-center, items-baseline, items-stretch)

    ✅ items-stretch 일 때는 콘텐츠 아이템의 높이가 명시적으로 설정되어 있지 않아야함

  • 컨포넌트 예제 코드 연습

• daisyui CSS

  • 버튼, 색상, 테두리, 아이콘, 모달 컨포넌트 만들기 (클래스 적용해보기)