본문으로 건너뛰기
CrateX.app 로고

CrateX.app

CSS 단위 변환기

CSS 단위 변환기

CSS 단위 변환기로 px, rem, em, %, vw, vh, pt를 서로 변환할 수 있습니다. 루트/부모 글꼴, 뷰포트, DPI를 지정해 반응형 레이아웃 치수를 확인할 때 유용합니다.

픽셀
px
탭하여 단위를 전환

Length Units

Typography

Viewport

Percentage

루트 글꼴 크기에 상대
rem
탭하여 단위를 전환

Length Units

Typography

Viewport

Percentage
CSS 단위 변환기

빠른 시작

1
값과 단위를 입력: 예) 16 + px, 1 + rem
2
원본 단위를 선택해 값을 입력, 이후 대상 단위를 선택. ‘교환’으로 빠르게 전환.
3
모바일: 드로어 우상단 화살표로 원본/대상 전환.
4
rem/em/%/vw/vh 에서만 설정 가능, 절대 단위는 비활성.
5
결과 보기: 나머지 단위가 즉시 계산되며 복사 가능
6
브레이크포인트: 모바일/태블릿/데스크톱 프리셋 전환으로 화면별 검증

자주 쓰는 활용 사례

용도

반응형 레이아웃, 디자인→개발 전달, 밀도/인쇄 대응, 스타일 규칙 통일

px를 em으로, em을 px로, vw를 px로 같은 작업도 같은 확인 흐름에서 함께 처리할 수 있어 복사나 내보내기 전에 결과를 빠르게 점검할 수 있습니다.

활용 팁

베이스 설정: 루트 16px이 일반적이며 rem ↔ px 계산 용이
텍스트는 rem 권장: 전역 스케일/a11y에 유리. 컴포넌트 내부 상대 스케일은 em
레이아웃엔 뷰포트 단위: 브레이크포인트와 clamp/min/max 병행
소수/반올림: 가독성 유지 가능한 정밀도로

매개변수와 컨텍스트

REM base (Root Font Size): rem ↔ px 기준. 웹에선 16px이 일반적(1rem≈16px). 디자인 기준이 다르면 일시 조정.
EM base (Parent Font Size): em 및 % (참조=글꼴 크기)의 기준. 컴포넌트 로컬 스케일에 적합.
% 참조: 글꼴 크기/너비/높이 중 선택. 레이아웃은 너비/높이, 타이포는 글꼴 크기.
브레이크포인트 프리셋: 뷰포트 크기도 동기화되어 빠른 검증(런타임 미디어쿼리와는 별개).
뷰포트 크기: vw/vh/vmin/vmax 및 % (너비/높이) 환산에 사용. 주소창/세이프영역/스크롤바 영향 가능.
DPI: pt/pc/in/cm/mm/q ↔ px 환산용. 기본 96; 인쇄/HiDPI는 기기값 사용.
Tips: 1) 16px & 96 DPI를 기준으로; 2) 레이아웃 %는 브레이크포인트로 검증; 3) 설계 단계의 추정값으로, 최종 계산은 브라우저 기준.

제한 사항 및 호환성

% 기준은 속성마다 다름(width/height/line-height 상이). 본 도구는 일반 전제를 가정
ex/ch는 폰트 메트릭에 의존, 폰트/브라우저별 차이
뷰포트 단위는 주소창/세이프 에어리어/스크롤 영향으로 오차 가능
물리 단위 ↔ px는 DPI에 좌우됨. 인쇄/HiDPI 환경은 검증 필요

개인정보 및 보안

모든 처리는 브라우저에서 로컬로 이루어지며 데이터는 기기를 벗어나지 않습니다.

자주 묻는 질문

4

다음 작업에 도움이 되는 관련 도구입니다.