CSS 단위 변환
px, rem, em & pt
구성 가능한 기본 폰트 크기로 CSS px, rem, em, pt 값을 변환합니다. 디자인 토큰, 타이포그래피, 반응형 레이아웃에 유용합니다.
이 변환은 브라우저에서만 실행됩니다. 서버로 업로드하지 않습니다.
px
- 루트 / 기준 글꼴 크기16px
- 단위px
실제 CSS에서 em은 부모 요소의 font-size를 따릅니다. 이 도구는 rem·em을 같은 루트/기준값으로 근사 변환합니다.
- px
- rem
- em
- pt
이 도구는 무엇인가요?
구성 가능한 루트 / 기준 글꼴 크기(기본 16px)로 CSS px·rem·em·pt를 서로 변환합니다. 디자인 토큰, 타이포 스케일, 반응형 spacing에 맞춥니다.
실제 CSS에서 rem은 루트, em은 현재(대개 부모) 요소의 font-size에 상대적입니다. 이 도구는 rem·em에 같은 기준을 쓰므로 em 결과는 근사값입니다. pt는 CSS 96dpi 규약(1pt = 96/72 px)을 따릅니다.
When to use
- 피그마·핸드오프 px를 rem spacing·타이포 스케일로 맞출 때
- root가 16px가 아닐 때
1.5rem/12pt가 몇 px인지 확인할 때 - 스타일 가이드용 px ↔ rem 토큰 표를 정리할 때
- 인쇄용 pt를 화면 CSS와 대조할 때
사용 방법
- 숫자와 출발 단위(px, rem, em, pt)를 선택합니다.
- 루트 / 기준 글꼴 크기를 px로 설정합니다(기본 16). 모든 행이 즉시 갱신됩니다.
- 행별 Copy 또는 전체 Copy로 값을 가져갑니다.
- CSS에서
em을 중첩하면 부모의 computed font-size를 별도로 확인하세요.
예시
| 입력 / 설정 | 출력 | 메모 |
|---|---|---|
16px, base 16 | 16.00px; 1.0000rem; 1.0000em; 12.00pt | 기본 브라우저 root |
24px, base 16 | 24.00px; 1.5000rem; 1.5000em; 18.00pt | 제목·spacing 토큰 |
1.5rem, base 16 | 24.00px; 1.5000rem; 1.5000em; 18.00pt | 상대 단위 → px |
12pt, base 16 | 16.00px; 1.0000rem; 1.0000em; 12.00pt | CSS 96dpi pt ↔ px |
실무에서 흔한 실수
- em은 부모 의존. 부모
1.25em안의1.2em은1.2 × root가 아니라 누적됩니다. 이 표의 em은 기준=요소 font-size라는 가정(근사)입니다. html { font-size: 62.5% }처럼 root를 바꾸면 base 필드를 실제 루트 px에 맞추세요.- 여기 pt는 96dpi CSS 절대 단위이며, 임의 DPI 인쇄점과 다릅니다.
참고자료
최종 검토: 2026-07-27
자주 묻는 질문
- 어떤 CSS 단위를 지원하나요?
- px, rem, em, pt입니다. %나 vw/vh는 범위 밖입니다.
- 루트 / 기준 글꼴 크기는 무엇인가요?
- 1rem(그리고 이 계산기에서는 1em)으로 쓰는 픽셀 값입니다. 기본은 브라우저 `html` 기본값과 맞는 16px이며, 디자인 시스템의 root가 다르면 그에 맞게 바꿉니다.
- 여기서 rem과 em이 같게 나오는데, 실제 CSS도 그런가요?
- 이 도구는 둘 다 같은 기준으로 근사합니다. 실제 CSS에서 rem은 루트 기준이고, em은 현재(대개 부모) 요소의 font-size에 곱해져 중첩되면 값이 누적됩니다.
- pt는 어떻게 환산되나요?
- CSS 96dpi 기준에서 1pt = 96/72 px(약 1.333px)입니다. 인쇄용 DPI 워크플로는 다를 수 있습니다.