기준값 설정
16.00
16.00px
1.0000
1.0000rem
1.0000
1.0000em
12.00
12.00pt
0.8333
0.8333vw
1.4815
1.4815vh
• rem/em: root font-size 기준 (기본 16px)
• vw/vh: viewport 너비/높이의 1%
• pt: 인쇄용 포인트 (1pt = 1/72 inch)
📏 CSS 단위 변환기란?
CSS 단위 변환기는 px, rem, em, pt, vw, vh 등 웹 개발에서 사용하는 단위를 상호 변환하는 도구입니다. root font-size(기본 16px)와 viewport 크기를 기준으로 정확한 변환값을 계산합니다. 반응형 웹 디자인, 접근성 높은 폰트 크기 설정, 모바일/데스크톱 레이아웃 작업에 필수적입니다. 변환된 CSS 값을 원클릭으로 복사하여 바로 코드에 붙여넣을 수 있습니다.
📊 CSS 단위 비교표
| 단위 | 기준 | 특징 |
|---|---|---|
| px | 고정 픽셀 | 절대 단위, 브라우저 확대에만 반응 |
| rem | root font-size | html 기준, 일관된 크기 조절 가능 |
| em | 부모 font-size | 중첩 시 복잡, 상대적 크기 조절 |
| vw | viewport 너비 | 화면 너비 기준 반응형 |
| vh | viewport 높이 | 화면 높이 기준 반응형 |
| pt | 1/72 inch | 인쇄 매체용, 웹에서는 비권장 |
💡 CSS 단위 활용 팁
- 폰트 크기: rem 사용 권장 (접근성, 사용자 설정 존중)
- 레이아웃: vw/vh로 반응형 설계, 모바일 주소창 문제는 dvh 사용
- 여백/패딩: rem 또는 px (일관성 유지)
- 미디어쿼리: em 권장 (브라우저 확대에 더 잘 대응)
자주 묻는 질문
rem과 em의 차이점은 무엇인가요?▼
rem은 html(root) 요소의 font-size를 기준으로 하고, em은 해당 요소의 부모 font-size를 기준으로 합니다. rem은 일관된 크기를 유지하기 쉽고, em은 중첩 시 누적되어 예측이 어려울 수 있습니다.
vw/vh 단위의 모바일 문제는 무엇인가요?▼
모바일 브라우저에서 주소창이 나타나거나 사라질 때 vh 값이 변경되어 레이아웃이 튀는 현상이 있습니다. CSS의 dvh(dynamic viewport height)나 svh(small viewport height)를 사용하면 해결됩니다.
왜 16px이 기본값인가요?▼
대부분의 브라우저가 기본 font-size를 16px로 설정합니다. 따라서 1rem = 16px이 되고, 이를 기준으로 62.5% 트릭(10px 기준)을 사용하는 경우도 있습니다.