웹 개발
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)에 씁니다.