홍라이프 계산기px-em 변환기 쉽게 이해하기 — 개념과 원리
CSS에는 픽셀, 포인트 같은 절대 단위와 em, rem, % 같은 상대 단위가 있습니다. 이 변환기는 부모와 루트 글꼴 크기를 바탕으로 px, em, rem, pt, % 사이에서 크기를 바꿔, 픽셀로 된 디자인 시안을 확대·축소에 강한 CSS로 옮길 때 도와줍니다.
계산 방법
먼저 모두 픽셀로 바꿉니다.
- em: 값 × 부모 글꼴 크기, rem: 값 × 루트 글꼴 크기
- pt: 값 × 96 ÷ 72(1in = 96px = 72pt)
- %: 값 × 부모 글꼴 크기 ÷ 100
그다음 픽셀에서 em = px ÷ 부모, rem = px ÷ 루트, pt = px × 72 ÷ 96, % = px ÷ 부모 × 100
- 브라우저 기본 루트 글꼴 크기는 흔히 16px이지만 사용자가 바꿀 수 있습니다.
원리
상대 단위는 글꼴 크기에 따라 달라집니다. font-size에 쓴 1em은 부모의 글꼴 크기와 같아서, em을 겹쳐 쓰면 값이 곱해집니다. 1rem은 항상 루트 html 요소를 기준으로 하므로 겹쳐 곱해지지 않아 예측하기 쉽습니다. 글자에 rem을 쓰면 독자의 브라우저 글꼴 설정이 반영되어 큰 글자가 필요한 사람에게 도움이 됩니다. 포인트는 인쇄에서 온 고정 단위로, CSS는 1인치를 96px이자 72pt로 정하므로 1pt는 4/3px입니다.
예제 풀이
기본값인 24px → rem, 부모 16px, 루트 16px로 계산합니다.
- 픽셀은 그대로 24px입니다.
- rem = 24 ÷ 16 = 1.5rem(결과)입니다.
- em = 24 ÷ 16 = 1.5입니다.
- pt = 24 × 72 ÷ 96 = 18pt입니다.
- 부모 대비 % = 24 ÷ 16 × 100 = 150%입니다.
| 루트(html) 글꼴 크기 (px) | 결과 |
|---|---|
| 4 | 6rem |
| 8 | 3rem |
| 12 | 2rem |
| 16 | 1.5rem |
| 20 | 1.2rem |
| 24 | 1rem |
| 32 | 0.75rem |
결과 해석
루트가 16px이면 흔히 쓰는 크기는 0.875rem = 14px, 1rem = 16px, 1.25rem = 20px, 1.5rem = 24px입니다. 부모의 글꼴 크기가 다른 곳에 들어간 요소에서는 em 값이 바뀌지만 rem 값은 그대로입니다. 요소 자신의 글자에 맞춰 늘어나야 하는 여백에는 em을, 페이지 전체에서 일정해야 하는 크기에는 rem을 쓰십시오.
흔한 실수
- 1em이 항상 16px이라고 생각하는 경우(부모에 따라 다릅니다)
- em 글꼴 크기를 겹쳐 써 크기가 계속 커지거나 작아지는 경우
- 루트 글꼴 크기를 px로 지정해 사용자의 브라우저 설정을 덮어쓰는 경우
- 화면 배치에서 pt를 px와 같은 것으로 쓰는 경우
자주 묻는 질문
1rem은 몇 px인가요?
루트 글꼴 크기를 바꾸지 않았다면 흔한 브라우저 기본값인 16px입니다.
em과 rem은 어떻게 다른가요?
em은 부모의 글꼴 크기, rem은 루트의 글꼴 크기를 기준으로 합니다.
pt를 px로 바꾸려면?
4/3을 곱합니다. 12pt는 16px입니다.
출처: W3C, CSS Values and Units Module Level 4, font-relative lengths (em, rem) and absolute lengths (1in = 96px = 72pt) · MDN Web Docs, "CSS values and units"