#4.0 Introduction
목표
- Tailwind 란 무엇인지 알아본다
- Tailwind 와 다른 CSS 프레임워크 차이점을 알아본다.
- Tailwind 의 장점을 알아본다.
Tailwind CSS
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
-
유틸리티 우선 CSS 프레임워크
- 유틸리티 : tailwind 가 아주 많은 클래스네임을 가지고 있다는 뜻
-
아주 많은 클레스 네임을 가지고 있는 CSS 파일이라고 이해 할 수 있다.
-
개발자는 미리 정해진 클래스네임을 가져다가 사용하기만 하면 된다.
- 클래스 네임을 정하고 스타일을 정의 할 필요가 없다.
- 뒤에 나오는 자동완성 기능과 함께 사용하면, 개발자의 생산성을 높일 수 있다.
-
보통 CSS 프레임워크들은 정해진 스타일이 있기 때문에, 같은 프레임워크를 사용한 프로젝트들은 비슷한 스타일이 된다.
- 하지만 Tailwind 는 정해진 스타일이 없고 그저 정해진 스타일 속성에 클래스 네임만 있기 때문에 이를 조합하여 자기만의 디자인을 만들 수 있다.
-
반응형 웹사이트를 만들기 쉽다.
- 각각의 사이즈에 해당하는 클래스 작명법을 제공한다.
World-class IDE Integration
Tailwind CSS IntelliSense
- 개발 환경에서 사용 할 수 있는 자동완성 기능
- tailwind에서 제공하는 클레스네임은 아주 많기 때문에 모든 것을 다 기억 하기 어렵다. 때문에 VS Code의 확장 기능 등을 이용하는 것이 유용하다.
- 색상 팔레트 미리보기 기능
- 클레스 네임 자동완성 기능
- 클레스 네임에 마우스를 올렸을 시,
- 연결 된 tailwind CSS 파일 내용 미리보기 기능
- 짧은 설명 주석
- 등을 지원