📐 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 차이와 쓰는 법에 정리했어요.
자주 묻는 질문
px를 rem으로 바꾸는 공식은?
px ÷ 루트 font-size예요. 기본값 16px이면 24px ÷ 16 = 1.5rem입니다.
1rem은 몇 px인가요?
html 요소의 font-size와 같아요. 따로 정하지 않았다면 대부분 브라우저 기본값인 16px이고, 사용자가 브라우저 글자 크기를 바꾸면 달라집니다.
rem과 em의 차이는?
rem은 루트(html) 글자 크기 기준이라 어디서든 같은 값이고, em은 그 요소(또는 부모)의 글자 크기 기준이라 중첩될수록 곱해져요.
62.5% 트릭은 무엇인가요?
html font-size를 62.5%로 두면 16px × 0.625 = 10px이 돼서 1.6rem = 16px처럼 계산이 쉬워져요. 대신 본문 글자 크기를 다시 지정해야 하고, 서드파티 컴포넌트의 rem 크기가 작아지는 부작용이 있어요.
clamp()의 vw 값은 어떻게 정하나요?
최소·최대 글자 크기와 그 크기가 적용될 화면 너비 두 점을 잇는 직선의 기울기로 정해요. 이 도구에 값을 두 개 이상 넣으면 식을 만들어 줍니다.