크기와 여백 (Sizing & Spacing)
직관적인 크기와 여백의 절대 수치 규칙
Tailwind CSS의 스페이싱 시스템은 매우 과학적입니다. 여백(Padding, Margin)과 크기(Width, Height)에 사용되는 숫자는 임의의 픽셀이 아니라 4px 단위(0.25rem)로 설계되어 기하학적인 그리드 정렬을 완벽하게 맞춥니다. 예컨대, p-4는 4 * 4px = 16px (1rem)을 정확히 출력합니다.
⚠️ 주의: w-full vs w-screen의 차이점
화면 가득 채우기 위해 w-screen을 남용할 경우, 일부 OS 브라우저에서 생기는 물리 세로 스크롤바의 너비(약 15px)를 무시하고 뷰포트 전체를 차지하여 불필요한 가로 스크롤바가 생성됩니다. 일반적인 레이아웃 영역에서는 부모 영역에 맞게 늘어나는 w-full을 사용하는 것이 모범사례입니다.
| 클래스 접두사 | 동작 매커니즘 | 단위 환산 (1단위 = 4px = 0.25rem) | 실전 예시 |
|---|---|---|---|
| p- (Padding) | 요소 안쪽 여백 설정 | p-4 ➔ 16px (1rem)py-2 ➔ 위아래 8pxpx-6 ➔ 좌우 24px |
p-4 bg-white text-black |
| m- (Margin) | 요소 바깥쪽 여백 설정 | m-8 ➔ 32px (2rem)mt-10 ➔ 위쪽 40pxmx-auto ➔ 가로 중앙 정렬 |
mx-auto max-w-md |
| w- (Width) | 가로 너비 지정 | w-64 ➔ 256px (16rem)w-full ➔ 100%w-1/2 ➔ 50% 비율 |
w-full md:w-1/3 |
| h- (Height) | 세로 높이 지정 | h-12 ➔ 48px (3rem)h-screen ➔ 100vhh-min ➔ 콘텐츠 최소 높이 |
h-screen flex items-center |