[TIL] 2023-01-30

Deong_gu·2023년 1월 30일
0

TIL (TODAY I LEARN)

목록 보기
37/62
  • 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 공식문서

profile
프론트엔드 개발자가 되기 위해 공부 중입니다.

0개의 댓글