CrateX.app 로고

CrateX.app

CSS 단위 변환

px, em, rem, %, vw, vh 등 CSS 단위 간 변환 및 반응형 중단점 지원

사용 안내

🚀 빠른 시작

  • 값과 단위를 입력: 예) 16 + px, 1 + rem
  • 컨텍스트 설정: 루트/부모 글꼴 크기, 뷰포트 크기, DPI 설정(rem/em/vw/vh/pt/cm 등에 영향)
  • 결과 보기: 나머지 단위가 즉시 계산되며 복사 가능
  • 브레이크포인트: 모바일/태블릿/데스크톱 프리셋 전환으로 화면별 검증

📌 일반 시나리오

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

🧭 사용 팁

  • 베이스 설정: 루트 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 환경은 검증 필요

🔒 개인정보 및 보안

  • 모든 처리는 브라우저 내에서 이루어지며, 데이터는 기기를 떠나지 않습니다

❓ 자주 묻는 질문

rem과 em의 차이는?

rem은 루트 기준(전역 스케일), em은 부모 기준(컴포넌트 지역 스케일)

px와 rem 중 무엇을?

레이아웃/텍스트엔 rem 권장(a11y). 아이콘/테두리 정밀도에는 px 허용

vw/vh가 기기마다 다른 이유?

모바일 주소창/세이프 에어리어/스크롤 영향. clamp()/min()/max()와 브레이크포인트 병행

화면 픽셀을 인쇄 단위로 변환하려면?

DPI(예: 96/72/300) 설정. 여기 변환은 추정치이며 인쇄는 ICC/교정으로 검증

CSS Unit Converter - px em rem vw vh pt Calculator - CrateX.app