CSS 단위별 기준과 특징 (%, px, vh, em, rem)

% (퍼센트)
- 기준: 부모 요소의 크기를 기준으로 함.
- 용도: 부모 크기에 상대적인 크기 지정에 유용합니다.
px (픽셀)
- 특징: 고정된 단위로, 기기 해상도에 관계없이 동일한 크기를 나타냅니다.
- 용도: 정밀한 크기 조절이나 경계(border) 등 고정된 크기가 필요한 경우에 사용.
vh (뷰포트 높이)
- 기준: 브라우저 화면(뷰포트)의 높이를 기준으로 함.
- 예시: 100vh는 뷰포트 전체 높이.
em
- 기준: 해당 요소의 현재 폰트 크기를 기준으로 함.
- 용도: 글자 크기에 따른 상대적 간격(padding, margin, 자간 등) 조절에 유용합니다.
- 주의: 요소 내부의 줄 간격(line-height)에서는 단위 없이 배수로 지정하는 경우가 많습니다.
rem
- 기준: 최상위(root) 요소, 보통 <html>의 폰트 크기를 기준으로 함.
- 용도: 전체 문서의 폰트 크기를 기준으로 상대적인 크기를 지정할 때 사용.
- 장점: 모바일 기기에서 사용자가 브라우저의 글자 크기 설정을 변경할 때 유연하게 반응할 수 있음.

─────────────────────────────

html {
  font-size: 62.5%; /* 16px * 0.625 = 10px, 즉 1rem = 10px */
}
body {
  font-size: 1.5rem; /* 1.5rem = 15px */
}

rem 단위 사용 권장 케이스
- 추천: 폰트 크기, 텍스트 기반의 레이아웃(예: 블로그, 언론사, 메모 앱 등)에서 사용하는 것이 좋습니다.
- 주의:
  - padding, margin, width, height, left, top 등의 레이아웃 속성에 rem 단위를 과도하게 사용하면 모바일 레이아웃에서 크기가 깨질 수 있습니다.
  - 폰트 크기를 변경하는 브라우저 설정(예: 네이버 모바일의 폰트 크기 변경 기능) 대응에 유리합니다.

─────────────────────────────

안드로이드 크롬에서는 아래와 같은 조건에서만 rem 단위가 정상적으로 적용됩니다:

참고: iOS Safari, PC Chrome, 삼성 인터넷 등에서는 이러한 조건 없이 rem 단위가 정상적으로 적용됩니다.

─────────────────────────────

%: 부모 요소의 크기에 따라 상대적으로 크기를 지정할 때 사용.
px: 고정 크기 지정에 사용.
vh: 브라우저 뷰포트를 기준으로 한 크기 지정에 사용.
em: 해당 요소의 폰트 크기를 기준으로, 주로 텍스트 관련 스타일(자간, 여백) 조절에 사용.
rem: <html>의 폰트 크기를 기준으로 하여, 전체 문서의 상대적인 폰트 크기 지정 및 모바일 사용 시 유연한 글자 크기 변경에 유리함.
- 설정 예: html { font-size: 62.5%; } → 1rem을 10px로 계산 가능.
- 주의: 레이아웃 속성에는 사용에 주의(모바일에서 레이아웃 깨짐 가능).

이와 같이 각 단위의 기준과 사용 조건을 이해하면, 디자인과 레이아웃 구현 시 상황에 맞게 적절한 단위를 선택할 수 있습니다.

CSS Transition (0)	2024.12.13
CSS 애니메이션 효과 만들기 및 참고 사이트 (1)	2024.12.13
CSS 요소 숨기기 (display, opacity, visibility, overflow, hidden, clip 등) (0)	2024.12.13
CSS Position과 정렬 공식 (0)	2024.12.13
CSS Display (0)	2024.12.13

관련글