픽셀 변환 계산기는 px 값을 입력하면 rem, em, pt, inch, cm, mm 여섯 가지 단위로 동시에 변환해 주는 개발자·디자이너용 도구입니다. base 폰트 크기와 DPI를 직접 조정할 수 있고, @1x·@2x·@3x 해상도 배율도 지원합니다.

CSS에서 px를 rem으로 바꿔 반응형 타이포그래피를 구성할 때, 디자인 시안의 px 값을 인쇄용 pt나 실제 물리 크기로 확인할 때 유용합니다. 모든 변환은 브라우저 안에서 처리되어 입력값이 서버로 전송되지 않습니다.

자세한 사용법과 자주 묻는 질문 보기

사용 방법

px 값을 입력하면 여섯 개 단위의 변환 결과가 한 화면에 실시간으로 표시됩니다. rem·em의 기준이 되는 base 폰트 크기(기본 16px)와 물리 단위 환산에 쓰이는 DPI를 바꿀 수 있으며, 레티나 디스플레이 작업을 위한 @2x·@3x 배율을 선택하면 배율이 곱해진 유효 px로 계산됩니다.

각 결과 카드에는 적용된 변환 공식이 함께 표시되고, 클릭하면 값이 클립보드에 복사되어 CSS에 바로 붙여넣을 수 있습니다.

변환 공식

rem과 em은 px ÷ base 폰트 크기로 계산합니다. 예를 들어 base 16px에서 24px는 1.5rem입니다. pt는 웹 표준(96DPI)에서 1px = 0.75pt이므로 px × 0.75로 구합니다.

inch는 px ÷ DPI, cm는 inch × 2.54, mm는 inch × 25.4로 환산합니다. DPI 값을 실제 모니터나 인쇄 해상도로 바꾸면 물리적 크기를 더 정확하게 추정할 수 있습니다.

활용 팁

접근성 측면에서는 폰트 크기에 px 대신 rem을 쓰는 것이 좋습니다. 사용자가 브라우저 기본 글꼴 크기를 키웠을 때 rem 단위는 함께 커지지만 px는 고정되기 때문입니다. 미디어 쿼리 분기점도 rem으로 정의하면 확대 환경에서 레이아웃이 더 자연스럽게 대응합니다.

자주 묻는 질문

16px는 몇 rem인가요?
브라우저 기본 base 폰트 크기가 16px이므로 16px = 1rem입니다. 같은 기준에서 24px는 1.5rem, 32px는 2rem입니다.
rem과 em의 차이는 무엇인가요?
rem은 문서 루트(html)의 폰트 크기를 기준으로 하고, em은 해당 요소의 부모(정확히는 자신의 폰트 크기)를 기준으로 합니다. 중첩 요소에서는 em이 누적되어 예측이 어려워질 수 있어 rem이 더 흔히 쓰입니다.
px를 pt로 바꾸는 기준은 무엇인가요?
CSS 표준은 96px = 1inch = 72pt로 정의하므로 1px = 0.75pt입니다. 예를 들어 16px는 12pt에 해당합니다.
@2x, @3x 배율은 언제 사용하나요?
레티나 등 고밀도 디스플레이용 이미지를 만들 때 논리 px의 2배, 3배 크기로 내보내야 하는 경우에 사용합니다. 배율을 선택하면 곱해진 유효 px 기준으로 모든 단위가 변환됩니다.