PX ↔ REM & EM 변환기
원하는 루트 글꼴 크기로 px를 rem·em으로 변환하고, 부모 크기를 따로 지정해 부모가 루트일 때만 em이 rem과 같아지는 걸 확인하세요.
rem은 기준(루트) 크기, em은 부모 요소의 글꼴 크기를 기준으로 계산합니다.
16px1rem1em100%
| px | rem | em |
|---|---|---|
| 1 | 0.0625 | 0.0625 |
| 2 | 0.125 | 0.125 |
| 4 | 0.25 | 0.25 |
| 6 | 0.375 | 0.375 |
| 8 | 0.5 | 0.5 |
| 10 | 0.625 | 0.625 |
| 12 | 0.75 | 0.75 |
| 14 | 0.875 | 0.875 |
| 16 | 1 | 1 |
| 18 | 1.125 | 1.125 |
| 20 | 1.25 | 1.25 |
| 24 | 1.5 | 1.5 |
| 28 | 1.75 | 1.75 |
| 32 | 2 | 2 |
| 36 | 2.25 | 2.25 |
| 40 | 2.5 | 2.5 |
| 48 | 3 | 3 |
| 56 | 3.5 | 3.5 |
| 64 | 4 | 4 |
| 72 | 4.5 | 4.5 |
| 80 | 5 | 5 |
| 96 | 6 | 6 |
| 128 | 8 | 8 |
이 px ↔ rem 변환기가 하는 일
픽셀 또는 rem 값을 입력하고 기준(루트) 글꼴 크기를 지정하면 px, rem, em, %로 환산한 값을 즉시 보여 줍니다. 입력란은 서로 연결되어 있어 픽셀 값을 입력하면 rem을, rem 값을 입력하면 픽셀을, em 값을 입력하면 픽셀과 rem을 함께 확인할 수 있습니다. 기준 글꼴 크기는 브라우저 기본값인 16px로 설정되어 있지만, 프로젝트의 루트 스타일에 맞게 변경할 수 있습니다. 각 결과는 한 번의 클릭으로 복사해 CSS에 바로 붙여넣을 수 있습니다. ‘Tailwind CSS 클래스도 보기’를 체크하면 같은 길이의 Tailwind 간격 클래스(기본 눈금에 있으면 p-6, 없으면 p-[1.3rem] 같은 임의 값)와 글자 크기 클래스가 결과에 더해지고, 각각 복사 버튼이 붙습니다.
변환 원리
계산은 간단하고 손실이 없습니다: rem = px / base이며 px = rem × base입니다. 표준 16px 기준에서 24px는 1.5rem, 1rem은 16px입니다. em은 따로 입력하는 부모 글꼴 크기를 기준으로 측정하므로, 부모가 루트와 같을 때만 rem 값과 일치합니다. 기준 16px에서 24px는 1.5rem이지만, 부모가 20px인 요소 안에서는 1.2em입니다. 결과는 결과의 소수 자릿수에서 고른 자리까지 반올림합니다 — 기본값은 긴 소수를 읽기 쉽게 줄이면서도 레이아웃 작업에 필요한 정확도는 유지하고, 전체 자릿수를 고르면 계산한 모든 자리를 그대로 보여 줍니다.
자주 묻는 질문
기준 글꼴 크기는 무엇으로 설정해야 하나요?
대부분의 브라우저는 기본 루트 글꼴 크기로 16px를 사용하므로 16이 안전한 시작값이며 이 도구의 기본값입니다. CSS에서 루트 크기를 다르게 설정했다면(예: html { font-size: 62.5% }로 1rem을 10px로 만든 경우) 해당 픽셀 값을 기준으로 입력하면 변환 결과가 프로젝트와 일치합니다.
여기서 rem과 em의 차이는 무엇인가요?
rem은 항상 루트 글꼴 크기를 기준으로 하고, em은 부모 요소의 글꼴 크기를 기준으로 합니다. 이 도구는 기준(루트) 크기와 부모 크기를 각각 입력받으므로, 부모가 루트와 다르면 rem과 em 수치도 달라집니다. 기준 16px에서 24px는 1.5rem이고, 부모가 20px이면 1.2em입니다. 부모 크기를 기준값과 같게 두면 두 값이 다시 일치합니다.
자주 쓰는 크기 표가 있고, em도 입력할 수 있나요?
네. 자주 쓰는 픽셀 크기를 현재 기준값의 rem과 현재 부모 크기의 em으로 나란히 보여 주는 표가 있고, em도 따로 입력 칸이 있어 거기서 시작할 수 있습니다.
변환한 크기를 눈으로 보거나 퍼센트로 받거나, 반올림 자릿수를 바꿀 수 있나요?
네. 결과 아래에 변환한 픽셀 크기 그대로 예시 글자를 그려 주므로 크기를 눈으로 가늠할 수 있고, 너무 커서 그릴 수 없는 크기에서는 글자 대신 안내 문구가 나옵니다. 결과에는 부모 크기에 대한 퍼센트 줄도 있어 em과 같은 크기의 font-size 퍼센트 값을 따로 복사할 수 있습니다. 결과의 소수 자릿수에서 결과와 자주 쓰는 크기 표를 어디까지 반올림할지 고르거나 전체 자릿수를 고를 수 있고, 입력 칸은 원래 자릿수를 그대로 유지합니다.
크기에 맞는 Tailwind 클래스도 알려 주나요?
네. ‘Tailwind CSS 클래스도 보기’를 체크하면 결과에 두 줄이 더해지고 각각 복사 버튼이 붙습니다. 하나는 Tailwind v4 기본 눈금으로 읽은 간격 클래스로, 눈금에 있으면 p-6 같은 단계, 없으면 p-[1.3rem] 같은 임의 값, 음수 길이면 -m-이 됩니다. 다른 하나는 글자 크기 클래스로, 크기가 정확히 맞으면 text-2xl 같은 이름 있는 클래스, 아니면 text-[…rem]입니다. p-는 간격 유틸리티(m-, gap-, w- 등) 전체를 대신합니다. 클래스는 rem 단위로 계산하므로 위에서 정한 기준 글꼴 크기를 따르고, 이 설정도 링크에 담깁니다.