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