웹 개발
CSS 단위 변환기
px, rem, em, vw, vh, pt 단위를 즉시 변환합니다. 기준 폰트 크기와 뷰포트 크기를 설정해 정확한 값을 확인하세요.
설정
px
×px
루트 폰트 기준 상대 단위
1rem
부모 폰트 기준 상대 단위
1em
뷰포트 너비의 1%
1.1111vw
뷰포트 높이의 1%
1.7778vh
포인트 — 인쇄 단위
12pt
주요 크기 참고표
기준 폰트 16px · 뷰포트 너비 1440px 기준 — 행 클릭 시 즉시 변환
| px | rem / em | pt | vw |
|---|---|---|---|
| 1px | 0.0625 | 0.75 | 0.0694% |
| 2px | 0.125 | 1.5 | 0.1389% |
| 4px | 0.25 | 3 | 0.2778% |
| 6px | 0.375 | 4.5 | 0.4167% |
| 8px | 0.5 | 6 | 0.5556% |
| 10px | 0.625 | 7.5 | 0.6944% |
| 12px | 0.75 | 9 | 0.8333% |
| 14px | 0.875 | 10.5 | 0.9722% |
| 16px기준 | 1 | 12 | 1.1111% |
| 18px | 1.125 | 13.5 | 1.25% |
| 20px | 1.25 | 15 | 1.3889% |
| 24px | 1.5 | 18 | 1.6667% |
| 28px | 1.75 | 21 | 1.9444% |
| 32px | 2 | 24 | 2.2222% |
| 40px | 2.5 | 30 | 2.7778% |
| 48px | 3 | 36 | 3.3333% |
| 56px | 3.5 | 42 | 3.8889% |
| 64px | 4 | 48 | 4.4444% |
| 80px | 5 | 60 | 5.5556% |
| 96px | 6 | 72 | 6.6667% |
| 128px | 8 | 96 | 8.8889% |
사용 방법
- 변환할 숫자를 입력하고 단위 버튼(px / rem / em 등)을 선택합니다.
- 나머지 모든 단위 값이 자동으로 계산됩니다.
- 결과 카드의 복사 버튼으로 CSS 값을 클립보드에 저장합니다.
- 기준 폰트 크기(기본 16px)와 뷰포트 크기를 조정해 실제 환경에 맞는 값을 확인하세요.
- 참고표의 행을 클릭하면 해당 px 값을 즉시 변환할 수 있습니다.
CSS 단위 설명
- px (픽셀)
- 화면의 물리적 픽셀 단위. 고정된 절대 크기로 반응형 디자인에는 적합하지 않습니다.
- rem (Root EM)
- 루트 요소(<html>)의 폰트 크기 기준 상대 단위. 브라우저 기본값은 16px = 1rem. 반응형 레이아웃에 적합합니다.
- em
- 부모 요소의 폰트 크기 기준 상대 단위. 컴포넌트 내부 간격을 비례적으로 설정할 때 유용합니다.
- vw (Viewport Width)
- 뷰포트 너비의 1%. 화면 너비에 완전히 비례하는 반응형 크기에 사용합니다.
- vh (Viewport Height)
- 뷰포트 높이의 1%. 전체 화면 섹션이나 모달 높이 설정에 많이 사용합니다.
- pt (포인트)
- 인쇄 매체에서 사용하는 단위. 1pt ≈ 1.333px (96dpi 기준). CSS 인쇄 스타일시트(@media print)에 씁니다.
CSS 단위 변환기 자세히 알아보기
CSS에서 자주 쓰는 px, rem, em, vw, vh, pt 단위를 한꺼번에 환산해 주는 도구입니다. 디자인 시안에서 받은 픽셀 값을 반응형 레이아웃에 맞게 rem으로 바꾸거나, 인쇄 스타일시트에 쓸 pt 값을 구할 때 매번 계산기를 두드릴 필요 없이 한 번에 결과를 확인할 수 있습니다.
더 알아보기접기
기준 폰트 크기(루트 font-size)와 뷰포트 너비·높이를 직접 조정할 수 있어 실제 프로젝트 환경에 맞춘 정확한 변환이 가능합니다. rem과 em 사이 차이, vw·vh 같은 뷰포트 단위가 어떻게 계산되는지 한눈에 비교할 수 있어 학습용으로도 유용합니다.
이럴 때 사용하세요
- •Figma·Sketch 시안의 픽셀 값을 rem으로 변환해 반응형 CSS를 작성할 때
- •1440px 데스크톱·1920px FHD 등 다른 뷰포트 기준에서 vw 값이 어떻게 변하는지 비교할 때
- •@media print 인쇄 스타일시트에 pt 단위 값을 적용해야 할 때
- •디자인 시스템에서 토큰화된 16·24·32px 간격을 rem 기반 스케일로 통일할 때
CSS 단위 변환기 자주 묻는 질문
rem과 em은 어떻게 다른가요?
rem은 항상 루트 요소(<html>)의 font-size를 기준으로 계산되고, em은 부모 요소의 font-size를 따라갑니다. 컴포넌트 단위 비례 조정이 필요하면 em, 전체 일관성이 중요하면 rem을 권장합니다.
기준 폰트 크기를 왜 16px이 아니라 다른 값으로 설정해야 하나요?
프로젝트에서 html { font-size: 62.5% }로 1rem = 10px 규칙을 쓰는 경우가 있습니다. 그 환경에서는 기준 폰트를 10px로 바꿔야 시안과 일치합니다.
1pt = 1.333px인 이유는?
CSS pt는 96dpi 기준 1/72인치이므로 96 / 72 ≈ 1.333px입니다. 인쇄 매체용 단위라 화면에서는 거의 쓰지 않습니다.
vw로 폰트 크기를 지정해도 괜찮나요?
초대형 헤딩 등 시각적 요소에는 좋지만, 본문 폰트에는 권장하지 않습니다. 너무 작은 화면에서 가독성이 떨어지고, 사용자의 브라우저 글자 크기 설정을 무시하기 때문입니다.
변환 결과의 소수점이 너무 길어요. 자동으로 짧게 만들 수 있나요?
rem·em은 4자리, px·pt는 2자리에서 자동으로 반올림됩니다. CSS에 그대로 붙여넣어도 되며, 0.0001rem 같은 값은 시각적으로 무시해도 무방합니다.