PX ↔ REM 변환기 | 반응형 타이포그래피

변환브라우저에서 실행(업로드 없음)

CSS 단위 변환: 기준 폰트 크기를 바탕으로 px ↔ rem을 상호 변환합니다. 접근성·반응형 레이아웃에 최적.

표준: W3C CSS Values and Units Module Level 4 - rem unit (root element font size)

💡 실시간 모드: 입력하는 대로 자동으로 결과가 업데이트됩니다.

모드

설정

기본 폰트 크기

소수 자리:

변환 공식:

px → rem: rem = px ÷ 16

rem → px: px = rem × 16

예시: 16px = 1rem, 32px = 2rem, 8px = 0.5rem

입력

💡 일반적으로 16px(62.5% 기법 사용 시 10px)

출력

Loading…

기준(root) 폰트 크기를 설정해 px ↔ rem을 정밀하게 변환하고, 접근성과 일관성을 갖춘 반응형 타이포그래피를 구현하세요. 여러 값을 한 번에 처리하고 CSS에 바로 붙여넣을 수 있는 결과를 제공합니다.

이 도구 사용 방법

1
상단에서 변환 모드 선택: px → rem 또는 rem → px
2
기본 폰트 크기 설정(기본값: 16px, 프로젝트 기준에 맞게 조정)
3
변환할 값 입력(쉼표/공백/줄바꿈 구분 지원, 단위 생략 가능)
4
Live 모드에서 즉시 결과 확인 또는 수동 모드에서 버튼 클릭
5
CSS 주석과 함께 변환 결과를 복사하거나 파일로 다운로드

사용 사례 및 예시

반응형 웹 디자인

디자인 산출물의 px 값을 rem으로 일괄 변환하여 브레이크포인트 전반에서 매끄럽게 스케일링.

접근성 향상

사용자 폰트 크기 선호를 반영하는 rem 기반 타이포그래피로 가독성과 WCAG 준수 개선.

디자인 시스템 리팩토링

여백/타이포 스케일을 토큰화하여 rem 기반으로 표준화, 유지보수성 강화.

Fluid Typography

clamp()와 함께 rem을 사용해 최소/최대/유동 크기를 계산하여 유연한 타이포그래피 구성.

px와 rem의 차이는 무엇인가요?

px은 디스플레이 픽셀 기반의 절대 단위이며, rem은 루트 요소(html)의 폰트 크기에 상대적인 단위입니다.

기본 공식: rem = px ÷ base, px = rem × base(예: base 16px에서 24px → 1.5rem).

W3C CSS Values and Units에서 rem은 사용자 설정을 반영하므로 접근성과 반응형 설계에 유리합니다.

자주 묻는 질문

Q.기본 루트 값은?

A. 대부분의 브라우저 기본값은 16px입니다. 프로젝트에서 html { font-size }를 별도로 지정했다면 해당 값을 기준으로 설정하세요(예: 62.5% 기법 사용 시 10px).

Q.소수점 처리 방식은?

A. 일반적인 반올림 규칙(반올림/내림/올림 설정)에 따르며, 소수 자릿수는 옵션으로 제어할 수 있습니다.

Q.px와 rem 중 무엇을 사용?

A. 타이포그래피/여백/간격 등은 rem이 사용자 설정을 존중해 접근성에 유리합니다. 픽셀 정확도가 필요한 헤어라인, 보더, 섀도우 등은 px를 권장합니다.