CSS 상대 단위 em과 rem: 기준, 계산, 선택 가이드

개요

반응형 레이아웃과 접근성 요구가 커지면서 px 고정값 대신 em, rem 같은 상대 단위 사용 빈도 증가 두 단위 모두 글꼴 크기(font-size)를 기준으로 동작하지만 기준점이 다름 핵심은 기준이 어디인지 명확히 이해하고 일관된 스케일로 적용하는 것

콘텐츠가 없어도 블록 요소 높이를 유지해야 하는 경우 같은 실무 이슈에서 min-height를 em이나 rem로 정의해 타이포 스케일에 연동하는 방식 유용함

상대 단위 개념

상대(relative) 단위는 주어진 기준에 따라 유동적으로 값이 변하는 길이 단위 em, rem, %, vw, vh 등이 대표 절대(absolute) 단위는 상황과 무관하게 고정된 길이로 취급하는 단위군으로 px, pt, cm, in 등이 포함됨 참고 기준으로 CSS에서 1px는 1/96in에 해당하는 길이로 정의됨. 실제 디바이스의 물리 픽셀과는 분리된 개념

em과 rem의 공통점

두 단위 모두 font-size를 기준으로 비례 계산되는 상대 단위 font-size가 16px인 경우 예시

0.5em → 8px
1em → 16px
2em → 32px
3em → 48px

font-size가 20px일 때

0.5em → 10px
1em → 20px
2em → 40px
3em → 60px

font-size가 10px일 때

0.5em → 5px
1em → 10px
2em → 20px
3em → 30px

텍스트 크기 변화에 연동해 폭, 여백, 줄 간격 등 원하는 속성들을 함께 스케일시키는 용도에 적합

em과 rem의 차이

em: 선언된 요소의 font-size를 기준으로 계산. 요소 자신 혹은 상속·계산 결과로 결정된 현재 font-size에 의존
rem: 문서 루트(html)의 font-size를 기준으로 계산. 요소의 현재 font-size와 무관

기준 차이에 따른 계산 예시

html {
  font-size: 16px;
}

div {
  font-size: 20px;
  width: 10em;   /* 200px */
}

div {
  font-size: 20px;
  width: 10rem;  /* 160px */
}

rem 사용 시 해당 요소의 font-size는 계산에 영향 없음

상속과 em 계산의 함정

요소에 font-size를 명시하지 않으면 부모의 font-size 상속 이때 em은 상속 체인을 따라 실제 기준이 달라질 수 있음

기본 가정

html { font-size: 16px; }

div에서 font-size 미지정 시

div { width: 10em; }  /* 160px로 평가 */

중간에 상위 요소가 개입하는 경우

header { font-size: 30px; }
header > div { width: 10em; }  /* 300px로 평가 */

상위 요소가 상대 단위를 쓰는 경우 연쇄 계산 발생

header { font-size: 2rem; }  /* 16px * 2 = 32px */
header > div { width: 10em; } /* 320px로 평가 */

em은 상속과 중첩에 따라 실제 px 값 예측이 복잡해질 수 있음. 컴포넌트 재사용성과 유지보수성에 리스크가 생김

언제 em, 언제 rem

다음 기준으로 선택

전역 스케일 고정 필요, 디자인 토큰 일관 적용, 컴포넌트 간 예측 가능성 확보 → rem 우선
요소 내부 타이포 크기에 비례해 패딩, 아이콘, 간격을 함께 스케일시키고 싶음 → em 적합
폼 컨트롤, 버튼 등 텍스트 크기에 따라 내부 여백이나 아이콘 크기가 따라가야 하는 UI → em 유리
레이아웃 그리드, 공통 여백, 모듈러 스페이싱 시스템 → rem 권장

일반 가이드

html의 font-size로 기준 스케일 정의, 대부분의 길이·간격은 rem 사용
컴포넌트 내부에서 글자 크기와 함께 동조할 속성만 선별적으로 em 적용

사용 팁과 주의

루트 스케일 설정: html의 font-size를 디자인 스케일의 기준값으로 지정. 필요 시 미디어쿼리나 clamp로 유동 스케일 구성
접근성 고려: 사용자가 브라우저 기본 글꼴 크기를 변경해도 rem 기반 레이아웃은 자연스럽게 반응
중첩 주의: em은 상속 체인이 길수록 예측 난이도 상승. 다단계 중첩에서는 rem으로 안전망 확보
혼용 전략: 전역 값(rem) + 로컬 동조(em) 혼용. 무분별 혼용은 지양
테스트: 개발자 도구에서 Computed 값을 확인하여 기대 px 변환 여부 검증

간단 예시

콘텐츠 유무와 관계없이 카드 높이를 타이포 스케일에 연동

html { font-size: 16px; }
.card { min-height: 12rem; /* 전역 스케일에 연동 */ }
.card__title { font-size: 1.25rem; }
.card__body { padding: 1.5em; /* 본문 글자 크기에 비례해 내부 여백 조정 */ }

정리

em, rem 모두 font-size 기반 상대 단위이나 기준점이 다름
em은 현재 요소의 계산된 font-size 기준. 상속 체인 영향 큼
rem은 루트(html) 기준. 예측 가능성과 재사용성 높음
전역 스페이싱과 타이포 스케일은 rem, 글자 크기와 동조가 필요한 로컬 속성은 em로 운용 권장

참고자료

https://www.daleseo.com/css-em-rem/

개요#

상대 단위 개념#

em과 rem의 공통점#

em과 rem의 차이#

상속과 em 계산의 함정#

언제 em, 언제 rem#

사용 팁과 주의#

간단 예시#

정리#

참고자료#

개요