도구 소개
px → rem 변환기는 루트 요소의 글꼴 크기에 따라 픽셀 값을 rem으로 변환합니다. 기본 기준은 16px이며 프로젝트 스타일에 맞춰 10, 14, 18 또는 0보다 큰 다른 값으로 바꿀 수 있습니다.
사용 방법
- 변환할 px 값을 입력하세요.
- 프로젝트의 실제 루트 글꼴 크기를 설정하세요. 0보다 커야 합니다.
- 변환 결과와 계산 설명을 확인하세요.
- rem 결과를 복사하거나 입력을 지운 뒤 다른 크기를 변환하세요.
사용 예제
- 32px ÷ 16px = 2rem.
- 24px ÷ 16px = 1.5rem.
- 20px ÷ 10px = 2rem.
계산 원리
rem = px / rootFontSize입니다. 095와 096은 같은 단위 변환 로직을 사용하며 출력 시 적절한 소수 자릿수로 제한하고 불필요한 끝자리 0을 제거합니다. 브라우저의 기본 루트 글꼴 크기는 일반적으로 16px이지만 프로젝트 CSS나 사용자 설정에 따라 달라지므로 실제 기준값을 사용해야 합니다.
주요 용도
- 디자인 시안의 픽셀 크기를 rem으로 바꿉니다.
- 프로젝트의 간격과 글꼴 크기 단위를 통일합니다.
- 루트 글꼴 크기가 변환 결과에 미치는 영향을 확인합니다.
개인정보 안내
모든 입력 처리, 계산, CSS 생성, 미리보기는 현재 브라우저에서 이루어집니다. 사용자 내용을 업로드하지 않으며 백엔드, 데이터베이스, 온라인 API, 외부 CDN을 사용하지 않습니다. 입력값은 자동 저장되지 않습니다.
FAQ
rem이란 무엇인가요?
rem은 문서 루트 요소의 글꼴 크기를 기준으로 하는 CSS 길이 단위입니다. 루트 요소는 일반적으로 html입니다.
1rem은 몇 px인가요?
루트 글꼴 크기에 따라 다릅니다. 16px이면 1rem = 16px이고 10px이면 1rem = 10px입니다.
루트 글꼴 크기를 0으로 설정할 수 없는 이유는 무엇인가요?
px를 rem으로 변환할 때 루트 글꼴 크기로 나눕니다. 0은 0으로 나누기 오류를 일으키며 음수 역시 유효한 글꼴 크기가 아닙니다.
rem과 em은 어떻게 다른가요?
rem은 루트 요소의 글꼴 크기가 기준입니다. em은 보통 현재 요소의 글꼴 크기를 기준으로 하며, font-size를 지정할 때는 부모 요소의 계산된 글꼴 크기가 기준입니다.