PX to REM 변환기

픽셀 값을 루트 폰트 크기로 나누면 됩니다: rem = px ÷ 루트. 브라우저 기본값인 16px 루트에서는 16px ÷ 16 = 1rem, 24px ÷ 16 = 1.5rem, 40px ÷ 16 = 2.5rem입니다. 위 변환기의 px 필드에 값을 입력하면 rem 필드가 즉시 업데이트됩니다 — 머릿속 암산이 필요 없습니다. 62.5% 트릭(10px 루트)을 사용하는 경우에는 10으로 나누기만 하면 됩니다: 24px = 2.4rem.

rem 값에 루트 폰트 크기를 곱하면 됩니다: px = rem × 루트. 기본 16px 루트에서는 1rem × 16 = 16px, 1.5rem × 16 = 24px, 0.875rem × 16 = 14px입니다. 변환기의 rem 필드를 수정하면 px 필드가 즉시 따라옵니다. 이 변환기는 완전 양방향으로 작동합니다 — 아는 값을 입력하면 나머지가 자동으로 업데이트됩니다.

1rem은 루트(html) 폰트 크기와 같습니다. Chrome, Safari, Firefox, Edge 등 모든 주요 브라우저에서 기본값은 16px이므로, 루트가 변경되지 않은 경우 1rem = 16px입니다. 루트를 10px로 설정(62.5% 트릭)하면 1rem은 10px가 됩니다. 사용자가 브라우저 설정에서 기본 텍스트 크기를 변경하면 그 사용자에게 1rem이 의미하는 값도 바뀝니다 — 이것이 접근성 있는 폰트 크기에 px보다 rem이 더 적합한 이유입니다.

표준 16px 루트에서 0.875rem은 14px입니다 (0.875 × 16 = 14). 이는 CSS 프레임워크에서 가장 자주 쓰이는 rem 값 중 하나로, Tailwind CSS의 text-sm 클래스가 바로 0.875rem(14px)입니다. 62.5% 트릭을 적용한 10px 루트에서는 0.875rem이 8.75px가 됩니다.

px는 절대적이고 고정된 단위입니다 — 16px는 사용자 설정이나 화면 크기와 관계없이 항상 16픽셀입니다. rem은 상대적 단위로, 루트(html) 요소 폰트 크기의 배수입니다. 기본적으로 1rem = 16px이지만, 사용자가 접근성 설정에서 브라우저 기본 텍스트 크기를 키우면 함께 스케일됩니다. 이 덕분에 rem 기반 레이아웃이 더 접근성이 높습니다 — 사용자가 큰 텍스트를 요청하면 텍스트가 비례적으로 커지지만, px 기반 텍스트는 고정된 채로 너무 작아질 수 있습니다.

px는 고정값입니다. rem은 루트(html) 폰트 크기를 기준으로 하며, 페이지 전체에 일관된 하나의 기준점이 됩니다. em은 자신의 부모 요소 폰트 크기를 기준으로 하므로 요소가 중첩될수록 값이 누적됩니다: 부모가 20px일 때 자식에 1.5em을 설정하면 30px가 됩니다. 같은 자식을 1.5rem으로 설정하면 부모와 관계없이 24px(1.5 × 16px 루트)가 됩니다. 루트가 16px이고 중첩이 없는 경우 16px, 1rem, 1em은 모두 같습니다 — 부모 폰트 크기가 변할 때 비로소 차이가 나타납니다.

접근성 관점에서 폰트 크기에는 rem이 더 좋습니다. 시각 장애가 있는 사용자처럼 브라우저 기본 텍스트 크기를 키우는 경우, rem 기반 폰트 크기는 모두 함께 스케일되지만 px 값은 고정된 채로 유지됩니다. WCAG 2.1 지침 1.4.4(텍스트 크기 조정)는 기능 손실 없이 텍스트를 200%까지 확대할 수 있어야 한다고 요구하는데, rem을 사용하면 이를 손쉽게 충족할 수 있습니다. px는 1px 테두리나 고정 크기 아이콘처럼 스케일되어서는 안 되는 요소에만 사용하세요.

62.5% 트릭은 루트(html) 폰트 크기를 62.5%로 설정하는 방법입니다 — 브라우저 기본값 16px를 기준으로 하면 10px가 됩니다. 이렇게 하면 rem 연산이 매우 쉬워집니다: 1.6rem = 16px, 2.4rem = 24px, 3.2rem = 32px. 모든 rem 값이 10의 배수로 깔끔하게 매핑됩니다. 여기서 루트 폰트 크기를 10px 프리셋으로 전환하면 변환기와 참조 표가 즉시 재계산되어 깔끔한 매핑을 바로 확인할 수 있습니다. 단점은 루트 크기를 고정함으로써 사용자의 브라우저 기본값을 재정의하게 되어 접근성이 약간 저하된다는 점입니다.

표준 16px 루트 기준: 10px = 0.625rem, 12px = 0.75rem, 13px = 0.8125rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 28px = 1.75rem, 32px = 2rem, 40px = 2.5rem, 48px = 3rem. 도구 내 참조 표에 자주 쓰이는 값이 모두 나열되어 있으며, 클릭 한 번으로 복사할 수 있습니다 — 매번 직접 계산하는 것보다 훨씬 빠릅니다.

Tailwind CSS는 기본적으로 16px 루트를 기준으로 대부분의 크기 값에 rem 단위를 사용합니다. Tailwind의 간격 스케일은 1단위 = 0.25rem = 4px입니다. 따라서 space-4 = 1rem = 16px, space-6 = 1.5rem = 24px, space-8 = 2rem = 32px입니다. 타이포그래피의 경우: text-sm = 0.875rem(14px), text-base = 1rem(16px), text-lg = 1.125rem(18px), text-xl = 1.25rem(20px), text-2xl = 1.5rem(24px)입니다. 이 변환기를 사용하면 Tailwind의 rem 기반 시스템에서 사용자 정의 px 값을 빠르게 확인할 수 있습니다.

예, 완전히 작동합니다. 이 변환기는 브라우저의 JavaScript로만 실행되며, 서버 통신이나 API 호출, 데이터 업로드가 전혀 없습니다. 페이지가 한 번 로드되면 오프라인에서도 사용할 수 있습니다. 입력한 값은 기기 밖으로 나가지 않습니다. 즐겨찾기에 추가해 두면 비행기 안이나 터널 속에서, 또는 인터넷 없이 코딩하는 어느 곳에서든 사용할 수 있습니다. 어떤 서버에도 데이터가 저장되지 않습니다.

루트 폰트 크기 필드에 원하는 값을 직접 입력하거나, 16px(브라우저 기본값) 또는 10px(62.5% 트릭) 프리셋 버튼을 사용하세요. 표와 현재 입력값의 rem, em, pt 변환이 즉시 재계산됩니다. CSS에서 html { font-size: 18px; }를 설정한 경우 루트에 18을 입력하면 해당 프로젝트의 스케일에 정확한 변환값을 확인할 수 있습니다.