Gitsunmin

TIL

TIL
(=Today I Learned)

TailwindCSS

TailwindCSS에 대한 개요

TailwindCSS는 재사용 가능한 유틸리티 클래스를 제공하는 저수준 유틸리티-퍼스트 CSS 프레임워크입니다. 이는 CSS 파일의 크기를 줄이기 위해 필요한 스타일만 포함하여 개발자가 빠르게 프론트엔드 디자인을 구축할 수 있도록 도와줍니다. 별도의 CSS를 작성하지 않고도 HTML 내에서 클래스를 조합하여 디자인을 할 수 있습니다.

TailwindCSS의 특징

  1. 유틸리티 클래스: Tailwind는 수많은 작은, 단일 목적의 CSS 클래스를 제공합니다. 이러한 클래스들은 개별적인 스타일 속성에 직접 연결됩니다. 예를 들어, bg-blue-500은 배경색을 파란색으로 설정하고, text-center는 텍스트를 중앙에 정렬하는 등의 기능을 합니다.

  2. 재사용성과 조합성: 유틸리티 클래스의 장점은 간단한 클래스를 조합하여 복잡한 디자인을 만들 수 있다는 것입니다. 별도의 CSS를 작성하지 않고도 HTML에서 클래스를 조합하여 원하는 디자인을 쉽게 만들 수 있습니다.

  3. 커스터마이징: tailwind.config.js 파일을 통해 프로젝트의 요구사항에 맞게 Tailwind를 쉽게 커스터마이즈 할 수 있습니다. 색상, 간격, 크기 등의 기본 설정을 변경하거나 추가할 수 있습니다.

  4. 성능 최적화: Tailwind는 개발 모드에서는 많은 유틸리티 클래스를 생성합니다. 하지만, 프로덕션 모드에서는 PurgeCSS를 사용하여 실제 HTML에서 사용되지 않는 스타일을 자동으로 제거하여 최종 CSS 파일의 크기를 줄입니다.

작동 원리:

  1. CSS 생성: Tailwind는 설정 파일에 기반하여 수천 개의 유틸리티 클래스를 포함한 큰 CSS 파일을 생성합니다.

  2. HTML에 적용: 개발자는 HTML에서 이러한 유틸리티 클래스를 적용하여 디자인을 만듭니다.

  3. 최적화: 프로덕션 빌드 과정에서 사용되지 않는 클래스들은 제거됩니다. 이를 위해 Tailwind는 PurgeCSS와 같은 도구를 내장하고 있습니다.

  4. 반응형 디자인: Tailwind는 반응형 디자인을 위한 유틸리티 클래스도 제공합니다. 예를 들면, md:bg-red-500는 중간 크기의 화면에서만 배경색을 빨간색으로 설정합니다.

이러한 원리를 바탕으로, TailwindCSS는 유틸리티-퍼스트 방식을 사용하여 빠르고 유연하며 최적화된 웹 디자인을 가능하게 합니다. 유틸리티 클래스를 사용하면 별도의 CSS를 작성하지 않아도 대부분의 디자인 요구사항을 충족시킬 수 있습니다.

Transitions & Animation

개요

TailwindCSS의 Transition Property는 요소의 스타일 변경 시 적용되는 속성(transition property)을 지정할 수 있게 해주는 유틸리티 클래스입니다. 이를 활용하면 특정 속성만 전환되도록 설정하거나, 기본적으로 모든 속성이 전환되도록 지정할 수 있습니다.

기본 사용법

transition-property 유틸리티를 사용하면 스타일 변경 시 어떤 속성이 전환될지 지정할 수 있습니다. TailwindCSS는 다음과 같은 기본 유틸리티 클래스를 제공합니다.

클래스 목록

1. transition

  • 설명: 기본적으로 all 속성에 전환 효과를 적용합니다.
  • 사용 예시: 
    <button class="transition duration-300 hover:bg-blue-500">
  버튼
</button>

  1. transition-none

    • 설명: 전환 효과를 비활성화합니다. • 사용 예시:

<button class="transition-none hover:bg-blue-500">
  버튼
</button>
  1. 속성별 클래스

아래의 클래스를 사용하여 특정 속성에만 전환 효과를 적용할 수 있습니다.

클래스적용 속성
transition-all모든 속성 (all)
transition-colors색상 관련 속성
transition-opacity투명도 (opacity)
transition-shadow그림자 (box-shadow)
transition-transform변형 (transform)

예시: 특정 속성에 전환 효과 적용

<div class="transition-colors duration-500 hover:bg-red-500">
  배경색 전환
</div>

<div class="transition-opacity duration-300 hover:opacity-50">
  투명도 전환
</div>

<div class="transition-shadow duration-200 hover:shadow-lg">
  그림자 전환
</div>

동작 원리

transition-property는 CSS의 transition-property 속성과 동일한 역할을 수행합니다. 예를 들어, transition-colors는 다음과 같은 CSS로 컴파일됩니다:

/* TailwindCSS에서 컴파일된 결과 */
.transition-colors {
  transition-property: background-color, border-color, color, fill, stroke;
}

관련 유틸리티

Transition Property는 아래와 같은 TailwindCSS 유틸리티와 함께 사용하면 더 효과적으로 동작합니다:

  1. transition-duration 전환 효과의 지속 시간을 설정합니다. • 예시: duration-300 → 300ms 동안 전환.
  2. transition-timing-function 전환 속도의 곡선(완급 조절)을 설정합니다. • 예시: ease-in-out, ease-linear.
  3. transition-delay 전환 효과가 시작되기 전의 지연 시간을 설정합니다. • 예시: delay-200 → 200ms 지연 후 시작.

실전 예제

  1. 버튼 색상 전환
<button class="transition-colors duration-300 ease-in-out bg-blue-500 hover:bg-green-500 text-white px-4 py-2 rounded">
  클릭하세요
</button>

• transition-colors: 배경색과 관련된 속성만 전환. • duration-300: 300ms 동안 전환. • ease-in-out: 전환 속도를 점진적으로 조절.

  1. 카드 호버 시 확대 효과
<div class="transition-transform duration-500 hover:scale-105 bg-white shadow-lg rounded-lg p-4">
  카드 내용
</div>

• transition-transform: 변형 관련 속성(transform)에만 전환 효과 적용. • hover:scale-105: 호버 시 크기를 105%로 확대.

  1. 다중 전환 효과 적용
<div class="transition-all duration-300 ease-out hover:shadow-lg hover:opacity-80 hover:scale-105">
  다중 효과
</div>

• transition-all: 모든 속성에 전환 효과 적용. • 다중 호버 효과: 그림자, 투명도, 크기 변화 동시에 적용.