📐 px ↔ rem 변환기
px를 rem으로, rem을 px로 바꾸고 CSS 한 줄로 복사하세요. 디자인 시안의 px 값을 여러 개 한꺼번에 넣어도 돼요.
사용법
- 방향(px → rem 또는 rem → px)을 고르고 값을 넣어요.
14 16 24처럼 여러 개를 한 번에 넣을 수 있어요. - 루트 font-size는 보통 브라우저 기본값 16px이에요.
html { font-size: 62.5% }를 쓰는 프로젝트라면 10px로 바꾸세요. - 값을 두 개 이상 넣으면 가장 작은 값에서 큰 값으로 화면 너비에 따라 커지는
clamp()식도 만들어 줘요.
계산 공식
| 변환 | 공식 |
|---|---|
| px → rem | px ÷ 루트 font-size |
| rem → px | rem × 루트 font-size |
| px → em | px ÷ 부모(자기) 요소 font-size |
| px → pt | px × 0.75 (1pt = 1/72인치, 1px = 1/96인치) |
| clamp 기울기 | (최대 px − 최소 px) ÷ (최대 화면 − 최소 화면) × 100 = vw 계수 |
예시: 루트 16px에서 24px은 24 ÷ 16 = 1.5rem, 14px은 0.875rem이에요. 62.5% 트릭(10px)이면 24px = 2.4rem입니다. 360px 화면에서 16px, 1280px 화면에서 24px로 커지게 하려면 clamp(1rem, 0.8043rem + 0.8696vw, 1.5rem)가 돼요.
16px 기준 px ↔ rem 변환표
| px | rem | px | rem |
|---|---|---|---|
| 10px | 0.625rem | 20px | 1.25rem |
| 12px | 0.75rem | 24px | 1.5rem |
| 13px | 0.8125rem | 28px | 1.75rem |
| 14px | 0.875rem | 32px | 2rem |
| 15px | 0.9375rem | 40px | 2.5rem |
| 16px | 1rem | 48px | 3rem |
| 18px | 1.125rem | 64px | 4rem |
- rem은 루트(html) 글자 크기 기준이라 어디서 써도 값이 같아요. 사용자가 브라우저 기본 글자 크기를 키우면 rem으로 만든 글자도 같이 커져 접근성에 유리해요.
- em은 부모 기준이라 중첩되면 곱해져요. 0.8em 안에 0.8em이 들어가면 0.64배가 됩니다. 버튼 안 아이콘·여백처럼 글자 크기에 맞춰 커져야 하는 곳에 좋아요.
- 자세한 비교는 px vs rem vs em 차이와 쓰는 법에 정리했어요.
예시 계산 3가지
| 입력 | 설정 | 결과 |
|---|---|---|
① 기본값 14 16 18 24 32 (px → rem) | 루트 16px, 360~1280px 화면 | 0.875 · 1 · 1.125 · 1.5 · 2rem, 그리고 clamp(0.875rem, 0.4348rem + 1.9565vw, 2rem) |
| ② 같은 값, 62.5% 트릭 | 루트 10px | 1.4 · 1.6 · 1.8 · 2.4 · 3.2rem (em·pt는 루트와 무관해 그대로: 14px = 0.875em = 10.5pt) |
③ 20px, 부모 글자 14px 안 | 루트 16px, 부모 14px | 1.25rem, 하지만 em으로는 1.4286em — em은 부모 기준이라 숫자가 달라요 |
①의 clamp 식은 360px 화면에서 14px, 768px 태블릿에서 약 21.98px, 1024px에서 약 26.99px, 1280px 이상에서 32px이 돼요. 기울기는 (32 − 14) ÷ (1280 − 360) × 100 = 1.9565vw, 절편은 14 − 0.019565 × 360 = 6.96px(0.4348rem)이에요. rem → px로 바꿔 0.875 1.5 2.25를 넣으면 14 · 24 · 36px이 나와요.
브라우저 글자 크기 설정에 따른 차이
사용자가 브라우저 설정에서 기본 글꼴 크기를 바꾸면 rem·em 값은 따라 커지지만 px은 그대로예요. 크롬 설정 '글꼴 크기'의 단계를 기준으로 계산하면 아래와 같아요.
| 브라우저 기본 글꼴 | 1.5rem | 24px | 62.5% 트릭의 2.4rem |
|---|---|---|---|
| 작게 12px | 18px | 24px | 18px |
| 중간 16px (기본) | 24px | 24px | 24px |
| 크게 20px | 30px | 24px | 30px |
| 매우 크게 24px | 36px | 24px | 36px |
62.5%는 퍼센트라 사용자 설정을 그대로 따라가요. 반대로 html { font-size: 10px }처럼 px로 고정하면 사용자 설정을 무시하게 돼서 접근성이 떨어져요. 화면 확대 200%까지 글이 잘리지 않아야 한다는 기준은 WCAG 2.2 성공 기준 1.4.4 텍스트 크기 조정에, 단위 정의는 MDN CSS length에 있어요.
어디에 어떤 단위를 쓸까
| 속성 | 추천 단위 | 이유 |
|---|---|---|
| 본문·제목 font-size | rem (반응형은 clamp) | 사용자 글자 설정을 따라가요 |
| 버튼 안 padding·아이콘 크기 | em | 버튼 글자 크기를 바꾸면 여백도 비율대로 따라와요 |
| 테두리 border, 그림자 | px | 1px 선은 글자가 커져도 1px이 자연스러워요 |
| 미디어 쿼리 너비 | em 또는 px | em으로 쓰면 글자 확대 시 레이아웃도 함께 바뀌어요 (48em = 768px) |
| line-height | 단위 없는 숫자 (1.5) | 자식 요소 글자 크기에 맞춰 다시 계산돼요 |
흔한 실수
- em을 중첩해서 쓰기 — 목록 안 목록에
font-size: 0.875em을 주면 0.875 × 0.875 = 0.766배로 점점 작아져요. 글자 크기는 rem, 여백만 em이 안전해요. - vw만으로 글자 크기 정하기 —
font-size: 2vw는 확대해도 커지지 않아 WCAG 1.4.4를 어길 수 있어요. clamp 가운데 값에 rem을 섞으면(이 도구가 만드는 식) 확대가 반영돼요. - 소수점 자릿수 줄이기 — 13px = 0.8125rem을 0.81rem으로 줄이면 12.96px이 돼요. 이 도구는 소수 넷째 자리까지 그대로 보여 줘요.
- pt를 화면 단위로 쓰기 — 디자인 툴의 pt와 CSS pt는 달라요. CSS에서 1pt = 1.333px(96 ÷ 72)라, 웹은 px·rem으로 맞추세요.