이 계산기는 무엇인가요
픽셀 변환 계산기는 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 기준으로 모든 단위가 변환됩니다.