REM

가장 가까운 Tailwind

4px

0.25rem

p-1

8px

0.5rem

p-2

10px

0.625rem

12px

0.75rem

p-3

14px

0.875rem

16px

1rem

p-4

18px

1.125rem

20px

1.25rem

p-5

24px

1.5rem

p-6

32px

2rem

p-8

40px

2.5rem

p-10

48px

3rem

p-12

64px

4rem

p-16

80px

5rem

p-20

96px

6rem

p-24

사용방법

"기본 크기(Base size)" 항목에 프로젝트의 html font-size를 설정하세요. 보통 16px이 기본값입니다.
디자인에 맞춰 PX 입력란에 24와 같은 값을 입력합니다.
REM 입력란에 즉시 1.5rem이 나타납니다. 반대로 REM 입력란에 2rem을 입력하면 32px이 계산됩니다.
아래에 있는 참조표를 통해 일반적인 폰트 크기, 간격, Tailwind 참조 토큰을 한눈에 확인할 수 있습니다.

핵심 기능

즉각적인 양방향 변환: PX 또는 REM 값을 입력하면 별도의 계산 버튼을 클릭할 필요 없이 즉시 상대값이 표시됩니다.
기본 폰트 크기 변경: 16px로 시작하거나 프로젝트 고유의 10px, 14px 루트 폰트 사이즈로 손쉽게 설정할 수 있습니다.
실시간 참조표 제공: 기본 크기에 따라 12px, 16px, 24px, 32px 등 디자인에 자주 쓰이는 크기의 변환 값이 자동으로 업데이트됩니다.
Tailwind 여백(Spacing) 참고: 입력한 픽셀 값에 해당하는 가장 가까운 Tailwind spacing 토큰을 확인할 수 있습니다.
네트워크 불필요: 모든 변환 계산은 브라우저 메모리 내에서 실행되어 매우 빠르며 오프라인에서도 작동합니다.

계산 논리

PX에서 REM 변환 공식: REM = PX / Base Size.
REM에서 PX 변환 공식: PX = REM × Base Size.
브라우저 기본 루트 크기(16px) 설정 시, 16px = 1rem, 24px = 1.5rem이 됩니다.

FAQ

1rem은 몇 픽셀(px)인가요?

대부분의 브라우저에서는 1rem이 기본적으로 16px과 같습니다. 프로젝트 설정에서 html { font-size }를 수정한 경우, 해당 루트 폰트 크기를 도구의 기본 크기로 지정하세요.

PX와 REM의 차이점은 무엇인가요?

PX는 고정된 절대 픽셀 단위입니다. REM은 최상위(Root) 요소의 폰트 크기에 상대적이므로, 사용자가 브라우저 설정에서 변경한 폰트 크기를 유연하게 반영하여 접근성 높은 레이아웃을 만들 수 있습니다.

왜 10px을 기본 크기로 사용하는 프로젝트가 있나요?

일부 팀은 CSS에 html { font-size: 62.5%; }를 선언하여 1rem을 10px로 맞춥니다. 이렇게 하면 1.4rem이 14px이 되므로 머릿속으로 계산하기 쉽지만, 이 방식을 적용하기 전에 웹 접근성에 미칠 영향을 먼저 고려해야 합니다.

EM 변환도 지원하나요?

아닙니다. 이 도구는 기준이 고정된 PX와 REM 변환에 집중합니다. EM 단위는 상위 요소가 아닌 현재 요소의 폰트 크기에 의존하므로 REM과 동일한 방식으로 계산할 수 없습니다.

CSS나 디자인 데이터가 서버에 저장되나요?

아닙니다. 변환은 어떠한 파일 업로드나 서버 호출 없이 사용자의 기기에서 로컬로 진행됩니다.

PX을 REM으로 변환 | CSS 계산기 및 참조표

PX / REM 변환기

참조표 (Cheat Sheet)