이게 뭔가요?
CSS의 길이는 px, rem, em, pt 등 여러 단위로 표현됩니다. 이 도구는 한 단위로 값을 입력하면 나머지 단위로 즉시 환산해 줍니다. rem은 루트(html) 폰트 크기, em은 부모 요소의 폰트 크기를 기준으로 계산되므로, 두 기준값(기본 16px)을 직접 바꿔가며 결과를 확인할 수 있습니다.
언제 쓰나요?
디자인 시안이 픽셀 단위로 왔는데 접근성과 확장성을 위해 rem으로 옮길 때, em이 중첩되며 예상과 다른 크기가 나올 때 실제 픽셀 값을 확인할 때, 또는 pt로 표기된 값을 웹용 px로 바꿀 때 씁니다.
실무에서 자주 틀리는 점
- rem과 em의 기준 혼동.
rem은 항상 루트 기준으로 고정이지만,em은 부모의 폰트 크기를 따릅니다. 중첩된 요소에서em을 쓰면 크기가 복리처럼 누적됩니다. - 루트 폰트 크기 가정.
1rem = 16px은 브라우저 기본값일 뿐,html { font-size }를 바꾸면 전부 달라집니다. 사용자가 브라우저 기본 글자 크기를 키운 경우도 고려해야 합니다. - px로 고정하면 접근성 저하. 폰트 크기를
px로 못 박으면 사용자가 글자 크기를 키워도 반영되지 않습니다. 글꼴·여백은rem이 권장됩니다. - 소수점 반올림. 변환 결과가
0.9375rem처럼 떨어지면 팀 규칙에 맞춰 반올림할지 정해두는 게 좋습니다.
실무에서 — px를 rem으로 일괄 전환하다가, 프로젝트가
html { font-size: 62.5% }(10px 기준)로 잡혀 있는 걸 몰라 값이 전부 어긋난 적이 있다.1rem = 16px가정이 늘 맞는 게 아니라는 걸 그때 배웠다. 또 카드 안에em으로 폰트를 주고 그 안에 또em을 중첩했더니 글자가 복리처럼 커져서, 반복되는 컴포넌트엔rem을 쓰게 됐다.