반응형
이번 포스팅에서는 [CSS 기초] 파트의 세부 주제인 실무 단위 활용법에 대하여 상세히 알아보겠습니다.
1. rem과 em의 차이점 및 적재적소 활용법
px은 절대 단위이므로 접근성(사용자 폰트 크기 변경)에 취약합니다. 실무에서는 주로 상대 단위인 rem과 em을 혼합하여 사용합니다.
- rem (Root em): 최상위
<html>요소의 폰트 사이즈(기본 16px)를 기준으로 합니다. 전체적인 타이포그래피, 여백, 컴포넌트 간격 설정에 가장 안전하게 쓰입니다. - em: 자기 자신 혹은 부모의 폰트 사이즈를 기준으로 합니다. 컴포넌트 내에서 폰트 크기에 비례해 아이콘 크기나 padding이 유동적으로 변해야 할 때(예: 버튼 크기별 변형) 강력한 힘을 발휘합니다.
2. 모바일 브라우저의 골칫거리 vh 단위 해결 노하우
모바일 브라우저(Safari, Chrome 등)에서 100vh를 사용하면, 주소창 영역까지 포함된 크기로 계산되어 하단이 잘리는 문제가 발생합니다. 이를 해결하는 최신 CSS 단위가 있습니다.
/* 기존 100vh의 대안으로 동적 뷰포트 단위를 사용합니다 */
.hero-section {
/* 브라우저 UI(주소창)를 제외한 실제 보이는 화면 높이 보장 */
height: 100dvh;
/* 구형 브라우저를 위한 폴백(Fallback) */
min-height: 100vh;
}지금까지 CSS 단위 (rem, em, vh, dvh 등)의 개념과 구체적인 활용 방안에 대해 살펴보았습니다. 뷰포트 단위를 적절히 사용하여 완벽한 반응형 웹을 구축해 보세요.
반응형
'StyleSheet > CSS' 카테고리의 다른 글
| [CSS] 색상과 배경 다루기 (Gradients & Multi-bg) (0) | 2026.07.15 |
|---|---|
| [CSS] Box Model 완벽 가이드와 마진 병합 현상 (0) | 2026.07.14 |
| [CSS] CSS 기초 문법과 고급 선택자 (Selectors) (0) | 2026.07.14 |
