CSS 프레임워크(Tailwind)

출처 : CSS 프레임워크

CSS 프레임워크

CSS 프레임워크를 이용함으로써 개발자가 얼마나 편해질 수 있는지 알아보자

CSS 프레임워크란?

• 웹 사이틀를 만들 때 쉽고 빠르게 만들 수 있도록 CSS 스타일과 규칙, 그리고 클래스를 선정해둔 모음
• 디자인보다 사용자 경험에 집중할 수 있도록 도움을 줌

CSS 프레임워크의 장점

• 미리 작성된 UI 요소들을 제공함
• Header, input, button 같은 일반적인 요소를 제공함으로써 더 빠른 개발 프로세스를 제공
• 템플릿을 제공함, 웹 디자이너와 웹 개발자 같이 전문적인 사람들이 만든 템플릿은 사용자에게 일관된 상요자 경험을 줌으로써 사용자가 더 만족할 수 있는 장점이 있음

CSS 프레임워크 종류

• 각 프레임워크 요소마다 고유한 기능과 디자인 언어들이 다름, 필요와 선호에 따라 선택

Tailwindcss 활용방법

프레임워크를 사용하지 않았을 때는 요소 각각의 클래스명을 고민해야하지만 css 프레임워크를 사용함으로써 이미 정의된 이름을 사용할 수 있음

또한 웹 사이트를 구현하다보면 구현해야될 스크린들이 점점 많아짐
모바밀, 노트북, 태블릿, 일반 모니터까지 모두 챙겨야하는데 일반 css에서는 @media 쿼리를 통해 스크린을 구현할 수 있음

Tailwind에서는 스크린 중간점을 제공해서 팀 단위로 기준점을 만들어두거나 스크린의 사이즈가 바뀌었을 때 설정에서 바꾸게 되면 한 번에 바꿀 수 있는 장점이 있음

스크린 사이즈에 해당하는 접두사를 붙여주면 해당하는 스크린에 적용되는 방식

또한 웹 사이트를 개발하다보면 다크모드와 라이트모드를 구현해야할 때가 있는데, 이를 css, js로 구현하려면 많은 학습이 필요

 

Tailwind에서는 다크모드와 라이트모드를 지원하는 dark라는 접두사를 붙이면 된다.

이러한 부분을 js에서 제어해주기만 하면 된다.

또한 스크롤은 가능한데 스크롤을 숨겨야하는 경우가 있다

위의 코드는 스크롤바를 숨기는 css 속성이다.
이런 요소들을 스크롤바를 숨길 때마다 반복적으로 사용하게 되면 매우 번거롭다.

Tailwind에서는 이런 복잡한 것들을 한 줄로 압축시키고 plugin으로 만들어서 위의 .scrollbar-hide처럼 사용할 수 있는 장점이 있다.

다음은 hover를 대체해보자!
업로드중..
단순히 접두어로 hover를 작성하여 대체할 수 있다.

hover 뿐만아니라 다른 여러부분도 대체할 수 있다.

Tailwind에서 유용한 익스텐션

Tailwind 자동완성을 지원하고 심지어 다른 사용자가 임의로 지정한 클래스도 자동완성을 지원한다.

Tailwind의 아쉬운 점

만약 너비와 높이를 갖는 가변적인 스타일을 가지는 컴포넌트를 만든다고 했을 때, 위의 코드는 작동하지 않는다.

html에 스타일 적용법 중 하나인 inline style 방식을 적용해야 한다.

하지만 이렇게 사용하면 html의 가독성이 떨어진다.

디자인 시안이 있는 경우 아쉬움

디자인 시안이 있는 경우 몇 px 단위로 간격을 줘야하는지 정해져있고, 색상 또한 정해져있기 때문에 Tailwind에 없는 속성일 수 있어 오히려 불편할 수 있다.

• 색상 등은 미리 변수를 할당하는 등으로 극복할 수 있다.