CSS 단위 변환기
px, rem, em, vw 등 CSS 단위를 변환합니다.
px
px
px
픽셀 (px) 기준값
16.00px
모든 CSS 단위 변환
px16.00 px
rem1.0000 rem
em1.0000 em
vw0.8333 vw
vh1.4815 vh
%100.0000 %
개요
px, rem, em, vw, vh, pt 등 CSS 단위를 상호 변환합니다. 반응형 웹 디자인에서 적절한 단위를 사용하기 위한 필수 도구입니다.
계산 공식
변환 공식 (기본 폰트 크기 16px 기준): px → rem: rem = px / 루트 폰트 크기(기본 16). rem → px: px = rem × 루트 폰트 크기. px → em: em = px / 부모 요소 폰트 크기. px → pt: pt = px × 72 / 96 (= px × 0.75). px → vw: vw = px / 뷰포트 너비 × 100. px → vh: vh = px / 뷰포트 높이 × 100.
사용 방법
- 1변환할 CSS 단위와 대상 단위를 선택합니다.
- 2기본 폰트 크기(기본값 16px)를 설정합니다.
- 3값을 입력합니다.
- 4변환 결과가 자동으로 표시됩니다.
활용 팁
- ✔rem은 루트(html) 요소의 폰트 크기를 기준으로 하므로 일관된 크기 제어에 적합합니다.
- ✔em은 부모 요소 폰트 크기 기준이므로 중첩 시 의도치 않은 크기 변화에 주의하세요.
- ✔vw/vh는 뷰포트 크기에 따라 변하므로 반응형 타이포그래피에 유용합니다.
- ✔clamp() 함수를 사용하면 최소/최대 범위 내에서 유동적인 크기를 설정할 수 있습니다.
- ✔접근성을 위해 폰트 크기에는 px 대신 rem을 사용하는 것이 권장됩니다.
자주 묻는 질문
Q. rem과 em의 차이는 무엇인가요?
rem은 루트(html) 요소의 폰트 크기를 기준으로 계산되고, em은 현재 요소의 부모 폰트 크기를 기준으로 합니다. rem은 어디서든 일관된 크기를 보장하지만, em은 중첩될수록 기준 크기가 변할 수 있습니다.
Q. 브라우저 기본 폰트 크기는 항상 16px인가요?
대부분의 브라우저에서 기본값은 16px이지만, 사용자가 브라우저 설정에서 변경할 수 있습니다. 이 때문에 rem을 사용하면 사용자 설정에 반응하는 접근성 높은 디자인이 가능합니다.
Q. vw/vh 단위 사용 시 주의할 점은 무엇인가요?
모바일 브라우저에서 주소창 표시/숨김에 따라 뷰포트 크기가 변할 수 있습니다. dvh(dynamic viewport height)를 사용하면 이 문제를 해결할 수 있습니다. 또한 100vw는 스크롤바를 포함하므로 가로 스크롤이 생길 수 있습니다.