CSS 단위 변환기 (px ↔ rem)

기본 설정에서 16px입니다. rem은 루트 요소(html)의 폰트 크기를 기준으로 하며, 브라우저 기본값이 16px이기 때문입니다.

rem은 항상 루트 폰트 크기를 기준으로 하지만 em은 부모 요소의 폰트 크기를 기준으로 합니다. em은 중첩되면 배수가 누적되어 예측이 어려워집니다.

사용자가 브라우저 글자 크기를 키웠을 때 함께 커지기 때문입니다. px로 고정하면 확대 설정이 무시되어 접근성이 나빠집니다.

html의 폰트 크기를 62.5%(=10px)로 낮춰 1rem을 10px로 만드는 방식입니다. 계산은 쉬워지지만 사용자의 기본 글자 크기 설정을 덮어써서 요즘은 권장되지 않습니다.