CSS 단위 변환기
px, rem, em, vw, vh, pt, cm 등 16가지 CSS 단위를 한 번에 변환하고, CSS 일괄 px→rem 변환과 clamp() 유동 타이포 식까지 만들어 줍니다.
기준 설정
뷰포트 프리셋
24px, 1.5rem처럼 단위까지 입력해도 됩니다. ↑/↓ ±1, Shift ±10, Alt ±0.1
글꼴 기준
24px
픽셀
1.5rem
루트 폰트 기준
1.5em
부모 폰트 기준
150%
부모 폰트 기준(font-size)
≈ 3ch
'0' 글자 너비 (근사)
≈ 3ex
x-height (근사)
ch·ex는 글꼴마다 달라 정확히 계산할 수 없어, CSS 명세의 대체값(0.5em)으로 근사했습니다. %는 font-size 기준입니다.
뷰포트 기준
1.6667vw
뷰포트 너비 1%
2.6667vh
뷰포트 높이 1%
2.6667vmin
너비·높이 중 작은 쪽 1%
1.6667vmax
너비·높이 중 큰 쪽 1%
절대(물리) 단위
18pt
포인트 (1/72in)
1.5pc
파이카 (12pt)
0.25in
인치 (96px)
0.635cm
센티미터
6.35mm
밀리미터
25.4Q
1/4 밀리미터
CSS의 1in는 항상 96px로 고정됩니다. 화면에서 자로 잰 실제 길이와는 다를 수 있고, 인쇄 시에만 실제 크기와 일치합니다.
자주 쓰는 변환 공식
웹 개발에서 자주 사용하는 단위 변환 참고표입니다.
| 변환 | 공식 | 예시 |
|---|---|---|
| px → rem | px ÷ 루트 폰트 크기 | 24px ÷ 16 = 1.5rem |
| rem → px | rem × 루트 폰트 크기 | 1.5rem × 16 = 24px |
| px → em | px ÷ 부모 폰트 크기 | 16px ÷ 16 = 1em |
| px → vw | px ÷ 뷰포트 너비 × 100 | 144px ÷ 1440 × 100 = 10vw |
| px → pt | px × 0.75 (= 72/96) | 16px × 0.75 = 12pt |
| pc → px | pc × 16 (1pc = 12pt) | 1pc = 16px |
| in → px | in × 96 | 1in = 96px |
| cm → px | cm × 96 ÷ 2.54 | 1cm ≈ 37.7953px |
| mm → px | mm × 96 ÷ 25.4 | 1mm ≈ 3.7795px |
| Q → px | Q × 96 ÷ 101.6 (1Q = 0.25mm) | 4Q = 1mm |
| clamp() | 최소rem, 절편rem + 기울기vw, 최대rem | clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem) |
CSS 단위 완벽 가이드
절대 단위
- px (픽셀): CSS 픽셀은 화면 물리 픽셀과 다른 '참조 픽셀'입니다. 레티나 화면에서는 1px가 2~3개의 물리 픽셀로 그려집니다.
- in / pt / pc: 1in = 96px = 72pt = 6pc. 즉 1pt = 4/3px(약 1.333px), 1pc = 16px로 고정입니다.
- cm / mm / Q: 1in = 2.54cm 기준이라 1cm ≈ 37.795px, 1mm ≈ 3.78px, 1Q = 0.25mm입니다. 주로 인쇄용 CSS(@media print)에서 씁니다.
상대 단위 (글꼴 기준)
- rem: 루트(<html>) 요소의 폰트 크기 기준. 브라우저 기본값은 보통 16px. 사용자가 글꼴 크기를 키우면 함께 커져 접근성에 유리합니다.
- em: 그 요소의 폰트 크기 기준(font-size 속성에서는 부모 폰트 크기 기준). 중첩되면 곱해지므로 주의하세요.
- % (퍼센트): 속성마다 기준이 다릅니다. font-size는 부모 폰트 크기, width는 부모(컨테이닝 블록) 너비 기준입니다. 이 도구의 %는 font-size 기준입니다.
- ch / ex: 글꼴의 '0' 너비와 x-height 기준. 글꼴마다 달라 이 도구는 명세 대체값(0.5em)으로 근사합니다. 본문 폭 제한(max-width: 65ch)에 자주 씁니다.
뷰포트 단위
- vw / vh: 뷰포트 너비·높이의 1%. 100vw는 세로 스크롤바 폭까지 포함하므로 가로 스크롤이 생길 수 있습니다.
- vmin / vmax: 너비와 높이 중 작은 쪽·큰 쪽의 1%. 가로·세로 회전에 상관없이 비율을 유지할 때 유용합니다.
- svh / lvh / dvh: 모바일 주소창 때문에 100vh가 화면보다 커지는 문제를 해결하는 단위. 풀스크린 섹션에는 100dvh(또는 100svh)를 권장합니다.
- 글자 크기를 vw만으로 지정하면 사용자의 확대·글꼴 설정이 무시됩니다. clamp(최소rem, rem + vw, 최대rem)처럼 rem을 섞어 쓰세요.
단위 선택 가이드
- 폰트 크기: rem 권장 — 사용자 브라우저 설정을 존중하고 접근성이 좋습니다.
- 반응형 글자 크기: clamp() 생성기로 최소·최대 크기를 정해 두면 미디어 쿼리 없이 부드럽게 커집니다.
- 디자인 시안(px) 옮기기: CSS 일괄 변환 탭에 붙여 넣고 1px 유지 옵션을 켜 두세요.
- 컴포넌트 내부 간격: em — 컴포넌트 폰트 크기에 비례해 함께 커집니다.
- 미디어 쿼리 기준점: px 또는 em — em은 사용자 글꼴 설정에 반응하지만 html 폰트 크기와는 무관합니다.
- 인쇄용 CSS: pt, cm, mm — 인쇄 시 물리적 크기가 보장됩니다.
CSS 단위 변환기란?
CSS 단위 변환기는 px, rem, em, vw, vh, %, pt, cm, mm, in, Q, vmin, vmax 등 16가지 CSS 단위를 즉시 상호 변환해주는 웹 개발 도구입니다. 반응형 웹 디자인을 구현할 때 픽셀 단위의 디자인 시안을 rem이나 vw 기반의 유연한 레이아웃으로 변환하거나, 루트 폰트 크기와 뷰포트 크기를 기준값으로 설정하여 정확한 변환 결과를 얻을 수 있습니다. CSS 코드를 붙여 넣어 px를 rem으로 한 번에 바꾸고, 최소·최대 크기로 clamp() 유동 폰트 공식을 만들 수도 있습니다.
CSS 단위 변환기 활용 팁
- 디자인 시안 변환: Figma 등 디자인 툴에서 px 값으로 작업된 간격, 폰트 크기를 rem으로 변환하여 접근성 친화적인 코드를 작성하세요.
- 루트 폰트 크기 설정: 프로젝트의 html 요소 기본 폰트 크기(기본 16px)에 맞게 루트 폰트 크기를 조정하면 정확한 rem 변환 결과를 확인할 수 있습니다.
- rem vs em 선택: 전역 여백과 폰트 크기에는 rem을, 컴포넌트 내부 요소 간격처럼 부모 크기에 따라 변해야 하는 값에는 em을 사용하는 것이 일반적입니다.
- 뷰포트 단위 활용: 히어로 섹션 높이(100vh), 전체 너비 레이아웃(100vw) 등 화면 크기에 비례하는 레이아웃을 만들 때 vw·vh 변환이 유용합니다.