huiseok.dev

왜 CSS가 어렵게 느껴지는가?

CSS는 문법은 쉬운데 결과가 예상대로 나오질 않는다. margin을 넣었는데 왜 저 요소가 안 움직이지? flex를 걸었는데 왜 가운데 정렬이 안 되지?

이 혼란의 대부분은 세 가지에서 온다.

1. 박스 모델 (margin, padding, border)
2. 흐름과 배치 (block, inline, flex, grid)
3. 단위와 반응형 (px, rem, %, vw, 미디어쿼리)

Tailwind CSS는 이 세 가지를 짧은 클래스 이름으로 압축해서 쓰게 해준다. 그 덕분에 "지금 내가 어떤 CSS 속성을 다루고 있는지"가 눈에 잘 들어온다. 즉, Tailwind는 단순히 빠르게 스타일 짜는 도구가 아니라 CSS 개념을 반복해서 익히게 만드는 훈련 도구에 가깝다.

Tailwind CSS란?

Tailwind는 Utility-First CSS 프레임워크다. "버튼 컴포넌트 스타일"처럼 완성된 스타일을 주는 게 아니라, p-4, text-center, bg-blue-500 같은 작은 유틸리티 클래스들을 조합해서 원하는 모양을 만드는 방식이다.

// 전통적인 방식
<button className="btn-primary">저장</button>

/* styles.css */
.btn-primary {
  padding: 8px 16px;
  background-color: #3b82f6;
  color: white;
  border-radius: 6px;
}

// Tailwind 방식
<button className="px-4 py-2 bg-blue-500 text-white rounded-md">
  저장
</button>

차이는 단순하다. Tailwind는 클래스 이름 = CSS 속성이다. 클래스를 쓸 때마다 "지금 padding을 주고 있구나", "background-color를 주고 있구나"를 속으로 말하게 된다. CSS를 못 한다고 느끼는 사람에게 이 반복은 엄청난 효과가 있다.

핵심 카테고리부터 외우자

Tailwind 클래스는 크게 7가지 카테고리에 들어간다. 이 카테고리만 머릿속에 있으면 90%의 스타일링은 해결된다.

카테고리	예시 클래스	대응 CSS
Spacing	`p-4`, `m-2`, `gap-6`	padding, margin, gap
Sizing	`w-full`, `h-screen`, `max-w-md`	width, height
Typography	`text-lg`, `font-bold`, `leading-6`	font-size, font-weight
Color	`bg-blue-500`, `text-gray-900`	background, color
Layout	`flex`, `grid`, `block`	display
Flex/Grid	`justify-center`, `items-center`	justify-content, align-items
Border/Effect	`rounded-lg`, `shadow-md`, `border`	border-radius, box-shadow

처음엔 이 표를 옆에 띄워놓고 작업해도 된다. 중요한 건 무엇을 바꾸고 있는지 CSS 용어로 인식하는 것이다.

Spacing — 숫자 단위부터 이해하기

CSS 초보가 제일 많이 실수하는 부분이 간격이다. Tailwind는 간격을 4px 단위로 숫자화해놨다.

p-0  → padding: 0
p-1  → padding: 4px
p-2  → padding: 8px
p-4  → padding: 16px
p-8  → padding: 32px

즉 숫자 × 4 = px이다. 이 규칙 하나만 알면 m-3이 12px, gap-6이 24px이라는 것을 바로 계산할 수 있다.

방향 지정도 직관적이다.

<div className="pt-4 pb-2 px-6">
  {/* padding-top: 16px, padding-bottom: 8px, padding-left/right: 24px */}
</div>

접미사	의미
`t`	top
`b`	bottom
`l`	left
`r`	right
`x`	left + right
`y`	top + bottom

이 방향 규칙은 p(padding), m(margin), border, rounded 등에도 똑같이 적용된다. 한 번 익히면 계속 재사용되는 패턴이 Tailwind의 핵심 장점이다.

Flexbox — 가운데 정렬, 이제 헷갈리지 말자

CSS에서 "가운데 정렬"이 어려운 이유는 수평/수직 축을 구분해야 하기 때문이다. flex는 flex-direction에 따라 축이 바뀌는데, Tailwind는 이걸 눈에 보이는 클래스로 적어준다.

<div className="flex justify-center items-center h-screen">
  <p>완벽한 중앙 정렬</p>
</div>

flex              → display: flex
justify-center    → 주축(가로) 중앙 정렬
items-center      → 교차축(세로) 중앙 정렬
h-screen          → height: 100vh

여기서 반드시 외울 규칙 하나:

flex-direction이 row(기본값)일 때
├── justify-*  → 가로축 정렬
└── items-*    → 세로축 정렬

flex-direction이 col일 때
├── justify-*  → 세로축 정렬
└── items-*    → 가로축 정렬

이 규칙을 Tailwind로 반복하다 보면 "주축/교차축" 개념이 저절로 몸에 붙는다. 순수 CSS로 돌아갔을 때도 justify-content와 align-items가 헷갈리지 않게 된다.

Grid — 레이아웃의 진짜 무기

복잡한 레이아웃은 Grid가 훨씬 간결하다. Tailwind의 Grid도 같은 철학이다.

<div className="grid grid-cols-3 gap-4">
  <div className="bg-gray-100 p-4">카드 1</div>
  <div className="bg-gray-100 p-4">카드 2</div>
  <div className="bg-gray-100 p-4">카드 3</div>
</div>

grid              → display: grid
grid-cols-3       → grid-template-columns: repeat(3, 1fr)
gap-4             → gap: 16px

grid-cols-3이 "열 3개"를 의미한다는 걸 알면, 이 한 줄이 순수 CSS로 어떻게 풀리는지 눈에 보인다. Tailwind는 CSS를 숨기는 게 아니라 짧게 적는 별명에 가깝다.

반응형 — 모바일 퍼스트 사고방식

반응형을 배우는 가장 빠른 방법은 prefix 문법을 쓰면서 자연스럽게 미디어쿼리를 체득하는 것이다.

<div className="text-sm md:text-base lg:text-lg">
  화면이 커질수록 글자가 커진다
</div>

기본값        → 모바일 (모든 화면)
sm:           → 640px 이상
md:           → 768px 이상
lg:           → 1024px 이상
xl:           → 1280px 이상

핵심은 기본 스타일이 모바일이라는 점이다. text-sm을 먼저 쓰고, md:text-base로 "중간 화면부터 덮어쓴다"라는 사고방식이 모바일 퍼스트(Mobile First) 설계다. 이 방식이 익숙해지면 순수 CSS에서 @media (min-width: 768px)를 쓸 때도 자연스러워진다.

상태 변형 — hover, focus, disabled

CSS에서 :hover, :focus를 처음 쓸 때 헷갈린다. Tailwind는 이것도 prefix로 해결한다.

<button
  className="
    bg-blue-500
    hover:bg-blue-600
    focus:ring-2 focus:ring-blue-300
    disabled:opacity-50 disabled:cursor-not-allowed
    px-4 py-2 rounded-md text-white
  "
>
  저장
</button>

hover:*     → :hover 상태
focus:*     → :focus 상태
disabled:*  → :disabled 상태
active:*    → :active 상태

"상태에 따라 스타일이 달라진다"는 개념을 클래스 한 줄로 연습할 수 있다. 이 부분을 반복하다 보면 가상 클래스 선택자에 대한 감이 잡힌다.

CSS 실력을 빠르게 올리는 4가지 습관

Tailwind를 쓰면서 CSS 실력을 같이 키우는 구체적인 방법이다.

1. 클래스를 쓸 때 속성 이름을 속으로 말하기

p-4를 쓸 때 "패딩 16px"이라고 속으로 읽어라. flex justify-between을 쓸 때 "display: flex, justify-content: space-between"이라고 읽어라. 이름과 속성을 반복해서 연결하는 것이 CSS 암기의 핵심이다.

2. 브라우저 DevTools로 실제 CSS 확인하기

Tailwind 클래스가 실제로 어떤 CSS로 변환됐는지 크롬 개발자 도구에서 꼭 확인해라.

className="p-4 bg-blue-500"
  ↓ DevTools에서 보면
padding: 1rem;
background-color: rgb(59 130 246);

이 과정에서 rem, rgb() 같은 CSS 단위와 함수를 자연스럽게 배운다.

3. 모를 땐 공식 문서에서 검색하기

Tailwind 공식 문서는 CSS 속성 이름으로 검색하면 바로 나온다. "flexbox 가운데 정렬이 뭐지?"가 아니라 "justify-content가 어떻게 클래스로 되지?"로 찾아라. 이 습관이 CSS 용어를 머릿속에 각인시킨다.

4. 가끔은 순수 CSS로 똑같이 만들어보기

Tailwind로 완성한 컴포넌트 중 하나를 골라, 순수 CSS 파일로 다시 써보기. 이 연습을 한 달에 한 번만 해도 CSS 실력이 눈에 띄게 올라간다.

// Tailwind
<div className="flex items-center gap-4 p-4 bg-white rounded-lg shadow-md">

// 순수 CSS로 옮기면?
.card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

흔히 하는 실수들

1. 클래스가 너무 길어질 때

한 요소에 20개씩 붙는 건 정상이다. 하지만 반복되는 조합은 컴포넌트로 분리하자.

// 나쁨 — 10번 반복
<button className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md">A</button>
<button className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md">B</button>

// 좋음 — 컴포넌트화
function PrimaryButton({ children }: { children: React.ReactNode }) {
  return (
    <button className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md">
      {children}
    </button>
  )
}

2. 동적 클래스를 문자열로 만들기

Tailwind는 빌드 시점에 클래스를 스캔하기 때문에, 런타임에 조합한 클래스는 적용되지 않는다.

// 나쁨 — 스캔 안 됨
const color = 'blue'
<div className={`bg-${color}-500`} />

// 좋음 — 완성된 클래스 이름으로 분기
const className = color === 'blue' ? 'bg-blue-500' : 'bg-red-500'
<div className={className} />

3. 중요한 개념을 건너뛰기

flex, grid, position, 박스 모델은 Tailwind로 써도 개념은 그대로다. Tailwind 클래스만 외우고 CSS 개념을 건너뛰면, 나중에 복잡한 레이아웃에서 막힌다. 매번 **"지금 내가 어떤 CSS를 쓰고 있는가?"**를 의식하는 게 중요하다.

정리

Tailwind CSS는 "CSS 안 써도 되는 도구"가 아니라 **"CSS를 빠르게 반복 학습하게 해주는 도구"**다. 클래스 이름이 곧 CSS 속성이기 때문에, 쓰는 만큼 속성 이름과 개념이 머릿속에 쌓인다.

CSS 실력을 같이 올리고 싶다면:

클래스를 쓸 때 CSS 속성 이름을 속으로 읽기
DevTools로 실제 변환된 CSS 확인하기
공식 문서는 CSS 용어로 검색하기
가끔 순수 CSS로 다시 작성해보기

Tailwind는 별명이다. 본명(CSS)을 알면 별명이 훨씬 친해진다. 반대로 별명(Tailwind)을 반복해서 부르다 보면, 어느 순간 본명도 익숙해진다. 이게 Tailwind가 CSS를 못하는 사람에게 가장 좋은 학습 도구인 이유다.