PX를 REM으로 변환하는 방법
픽셀 값을 루트 폰트 크기로 나눕니다. 별도로 변경하지 않았다면 대부분의 브라우저는 16px을 기준으로 사용합니다.
rem = px ÷ 16px = rem × 16예를 들어 24px ÷ 16px = 1.5rem입니다. 반대로 1.5rem × 16px = 24px입니다.
PX to REM 변환표
기본 폰트 크기 16px을 기준으로 자주 사용하는 픽셀 값을 변환한 표입니다.
| PX | REM (16px) | CSS |
|---|---|---|
| 1px | 0.0625rem | font-size: 0.0625rem; |
| 2px | 0.125rem | font-size: 0.125rem; |
| 4px | 0.25rem | font-size: 0.25rem; |
| 8px | 0.5rem | font-size: 0.5rem; |
| 10px | 0.625rem | font-size: 0.625rem; |
| 12px | 0.75rem | font-size: 0.75rem; |
| 14px | 0.875rem | font-size: 0.875rem; |
| 16px | 1rem | font-size: 1rem; |
| 18px | 1.125rem | font-size: 1.125rem; |
| 20px | 1.25rem | font-size: 1.25rem; |
| 24px | 1.5rem | font-size: 1.5rem; |
| 32px | 2rem | font-size: 2rem; |
| 40px | 2.5rem | font-size: 2.5rem; |
| 48px | 3rem | font-size: 3rem; |
| 64px | 4rem | font-size: 4rem; |
| 80px | 5rem | font-size: 5rem; |
| 96px | 6rem | font-size: 6rem; |
Tailwind CSS 간격 참고표
Tailwind 기본 spacing scale에서 패딩, 마진, gap 유틸리티에 자주 대응하는 PX와 REM 값입니다.
| PX | REM | Tailwind |
|---|---|---|
| 4px | 0.25rem | p-1 / m-1 / gap-1 |
| 8px | 0.5rem | p-2 / m-2 / gap-2 |
| 12px | 0.75rem | p-3 / m-3 / gap-3 |
| 16px | 1rem | p-4 / m-4 / gap-4 |
| 20px | 1.25rem | p-5 / m-5 / gap-5 |
| 24px | 1.5rem | p-6 / m-6 / gap-6 |
| 32px | 2rem | p-8 / m-8 / gap-8 |
| 40px | 2.5rem | p-10 / m-10 / gap-10 |
| 48px | 3rem | p-12 / m-12 / gap-12 |
| 64px | 4rem | p-16 / m-16 / gap-16 |
| 96px | 6rem | p-24 / m-24 / gap-24 |
PX vs REM 차이점
PX는 고정된 절대 단위이고, REM은 최상위 요소(html)의 폰트 사이즈에 비례하는 상대 단위입니다.
PX·REM 자주 묻는 질문
16px은 몇 REM인가요?
기본 폰트 크기가 16px이면 16px은 1rem입니다.
PX를 REM으로 어떻게 계산하나요?
픽셀 값을 루트 폰트 크기로 나눕니다. 16px 기준에서 32px ÷ 16px = 2rem입니다.
CSS에서 REM과 PX 중 무엇을 써야 하나요?
확장 가능한 글꼴과 간격에는 REM이 유용하고, 얇은 테두리 같은 세밀한 표현에는 PX가 실용적입니다. 디자인 목적에 따라 선택하세요.
기본 폰트 크기가 16px이 아니면 어떻게 하나요?
계산기에 실제 루트 폰트 크기를 입력하세요. 10px 기준이면 20px은 2rem이고, 14px 기준이면 약 1.4286rem입니다.