반응형
CSS에서 크기 단위를 어떻게 쓰느냐에 따라 반응형 디자인, 접근성, 유지보수성이 크게 달라집니다.
이번 포스팅에서는 가장 많이 쓰이는 단위들을 비교하고, 실무에서의 활용 팁을 알려드립니다.
🧩 1. 절대 단위 vs 상대 단위
- 절대 단위: px (픽셀 기준 → 고정 크기)
- 상대 단위: em, rem, %, vh, vw (상황에 따라 달라짐)
📌 2. px (픽셀)
.box { font-size: 16px; }- 고정 크기 (화면 크기와 무관)
- 장점: 직관적, 예측 가능
- 단점: 반응형/접근성에서 불리
📌 3. em (부모 요소 기준)
.parent { font-size: 16px; }
.child { font-size: 2em; } /* 부모의 16px × 2 = 32px */- 부모 요소의 font-size 기준
- 단점: 중첩되면 계산이 꼬일 수 있음
📌 4. rem (root em)
html { font-size: 16px; }
.title { font-size: 2rem; } /* 16px × 2 = 32px */- 루트(html) 기준
- 중첩 영향 없음 → 실무에서 가장 많이 사용됨
📌 5. % (퍼센트)
.container { width: 80%; }- 부모 요소 크기에 비례
- 반응형 레이아웃에서 자주 활용
📌 6. vh, vw (뷰포트 단위)
.fullscreen {
width: 100vw; /* 뷰포트 너비 100% */
height: 100vh; /* 뷰포트 높이 100% */
}- 뷰포트(Viewport) 크기 기준
- 모바일 반응형 레이아웃에서 강력
- 예: 풀스크린 배너, 섹션
⚡ 7. 실무 활용 전략
- ✅ 글자 크기: rem (접근성 + 일관성)
- ✅ 버튼/카드 크기: %, em (부모 기준으로 유연)
- ✅ 전체 레이아웃: %, vh, vw
- ✅ 픽셀 단위로 고정해야 하는 경우만 px
📝 마무리 정리
- px → 고정값 (단순한 요소에 사용)
- em → 부모 기준 (상황 따라 크기 변동)
- rem → 루트 기준 (가장 권장)
- % → 부모 요소 비율
- vh/vw → 뷰포트 기준 (반응형 디자인 최적)
👉 단위를 혼합해서 쓰되, 기본은 rem + % + vh/vw 조합을 추천합니다!
반응형