CSS 단위 변환기

rem은 문서 루트(html font-size, 기본 16 px) 기준, em은 부모 요소 기준입니다. 부모가 루트와 같은 크기를 쓰는 경우에만 둘이 같아집니다.

CSS 정의: 1 in = 96 px, 1 pt = 1/72 in → 1 pt = 96/72 ≈ 1.333 px.

기본 크기 패널의 뷰포트 폭·높이를 사용합니다. 기본값 1440×900은 일반 데스크탑 기준이라 디자인 캔버스에 맞게 바꾸세요.

폰트 크기 맥락에선 부모 폰트 크기를 기준으로 합니다(em과 동일). 다른 CSS 속성에선 해당 속성의 containing block 기준으로 달라집니다.

거의 언제나 rem입니다. 브라우저 기본 글꼴 크기를 키워 둔 독자는 rem에서는 더 큰 글자를 보지만 px에서는 완전히 무시당하는데, 이는 취향 문제가 아니라 실제 접근성 결함입니다. px는 머리카락 같은 얇은 테두리처럼 정말로 확대되면 안 되는 것에만 쓰세요.

em이 곱해지기 때문입니다. 각 단계가 부모를 기준으로 해석되므로, 0.9em인 요소가 세 겹 겹치면 0.9 × 0.9 × 0.9로 원래 크기의 약 0.73배가 됩니다. rem은 요소가 아무리 깊이 들어가 있어도 언제나 루트를 기준으로 하므로 이런 일이 생기지 않습니다.