CSS px em rem 차이

css · 7월 26일 · 15 min read

CSS에서 16px, 1em, 1rem은 비슷한 크기로 보일 때가 있다.
하지만 세 단위가 값을 계산하는 기준은 서로 다르다.

px는 CSS의 절대 길이 단위이고, em과 rem은 글꼴 크기를 기준으로 하는 상대 길이 단위다.
중첩된 요소에서 크기를 예측하려면 숫자보다 기준이 어디에 있는지 먼저 봐야 한다.

px의 기준

CSS의 px는 화면의 물리적인 픽셀 하나를 뜻하지 않는다.
CSS 표준에서 절대 길이 단위끼리는 96px = 1in의 비율로 연결된다.
고해상도 화면에서는 하나의 CSS 픽셀을 여러 디바이스 픽셀이 그릴 수 있다.

.card {
  width: 320px;
  border: 1px solid #d0d7de;
}

이 예시의 너비와 테두리는 주변 요소의 글꼴 크기에 영향을 받지 않는다.
그래서 px는 얇은 테두리나 글꼴 크기에 비례해 변하지 않아야 하는 치수를 표현할 때 읽기 쉽다.

다만 px로 지정한 글자도 브라우저의 전체 페이지 확대에는 함께 커진다.
px는 어떤 확대에도 반응하지 않는다는 설명은 정확하지 않다.

em의 계산 기준

em은 현재 요소의 계산된 font-size를 기준으로 한다.
다만 font-size 속성 자체에서 사용한 em은 부모에게서 상속받은 글꼴 크기를 기준으로 계산된다.

<div class="parent">
  부모
  <div class="child">자식</div>
</div>

.parent {
  font-size: 1.25em;
}

.child {
  font-size: 1.25em;
}

상위 요소에서 상속받은 글꼴 크기가 16px이라면 부모는 20px이 된다.
자식은 부모의 20px을 다시 기준으로 삼으므로 25px이 된다.
같은 배율을 중첩할수록 크기가 누적되는 동작을 주의해야 한다.

padding: 0.5em처럼 font-size가 아닌 속성에서는 그 요소의 계산된 글꼴 크기가 기준이 된다.
버튼 글자가 커질 때 안쪽 여백도 함께 키우고 싶다면 이 성질이 유용하다.

rem의 계산 기준

rem은 문서의 루트 요소인 html의 글꼴 크기를 기준으로 한다.
중첩 깊이가 달라져도 같은 rem 값은 같은 계산 결과를 만든다.

html {
  font-size: 100%;
}

.parent,
.child {
  font-size: 1.25rem;
}

브라우저 기본 글꼴 크기가 16px이라면 두 요소 모두 20px이 된다.
하지만 사용자가 기본 글꼴 크기를 바꿀 수 있으므로 1rem이 항상 16px이라고 가정하면 안 된다.

프로젝트 전체의 제목, 본문, 간격 단계를 공통 기준으로 관리할 때 rem이 잘 맞는다.
어느 컴포넌트 안에 들어가도 기준이 루트에 있어 계산 결과가 흔들리지 않는다.

단위 선택 기준

단위 하나를 모든 속성에 통일할 필요는 없다.
바뀌어야 하는 기준에 맞춰 섞어 쓰는 편이 자연스럽다.

.button {
  min-height: 2.75rem;
  padding: 0.5em 1em;
  border: 1px solid currentColor;
  border-radius: 0.5rem;
  font-size: 1rem;
}

이 버튼의 기본 크기와 모서리는 루트 기준으로 유지된다.
안쪽 여백은 버튼 자체의 글꼴 크기가 바뀌면 함께 변한다.
테두리는 글꼴 크기와 관계없이 1px로 유지된다.

본문과 공통 간격 체계에는 rem, 컴포넌트 글자에 비례해야 하는 간격에는 em, 얇은 경계선에는 px부터 검토하면 된다.
margin과 padding의 역할이 헷갈린다면 CSS margin과 padding 차이를 같이 보면 좋다.

확대와 접근성

상대 단위를 사용했다고 접근성이 자동으로 보장되지는 않는다.
글자가 커졌을 때 고정 높이 안에서 잘리거나 버튼 이름이 겹치면 단위 선택과 별개로 문제가 된다.

루트 글꼴 크기를 62.5%로 줄여 1rem을 10px처럼 계산하는 방식도 고정 공식은 아니다.
사용자 기본값이 달라지면 실제 계산값도 달라지고, 기본 본문 크기까지 작아질 수 있다.
특별한 이유가 없다면 루트의 사용자 기본값을 유지하고 필요한 크기를 상대 단위로 표현하는 편이 단순하다.

마지막 판단은 브라우저 기본 글꼴 크기 변경과 200% 확대에서 확인해야 한다.
텍스트, 입력 요소, 컨테이너가 잘리거나 기능을 잃지 않는지 함께 점검해야 한다.