PX to REM 변환기
px을 rem으로, rem을 px로, px을 em으로 변환합니다. 복사 가능한 CSS 코드와 실시간 참조 표를 제공하며 기본 글꼴 크기를 자유롭게 설정할 수 있습니다.
🔒 전적으로 귀하의 브라우저에서 처리됩니다. 여기에 입력하는 어떤 것도 업로드되지 않습니다.
결과
rem 단위는 레이아웃의 접근성을 지켜 줍니다. 사용자의 글꼴 크기 설정에 맞춰 함께 조절되니까요. 하지만 누구도 하루 종일 머릿속으로 16 나누기를 하고 싶어 하진 않습니다. 이 변환기는 계산을 실시간으로 처리합니다. 방향(px → rem, rem → px, px → em)을 선택하고 값을 입력하면 font-size: 0.875rem;과 같은 복사 가능한 CSS 코드와 함께 결과가 즉시 나타납니다.
기본 글꼴 크기 필드 덕분에 어떤 프로젝트에도 맞출 수 있습니다. 브라우저 기본값은 16px이므로 아무 설정 없이도 1rem은 16px이 되지만, 많은 코드베이스에서 1rem을 10px로 만들기 위해 html { font-size: 62.5% }를 설정합니다. 기준 값을 10으로 입력하면 모든 변환과 표의 행이 그에 맞춰집니다. px → em 방향은 루트가 아닌 부모 요소의 글꼴 크기를 기준으로 동일한 수식을 적용하며, 이것이 CSS에서 em과 rem의 차이점입니다.
결과 아래에는 디자인에서 가장 흔히 쓰이는 크기들(1, 2, 4, 8, 10, 12, 14, 16, 18, 20, 24, 32, 48, 64 픽셀)이 현재 기준 값으로 이미 변환된 채 표시됩니다. 기준과 일치하는 행은 강조되어 있습니다. 평소에 모니터에 붙여 놓고 쓰던 치트 시트가 실제 사용하는 기준 값과 항상 동기화된 채 제공되는 셈입니다.
모든 작업은 입력과 동시에 브라우저 안에서 로컬로 처리됩니다. 업로드도, 가입도, 서버 통신도 없습니다. rem → px, px → em, 10px 기준, 그리고 14, 24, 32px 같은 자주 찾는 값에 대한 미리 설정된 페이지들은 변환기를 해당 질문에 딱 맞게 구성한 채로 열어 줍니다.