언제 쓰나
피그마 시안의 픽셀을 rem 으로 옮길 때, 디자이너가 준 pt 단위를 px 로 환산할 때, 부모 요소 기준 em 값이 실제로 몇 px 인지 확인할 때.
단위 종류
- px — 절대 기준. 모든 변환의 중심.
- rem — 루트 (
<html>) 글꼴 크기 대비. 위쪽에서 조정 가능. - em — 부모 글꼴 크기 대비. 부모 크기 입력란에서 조정.
- pt — 1pt = 1/72 인치 = 96/72 px ≈ 1.333 px (CSS 표준).
- pc — 1pc = 12pt.
- % — 부모 글꼴 크기 대비 비율 (em × 100).
동기화
어느 칸에 입력해도 다른 단위가 즉시 갱신됩니다. 루트·부모 글꼴 크기를 바꾸면 rem · em · % 만 영향을 받고, px · pt · pc 는 그대로입니다.
자주 보는 함정
html { font-size: 62.5% }트릭 — 루트를 10px 로 만들어 1rem = 10px 로 쓰는 관행. 위쪽 "루트 글꼴 크기" 를 10 으로 바꾸면 동일 계산이 됩니다.- 이메일 클라이언트 — 일부 메일은 rem 을 무시합니다. pt 또는 px 으로 직접 명시하세요.
입력은 어디로 가나요?
CSS 단위 변환 계산은 모두 이 브라우저 안에서 일어납니다. 입력한 값은 어디로도 전송되거나 저장되지 않고, 탭을 닫으면 사라집니다.