CSS 단위 변환기
루트 글꼴 크기, EM 기준 글꼴 크기, 뷰포트, % 기준을 설정해 px, rem, em, %, vw, vh, vmin, vmax, pt, pc, in, cm, mm, q, ex, ch 사이의 CSS 단위를 브라우저에서 1:1로 변환합니다. CSS 절대 단위에는 고정 비율 1in = 96px가 적용됩니다.
px
탭하여 단위를 전환
길이 단위
타이포그래피
뷰포트
백분율
rem
탭하여 단위를 전환
길이 단위
타이포그래피
뷰포트
백분율
CSS 단위 변환기값을 입력하고 원본 단위 선택대상 단위를 선택하거나 교환으로 반전필요에 따라 루트, EM 기준, %, 뷰포트 조건을 설정하세요. EM에는 해당 속성에 실제로 사용되는 글꼴 크기를 입력하세요.변환 결과 복사vw/vh 확인용 뷰포트 프리셋 전환
빠른 시작
1
2
3
4
5
자주 쓰는 활용 사례
용도
반응형 레이아웃, 디자인→개발 전달, 밀도/인쇄 대응, 스타일 규칙 통일
활용 팁
베이스 설정: 루트 16px이 일반적이며 rem ↔ px 계산 용이
텍스트는 rem 권장: 전역 스케일/a11y에 유리. 컴포넌트 내부 상대 스케일은 em
레이아웃 추정에는 뷰포트 단위를 사용합니다. 극단값을 피하려면 브레이크포인트와 min/max 제약을 함께 확인하세요.
소수/반올림: 가독성 유지 가능한 정밀도로
매개변수와 컨텍스트
REM 기준(Root Font Size): rem ↔ px 변환 비율을 정합니다. 웹에서는 16px이 일반적입니다(1rem≈16px). 디자인 기준이 다르면 임시로 조정하세요.
EM 기준 글꼴 크기: 해당 속성에 실제로 사용되는 글꼴 크기를 입력하세요. em은 일반적으로 현재 요소의 계산된 글꼴 크기를 사용하지만, font-size와 이와 유사한 글꼴 상대 속성에서는 부모 글꼴 크기를 사용합니다. 이 기준은 ex/ch 근사와 % 기준으로 글꼴 크기를 선택했을 때에도 사용됩니다.
% 기준: 글꼴 크기 / 너비 / 높이 중 선택합니다. 레이아웃은 너비/높이, 타이포그래피는 글꼴 크기를 사용하세요.
브레이크포인트 프리셋: 모바일 / 태블릿 / 데스크톱 / 대형 화면에 맞춰 뷰포트 크기도 바꿉니다. 추정용이며 런타임 media query가 아닙니다.
뷰포트 크기: vw/vh/vmin/vmax 및 %(너비/높이 기준) 변환에 사용합니다. 실제 기기는 주소창, 안전 영역, 스크롤바의 영향을 받을 수 있습니다.
팁: 1) 루트 및 EM 기준으로 16px가 흔히 쓰이지만, EM 기준에는 해당 속성에 실제로 사용되는 글꼴 크기를 입력하세요. 2) 레이아웃 %는 브레이크포인트를 바꿔 확인하세요. 3) 이 설정은 디자인 단계의 추정을 지원하며 브라우저의 최종 DOM/CSS 계산을 대체하지 않습니다. 절대 단위에는 항상 1in = 96px가 적용됩니다.
제한 사항 및 호환성
% 기준은 CSS 속성, 포함 블록, 레이아웃 모드에 따라 달라집니다. 이 도구는 실제 부모/컨테이너 측정값이 아니라 선택한 글꼴 크기/뷰포트 너비/뷰포트 높이로 추정합니다.
ex/ch는 여기서 EM 기준 글꼴 크기를 바탕으로 근사합니다. 글꼴 메트릭을 검사한 결과가 아니므로 글꼴과 브라우저에 따라 달라질 수 있습니다.
기존 vw/vh/vmin/vmax는 스크롤바, 주소 표시줄, 안전 영역의 영향을 받습니다. 이 도구는 dvh/svh/lvh, vi/vb, safe-area, 컨테이너 쿼리 단위를 계산하지 않습니다.
CSS 절대 단위 변환에는 고정 비율 1in = 96px가 적용됩니다. 실제 화면 픽셀과 인쇄 크기를 연결하려면 별도의 기기/인쇄 작업 과정이 필요하며, 이 도구에서는 이를 제공하지 않습니다.
개인정보 보호 및 보안
처리는 브라우저에서 실행됩니다. 입력값, From/To 단위, 단위별 캐시 값, 루트 글꼴 크기, EM 기준 글꼴 크기, 뷰포트, % 기준, 브레이크포인트 선택은 현재 브라우저 세션이나 브라우저 저장소에 남을 수 있습니다. 작업 공간을 저장하거나 WebDAV 동기화를 켜면 이 값들이 동기화 설정에 따라 저장될 수 있습니다. 변환 결과는 현재 값, 단위, 컨텍스트 설정에서 다시 계산되며 별도 결과로 저장되지 않습니다. 이 페이지는 URL을 가져오지 않고 서버 측 변환을 위해 값을 보내지 않습니다. 공유 기기에서는 필요할 때 값, 설정, 사이트 데이터를 지우세요.
자주 묻는 질문
rem은 루트 글꼴 크기를 기준으로 합니다. em은 일반적으로 현재 요소의 계산된 글꼴 크기를 사용하지만, font-size와 이와 유사한 글꼴 상대 속성에서는 부모 글꼴 크기를 사용합니다. 해당 속성에 실제로 사용되는 글꼴 크기를 EM 기준으로 설정하세요.
레이아웃/텍스트엔 rem 권장(a11y). 아이콘/테두리 정밀도에는 px 허용
모바일 주소 표시줄, 안전 영역, 스크롤바가 뷰포트에 영향을 줍니다. 브레이크포인트와 min/max 제약을 함께 확인하세요.
CSS px 변환에는 1in = 96px가 적용되며, 실제 화면과 인쇄물 간의 물리적 변환이 아닙니다. 실제 픽셀, 프린터 해상도, ICC/교정, 최종 출력에는 별도의 기기/인쇄 작업 과정을 사용하세요.