CSS 단위는 웹 페이지의 구성 요소의 크기, 간격, 위치를 정의하는 데 필수적인 요소입니다. 특히 반응형 웹에서는 다양한 화면 크기와 환경에 따라 적절한 단위를 선택하는 것이 사용자 경험을 좌우합니다. 이 글에서는 기본 픽셀 단위부터 상대 단위(em, rem), 뷰포트 단위(vw, vh), 그리고 최신 동적 단위(dvh, svh, lvh 등)까지 CSS의 주요 단위를 체계적으로 정리합니다. 각각의 단위가 어떤 상황에서 적합한지, 실무와 면접에서 어떤 기준으로 설명하고 선택해야 하는지를 모두 다룹니다.
CSS 단위란? 종류와 분류 체계
CSS 단위는 요소의 길이, 크기, 위치, 여백 등을 표현하기 위한 수단입니다. 주로 다음과 같이 분류됩니다:
- 절대 단위: 실제 물리적인 크기를 기준으로 고정된 값 (예:
px,pt,cm) - 상대 단위: 요소나 컨텍스트에 따라 동적으로 계산되는 값 (예:
em,rem,%,ch) - 뷰포트 단위: 브라우저 창(viewport)의 크기를 기준으로 계산 (예:
vw,vh,vmin,vmax) - 최신 동적 단위: 스크롤 위치, 인터페이스 동작 등에 따라 동적으로 변하는 최신 단위 (예:
dvh,svh,lvh)
이러한 단위들은 고정값 기반 디자인부터 반응형, 접근성 중심 설계까지 다양한 목적에 맞게 선택되어야 하며, 단위 선택은 결과적으로 사용자 환경의 유연성에 직접 영향을 줍니다.
절대 단위와 상대 단위 정리
1. 절대 단위
px: 화면 픽셀 기준, 대부분의 디자인에서 기본 단위로 사용됨pt: 1pt는 1/72 인치, 인쇄 매체에 주로 사용cm,mm,in: 실물 치수 기준, 디지털 환경에서는 상대적 의미만 가짐
2. 상대 단위
em: 현재 요소의font-size기준rem: 루트 요소(html)의font-size기준 → 전역 일관성에 유리%: 부모 요소를 기준으로 계산됨 (폭, 여백 등에서 주로 사용)ch: 숫자 0의 너비 기준, 고정폭 폰트에서 유용ex: 현재 폰트의 x-높이 기준lh: 줄 높이(line-height) 기준 → 최신 CSS에서 가독성 향상용으로 주목
px vs em vs rem 실무 비교 예시
html {
font-size: 16px;
}
h1 {
font-size: 2rem; /* = 32px */
}
p {
font-size: 1.2em; /* 부모 기준 계산 */
}tip: 글로벌 폰트 전략을 유지하려면 rem을, 컨텍스트 내 유연성을 원할 경우 em을 사용합니다.
뷰포트 단위와 최신 동적 단위
1. 고전 뷰포트 단위
vw: 뷰포트 너비의 1%vh: 뷰포트 높이의 1%vmin,vmax: 너비/높이 중 작은값/큰값 기준
2. 최신 동적 단위 (모바일 대응용)
모바일 환경에서는 주소창, 툴바 등 UI 요소가 동적으로 높이를 변화시키므로, 기존 vh는 안정적인 결과를 보장하지 못합니다. 이에 따라 다음과 같은 단위가 도입되었습니다:
dvh(dynamic viewport height): 주소창 포함 시 동적으로 변함lvh(large viewport height): 주소창이 숨겨진 최댓값 기준svh(small viewport height): 주소창이 보이는 최소값 기준svw,lvw: 너비 대응 버전ic: 국제 문자를 기준으로 한 너비 단위 (multilingual UI 대응)
브라우저 지원 현황 (2025년 기준)
vh,vw: 모든 브라우저에서 지원dvh,svh,lvh: 최신 모바일 Chrome, Safari, Firefox에서 지원ic,lh: 최신 사양 반영됨. Edge/Firefox 최신 버전에서 일부 지원 중
실무 적용 전략과 면접 질문 대응법
1. 실무에서의 단위 선택 기준
- px: 정확한 픽셀 기준 필요 시 (버튼, 아이콘 등)
- rem: 폰트 크기, 여백 등 글로벌 스타일에 유리
- vw/vh: 반응형 디자인에서 레이아웃 유동성 확보
- dvh: 모바일 전체 높이 커버 시 안정적
- lh: 가독성 높이고 줄 간격 비율 유지 시 활용
2. 실제 예시: 모바일 100% 높이 대응
.full-height {
height: 100dvh; /* 주소창 영향 없는 동적 높이 확보 */
}Tip: 기존 100vh는 주소창이 나타날 때 UI 잘림 문제가 발생할 수 있음. dvh로 대체 권장.
3. 면접에서 자주 나오는 질문
- “rem과 em의 차이점은?”
- “vh 단위와 dvh 단위는 어떤 차이가 있나요?”
- “폰트 크기를 반응형으로 조절하려면 어떤 단위를 쓰나요?”
- “CSS에서 동적 레이아웃을 만들 때 어떤 단위를 사용해야 하나요?”
4. 모범 답변 예시
“rem은 루트 요소 기준이기 때문에 전체 스타일을 일관되게 관리할 수 있고, em은 상속 기반으로 좀 더 유연한 스타일링에 적합합니다. 반면 vh는 뷰포트 높이 기준이지만, 모바일에서는 주소창 등의 UI가 공간을 차지하므로 dvh를 사용하는 것이 더 정확한 높이 계산을 가능하게 합니다.”
결론
CSS 단위는 단순한 크기 지정 이상의 의미를 지닙니다. 각 단위는 렌더링 맥락, 디바이스 환경, 사용 목적에 따라 달라지며, 올바른 선택은 퍼포먼스, 반응성, 접근성에 모두 영향을 줍니다. 특히 rem, vw, dvh 같은 유동 단위는 오늘날 반응형 웹 개발에 필수로 자리잡았습니다.
실무에서는 단위를 혼용해 쓰되 기준을 정해 일관되게 적용하고, 면접에서는 단위 선택의 배경과 영향까지 설명할 수 있도록 준비하는 것이 중요합니다.