도구 소개
rem → px는 px → rem의 역변환입니다. rem 값과 실제 루트 글꼴 크기를 입력하면 브라우저에서 해당 픽셀 값을 계산합니다. 기존 스타일의 상대 크기를 이해할 때 유용합니다.
사용 방법
- 변환할 rem 값을 입력하세요.
- 0보다 큰 루트 글꼴 크기를 입력하세요. 기본값은 16px입니다.
- px 결과와 계산 설명을 확인하세요.
- 결과를 복사하거나 예제를 불러와 자주 쓰는 변환을 확인하세요.
사용 예제
- 1.5rem × 16px = 24px.
- 2rem × 16px = 32px.
- 1.25rem × 20px = 25px.
계산 원리
px = rem × rootFontSize입니다. px → rem과 단위 변환 함수를 공유하며 결과를 표시할 때 부동소수점 계산의 불필요한 끝자리를 제거합니다. 브라우저의 기본 루트 글꼴 크기는 보통 16px이지만 프로젝트 CSS에서 바꿀 수 있습니다.
주요 용도
- rem 스타일을 디자인 시안의 픽셀 값과 비교합니다.
- 테마에서 루트 글꼴 크기를 바꾼 뒤의 크기 변화를 이해합니다.
- 글꼴 크기, 여백, 컨테이너 크기를 빠르게 확인합니다.
개인정보 안내
모든 입력 처리, 계산, CSS 생성, 미리보기는 현재 브라우저에서 이루어집니다. 사용자 내용을 업로드하지 않으며 백엔드, 데이터베이스, 온라인 API, 외부 CDN을 사용하지 않습니다. 입력값은 자동 저장되지 않습니다.
FAQ
1rem이 항상 16px가 아닌 이유는 무엇인가요?
rem은 루트 요소의 실제 글꼴 크기를 사용합니다. 프로젝트 CSS나 사용자 설정에서 이 기준을 바꿀 수 있습니다.
루트 글꼴 크기를 18이나 20으로 설정해도 되나요?
네. 도구가 허용하는 범위에서 0보다 큰 유효한 값이면 사용할 수 있습니다. 16으로 고정되지 않습니다.
브라우저 확대·축소가 공식에 영향을 주나요?
이 공식은 CSS 픽셀과 rem의 관계를 변환합니다. 화면의 실제 물리 픽셀은 확대·축소와 기기 픽셀 비율의 영향도 받습니다.
일부 결과에 소수점이 없는 이유는 무엇인가요?
결과가 정수에 가까우면 불필요한 끝자리 0을 제거하여 CSS에 바로 쓰기 쉬운 형태로 표시합니다.