[TIL] 2023-01-30

• 29일에 리액트에서 CSS를 다루는 법과 CSS에 대한 기초 내용을 타입스크립트와 결합하여 공부했고, 테일윈드 CSS 프레임워크를 사용해봄
  (프로젝트에서는 styled-component를 사용했었다.)

  • Sass/SCSS
    브라우저 호환성, 벤더 접두사 등의 어려움을 극복하기 위해 탄생
    프로그래밍 기능, autoprefixer 플러그인
    
    

  • PostCSS
    모듈화된 CSS
    다양한 플러그인
    웹펙이 1차로 만든 CSS를 가공하여 최종 CSS를 생성해 내는 방법으로 동작
    => 테일윈드 CSS

    
    

  • 테일윈드 CSS 설치 및 세팅 (postcss.config.js , tailwind.config.js)

  • 테일윈드 CSS 클래스

    • 색상 클래스 (유채색, 무채색)
    • 텍스트 클래스 (글자크기, 글자굵기, 기울임꼴, 줄바꿈 문자, 텍스트 정렬, 텍스트 표시 줄 수)

  • 테일윈드 CSS 박스 모델

    • 컨테이너, 콘텐츠, box-sizing 스타일 클래스
    • 캐스케이딩
    • 뷰포트 클래스
    • 길이 관련 클래스
    • padding 스타일
    • margin 스타일
    • background-image 스타일 (+ background-size)
    • border 스타일 (+ border-radius)
    • display 스타일
    • visibility 스타일
    • position 스타일 (+ left, top, right, bottom , z-index)

[참고 자료]

https://tailwindcss.com/docs/installation 테일윈드CSS 공식문서