Tailwind CSS + CSS Resource

Tailwind CSS

오픈소스 CSS 프레임워크 중 하나로, Utility-First 컨셉을 가져 미리 설정한 유틸리티 클래스를 활용하는 프레임워크입니다.

작은 스타일 변경에도 컴포넌트를 만드는 번거로움이 싫으신 분, 매번 클래스명을 고민하느라 시간이 많이 드시는 분, 일관된 디자인을 하고 싶은 분께 추천드립니다.

사용예시

.text-lg {
font-size: 1.125rem/* 18px */;
line-height: 1.75rem/* 28px */;
}

.font-semibold {
font-weight: 600;
}

.text-gray-900 {
--tw-text-opacity: 1;
color: rgba(17, 24, 39, var(--tw-text-opacity));
}

위의 HTML 코드는 Tailwind CSS를 적용한 태그입니다. 태그 class의 각각 요소는 아래 클래스를 불러온다고 생각해주시면 됩니다. 이런 식으로 미리 정해져 있는 클래스들을 간단하게 불러내어 CSS 작업이 가능해집니다.

장점

• Utility-First의 편리함과 빠른 개발: HTML-CSS를 별도로 관리하지 않아도 되고, 클래스명을 고민할 필요도 없습니다.

HTML-CSS를 따로 관리한 예전 프로젝트

• Intelli Sense 플러그인: 미리보기, 자동완성, 신택스 하이라이팅, 린팅을 지원합니다.

VS Code에서 사용 가능한 IntelliSense

IntelliSense 사용 예시

• Javascript 코드와 분리: 프로젝트 도중 JavaScript 프레임워크를 변경하더라도 기존의 HTML 코드를 그대로 사용할 수 있습니다.
• 쉽고 자유로운 커스텀: 다른 프레임워크에 비해 기본 스타일 값을 디테일한 부분까지 쉽게 커스텀 가능합니다.

단점

• 다소 못생긴 코드: 코드의 직관성은 높으나 가시성은 낮습니다.

코드 가시성

• 초반 러닝 커브: 그러나 대부분 클래스명이 기본 CSS 속성이나 속성값과 비슷하고 자동완성을 지원하는 플러그인이 존재합니다.

CSS Resource

유용한 웹 기반 도구들 몇 개를 정리 해 보았습니다.

해당 제목을 누르면 웹사이트로 이동합니다.

Neumorphism.io - CSS shadow generator

Neumorphism.io

CSS Glow Generator

CSS Glow Generator

Transition

Transition

SpinKit

SpinKit

Logoipsum

Logoipsum