CSS 및 프런트엔드 개발 도구

rem → px 변환기

rem을 픽셀로 변환하고 루트 글꼴 크기와 최종 CSS 크기의 관계를 확인하세요.

입력값

브라우저에서 처리

실시간 미리보기

설정을 바꾸면 자동으로 업데이트됩니다
직접 선택하거나 복사할 수 있습니다

설정한 루트 글꼴 크기에 따라 rem을 px로 변환하고 공식과 결과를 확인하세요.

입력한 내용은 브라우저에서만 처리되며 서버에 업로드되지 않습니다.

도구 소개

rem → px는 px → rem의 역변환입니다. rem 값과 실제 루트 글꼴 크기를 입력하면 브라우저에서 해당 픽셀 값을 계산합니다. 기존 스타일의 상대 크기를 이해할 때 유용합니다.

사용 방법

  1. 변환할 rem 값을 입력하세요.
  2. 0보다 큰 루트 글꼴 크기를 입력하세요. 기본값은 16px입니다.
  3. px 결과와 계산 설명을 확인하세요.
  4. 결과를 복사하거나 예제를 불러와 자주 쓰는 변환을 확인하세요.

사용 예제

  • 1.5rem × 16px = 24px.
  • 2rem × 16px = 32px.
  • 1.25rem × 20px = 25px.

계산 원리

px = rem × 루트 글꼴 크기입니다. 루트 글꼴이 16px이면 1.5rem = 24px입니다. 사이트 스타일과 사용자 설정으로 크기가 달라질 수 있으므로 실제 값을 기준으로 변환하세요.

주요 용도

  • rem 스타일을 디자인 시안의 픽셀 값과 비교합니다.
  • 테마에서 루트 글꼴 크기를 바꾼 뒤의 크기 변화를 이해합니다.
  • 글꼴 크기, 여백, 컨테이너 크기를 빠르게 확인합니다.

개인정보 안내

입력 내용과 결과는 브라우저 안에서만 처리되며 업로드되거나 자동으로 저장되지 않습니다. 보관할 결과는 복사해서 저장하세요.

FAQ

1rem이 항상 16px가 아닌 이유는 무엇인가요?

rem은 루트 요소의 실제 글꼴 크기를 사용합니다. 프로젝트 CSS나 사용자 설정에서 이 기준을 바꿀 수 있습니다.

루트 글꼴 크기를 18이나 20으로 설정해도 되나요?

네. 도구가 허용하는 범위에서 0보다 큰 유효한 값이면 사용할 수 있습니다. 16으로 고정되지 않습니다.

브라우저 확대·축소가 공식에 영향을 주나요?

이 공식은 CSS 픽셀과 rem의 관계를 변환합니다. 화면의 실제 물리 픽셀은 확대·축소와 기기 픽셀 비율의 영향도 받습니다.

일부 결과에 소수점이 없는 이유는 무엇인가요?

결과가 정수에 가까우면 불필요한 끝자리 0을 제거하여 CSS에 바로 쓰기 쉬운 형태로 표시합니다.

개발자 도구 목록으로 돌아가기