[CSS] Bootstrap, Tailwind

• Bootstrap
  • 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크
• Tailwind
  • 많은 utility 클래스로 이루어진 CSS 프레임워크
  • HTML 요소의 class 속성에 설정하는 것만으로 스타일링 가능
  • 공식 사이트: https://tailwindcss.com/
• tailwind 설치 및 실행 확인
  • https://tailwindcss.com/docs/installation
  • tailwind 설치했는데 CSS가 적용이 안될 때! cmd 창에서 yarn dev 를 다시 실행해보자
• tailwind의 CSS 적용 방식
  • html에서 <div class="text-xl bg-sky-700 text-white"> 이런 식으로 class 안에 꾸미는 코드를 안에 넣으면 output.css에 CSS 코드가 자동으로 추가된다!
  • 코드가 자동 추가된 output.css

  .bg-sky-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(3 105 161 / var(--tw-bg-opacity));
  }
  
  .text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  
  .text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }