PX를 REM으로 변환기
CSS 길이를 px, rem, em, pt 등의 단위 사이에서 변환합니다. rem과 em은 기준 글꼴 크기에 따라 달라지므로, 변환에 사용할 기준 값을 입력하세요.
CSS 단위의 변환 방식
CSS의 절대 단위(px, pt, pc, in, cm, mm, Q)는 W3C 사양 CSS Values and Units에서 다음과 같이 정의됩니다.
| 단위 | 정의 | px 환산 |
|---|---|---|
| in (인치) | 1in = 2.54cm = 96px | 96 px |
| px (픽셀) | 1px = 1/96 in | 1 px |
| pt (포인트) | 1pt = 1/72 in | 4/3 px(약 1.3333 px) |
| pc (파이카) | 1pc = 1/6 in (12pt) | 16 px |
| cm (센티미터) | 1in = 2.54cm | 약 37.7953 px |
| mm (밀리미터) | 1cm = 10mm | 약 3.77953 px |
| Q (쿼터 밀리미터) | 1Q = 1/40 cm | 약 0.944882 px |
계산은 정확한 분수로 합니다. 나누어떨어지지 않는 값(px로 환산한 cm, mm, Q 등)에는 "반올림한 값"이라고 표시합니다.
rem과 em은 기준 글꼴 크기에 따라 달라집니다
- rem은 루트 요소(
html)의 font-size를 기준으로 합니다. 기준이 16px이면 1rem = 16px입니다.html { font-size: 62.5% }로 설정하면(브라우저 기본값이 16px일 때) 기준이 10px가 되어 1.6rem = 16px가 됩니다. - em은 사용된 요소 자신의 font-size를 기준으로 합니다. 예외는
font-size속성 자체로,font-size에 em을 쓰면 부모 요소에서 상속받은 font-size를 기준으로 합니다(W3C 사양의 설명입니다).padding이나margin같은 속성에서 em은 그 요소 자신의 font-size를 기준으로 합니다. - 중첩된 em 값(예: 1.2em 안의 1.2em은 곱해져 1.44가 됨)은 여기서 계산하지 않습니다. 기준 값으로 계산된(실제) 글꼴 크기를 입력하세요.
초깃값 16px는 편의상의 기본값일 뿐입니다. 이 도구는 **입력한 기준 값(px)**으로 변환하며, 기준이 다르면 rem이나 em 결과도 달라집니다.
CSS 픽셀은 화면의 픽셀이 아닙니다
CSS px는 화면의 물리적 픽셀(장치 픽셀)이 아닙니다. 1인치의 1/96로 정의된 기준 픽셀입니다. 고밀도 화면에서는 CSS 픽셀 하나가 여러 개의 장치 픽셀(예: 2 × 2)로 표시될 수 있습니다.
예시
- 16px = 1rem = 1em = 12pt(기준 16px일 때)
- 24px = 2.4rem(기준 10px일 때)
- 1.6rem = 16px(기준 10px일 때)
- 1in = 96px = 72pt = 6pc = 2.54cm
- 10mm ≈ 37.79528px
- 0.75pt = 1px
참고 사항
- 화면 크기, 부모 요소의 크기, 글꼴의 모양에 따라 달라지는 단위(vw, vh, %, ch, ex 등)는 숫자만으로 변환할 수 없으므로 포함하지 않았습니다.
- 값은 소수점 앞 최대 12자리, 소수점 이하 6자리까지 입력할 수 있으며 음수도 가능합니다(CSS에는
margin: -10px처럼 음수 길이가 있습니다). 기준 값은 0보다 커야 합니다. 1,234.5처럼 천 단위 구분 기호를 쓸 수 있으며, 소수점은 마침표를 사용하세요. - 결과는 유효숫자 7자리로 표시됩니다. 표시된 값 그대로 복사하거나 유효숫자 15자리로 복사할 수 있습니다.
출처
- W3C, CSS Values and Units Module Level 3: 절대 길이 단위와 em, rem의 정의(2026년 10월 31일 확인, 해당 페이지는 2024년 3월 22일자 Candidate Recommendation Draft였습니다). rem은 루트 요소의 글꼴 크기, em은 해당 요소의 계산된 font-size(
font-size속성에서 쓰면 부모 요소의 값)로 정의되어 있습니다.
자주 묻는 질문
1rem은 몇 px인가요?
루트 요소(html)의 font-size에 따라 달라집니다. 기준이 16px이면 16px이지만, html의 font-size가 바뀌면 1rem의 크기도 바뀝니다. 기준 값을 입력하여 변환하세요.
px와 pt 중 무엇을 써야 하나요?
화면용으로는 px와 rem이 일반적입니다. pt는 인쇄용 CSS에서 더 자주 쓰입니다. 1pt = 4/3 px이므로 12pt는 16px입니다.
em과 rem은 무엇이 다른가요?
rem은 루트 요소의 font-size를 기준으로 하므로 어디서 쓰든 같은 크기입니다. em은 사용한 위치의 font-size를 기준으로 하므로 중첩된 요소에서는 크기가 달라질 수 있습니다.