이게 뭔가요?

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 처럼 떨어지면 팀 규칙에 맞춰 반올림할지 정해두는 게 좋습니다.

주의 — 1rem = 16px은 브라우저 기본값일 뿐입니다. html { font-size: 62.5% }로 루트를 10px에 맞춘 프로젝트에서는 1.6rem이 16px이므로, 변환하기 전에 루트 폰트 크기를 확인하고 이 도구의 기준값을 바꾸세요. em은 부모 크기에 비례하므로 중첩할수록 복리처럼 커집니다. 중첩되는 컴포넌트에는 rem이 예측하기 쉽습니다.