유틸리티 클래스(Utility Classes)란

**유틸리티 클래스(Utility Classes)**는 하나의 특정한 CSS 속성만을 담당하는 작고 재사용 가능한 CSS 클래스들입니다.

핵심 특징

1. 단일 목적성

• 한 클래스가 하나의 스타일 속성만 담당
• 예: .text-center (텍스트 중앙 정렬만), .bg-red (배경색만)

2. 작고 원자적(Atomic)

• 가장 작은 단위의 스타일링
• 조합해서 복잡한 디자인 구성 가능

전통적 CSS vs 유틸리티 클래스

전통적 방식:

.header-title {
  font-size: 24px;
  font-weight: bold;
  color: blue;
  margin-bottom: 20px;
  text-align: center;
}

유틸리티 클래스 방식:

.text-24 { font-size: 24px; }
.font-bold { font-weight: bold; }
.text-blue { color: blue; }
.mb20 { margin-bottom: 20px; }
.text-center { text-align: center; }

<h1 class="text-24 font-bold text-blue mb20 text-center">제목</h1>

장점

• 빠른 개발: CSS 파일을 수정하지 않고 HTML에서 바로 스타일링
• 일관성: 미리 정의된 값들로 디자인 시스템 유지
• 재사용성: 어디서든 조합해서 사용 가능
• 유지보수: 불필요한 CSS 코드 감소

단점

• HTML 가독성 저하: 클래스명이 길어질 수 있음
• 디자인 제약: 미리 정의된 값에만 의존
• 학습 곡선: 클래스명 규칙을 익혀야 함

대표적인 유틸리티 CSS 프레임워크

• Tailwind CSS: 가장 인기 있는 유틸리티 우선 프레임워크
• Bootstrap: 컴포넌트와 유틸리티 클래스 혼합
• Tachyons: 함수형 CSS 접근법

유틸리티 클래스는 현대 웹 개발에서 매우 인기 있는 CSS 작성 패턴이 되었습니다.

Versorgungsklassen