REM PX 변환기란?
REM PX 변환기는 상대 단위인 REM(root em)을 픽셀(PX) 단위로 바꿔주는 도구입니다. 웹 개발에서 REM은 루트 요소(일반적으로 <html> 요소)의 폰트 크기를 기준으로 하는 상대 단위인 반면, PX는 고정된 절대 단위입니다. 이 변환기를 활용하면 확장성과 접근성이 뛰어난 디자인을 유지하면서도, 내가 사용하는 REM 값이 실제로 몇 픽셀에 해당하는지 한눈에 파악할 수 있습니다.
REM PX 변환기는 언제 사용할까?
다음과 같은 상황에서 특히 유용합니다.
- 반응형 웹사이트를 설계하면서 상대 단위와 절대 단위를 서로 변환해야 할 때
- REM 단위를 사용하는 디자인 시스템 작업 중, 참고용으로 픽셀 값이 필요할 때
- 픽셀 단위로 치수가 표기된 시안(목업)을 구현하면서, 코딩은 REM 단위로 하고 싶을 때
REM을 PX로 계산하는 방법
REM에서 PX로의 변환은 아주 간단한 공식을 따릅니다.
PX = REM × 루트 폰트 크기
여기서 각 항목은 다음을 의미합니다.
- PX는 변환 결과로 얻는 픽셀 값
- REM은 변환하려는 상대 em 값
- 루트 폰트 크기는 html 요소의 기본 폰트 크기(대부분의 브라우저에서 기본값은 16px)
즉, REM 값은 루트 폰트 크기에 따라 상대적으로 결정됩니다. 다시 말해 아래처럼 CSS에서 <html>에 16px의 폰트 크기를 지정했다면,
광고
html { font-size: 16px; }
이 경우 1rem = 16px가 됩니다.
예시
기본 REM → PX 변환
기본 루트 폰트 크기 16px를 기준으로 1.5rem을 픽셀로 변환해 봅니다.
| REM 값 | 루트 폰트 크기 | 계산식 | 결과 |
|---|---|---|---|
| 1.5rem | 16px | 1.5 × 16 | 24px |
여러 REM 값 한 번에 변환하기
루트 폰트 크기 16px를 기준으로 0.75rem, 2rem, 3.5rem을 픽셀로 변환해 봅니다.
| REM 값 | 루트 폰트 크기 | 계산식 | 결과 |
|---|---|---|---|
| 0.75rem | 16px | 0.75 × 16 | 12px |
| 2rem | 16px | 2 × 16 | 32px |
| 3.5rem | 16px | 3.5 × 16 | 56px |
루트 폰트 크기를 직접 지정한 경우
루트 폰트 크기를 20px로 설정한 상태에서 2.5rem을 픽셀로 변환해 봅니다.
| REM 값 | 루트 폰트 크기 | 계산식 | 결과 |
|---|---|---|---|
| 2.5rem | 20px | 2.5 × 20 | 50px |
자주 쓰는 REM → PX 변환표
광고
아래는 자주 사용하는 REM 값을 픽셀로 변환한 참고표입니다(기본 루트 폰트 크기 16px 기준).
| REM 값 | 픽셀 값 |
|---|---|
| 0.25 rem | 4 px |
| 0.5 rem | 8 px |
| 0.75 rem | 12 px |
| 0.875 rem | 14 px |
| 1 rem | 16 px |
| 1.125 rem | 18 px |
| 1.25 rem | 20 px |
| 1.5 rem | 24 px |
| 1.875 rem | 30 px |
| 2 rem | 32 px |
| 2.25 rem | 36 px |
| 2.5 rem | 40 px |
| 3 rem | 48 px |
| 4 rem | 64 px |
| 5 rem | 80 px |
관련 계산기
웹 개발과 디자인에 도움이 되는 다른 도구들도 함께 살펴보세요.
