straighten PX ↔ REM ↔ EM ↔ PT 변환기 star

작동 방식

rem = px ÷ 기준 크기입니다(기본값 16px, 즉 24px = 1.5rem). em도 같은 방식으로 작동하지만 요소 자신이 상속받은 글꼴 크기 — 이 변환기의 "컨텍스트 크기" 항목 — 를 기준으로 합니다. pt는 인쇄용 단위로, 1pt = 1.333px(96dpi ÷ 72)입니다. 어느 항목에 입력하든 나머지 값이 자동으로 따라옵니다.

계산 예시: 16px 기준에서 1.25rem 크기의 제목은 20px로 렌더링됩니다. 자체 글꼴 크기가 1.125rem(18px)인 컴포넌트 안에 0.875em짜리 레이블을 중첩시키면 15.75px로 렌더링되는데, em은 루트가 아니라 가장 가까운 부모 요소를 기준으로 누적되기 때문입니다.

알아두면 좋은 점

• rem은 고정된 브라우저 기본값이 아니라 루트 요소를 기준으로 합니다. 16px이라는 가정은 아무도 그것을 바꾸지 않았을 때만 유효합니다. 사용자가 접근성 설정에서 브라우저의 기본 글꼴 크기를 늘리면 — 저시력 사용자들 사이에서 흔한 설정입니다 — rem 기반의 모든 값이 그에 비례하여 함께 커집니다. 픽셀 값은 그렇지 않습니다. 16px 단락은 사용자의 브라우저 설정과 무관하게 항상 16px로 유지됩니다.
• 이것이 접근성 가이드라인이 글꼴 크기와 여백에 rem을 권장하는 이유입니다. rem으로 구성된 레이아웃은 사용자가 선택한 텍스트 크기를 처음부터 끝까지 존중합니다 — 제목, 본문, 그 주변의 여백이 모두 함께 커지므로, 텍스트가 커져도 디자인이 깨지지 않고 비례를 유지합니다.
• em은 자신의 중첩 구조를 기준으로 하며, 값이 누적됩니다. 이미 1.5em 크기인 요소 안에 있는 1.5em 값은 루트 기준의 2.25배로 렌더링됩니다 — 버튼 패딩처럼 자체 글꼴 크기 컨텍스트에 맞춰 조정되어야 하는 컴포넌트에는 유용하지만, 여러 단계로 중첩되는 경우에는 위험할 수 있습니다.
• 오래된 "62.5% 트릭" — 암산을 쉽게 하기 위해 루트를 10px로 설정하여 1rem = 10px로 만드는 방법 — 은 지금도 작동하지만, 새 프로젝트에서는 피하는 것이 좋습니다. 대부분의 컴포넌트 라이브러리는 16px 루트를 전제로 하므로, 이를 재정의하면 외부 라이브러리 코드에서 예상치 못한 크기 문제가 발생할 수 있습니다.
• pt는 px를 기준으로 정의되며, 그 반대가 아닙니다. CSS는 1in = 96px = 72pt라는 비율을 고정하므로, 1pt = 96/72 = 정확히 1.333px입니다. 이는 주로 디자인을 인쇄물이나 PDF로 내보낼 때 중요한데, 그런 환경에서는 pt가 고유 단위이기 때문입니다 — 이 변환은 화면상의 크기와 인쇄된 크기를 일치시켜 줍니다.