광고 닫기
CSS 단위 변환기
CSS 단위 변환기
px, em, rem, %, vw, vh 등 CSS 단위 간의 상호 변환을 지원하며 반응형 중단점 설정을 제공합니다. 컨텍스트 의존 값을 자동으로 계산하여 반응형 레이아웃 개발, 프론트엔드 구현 및 스타일 적응에 적합합니다.
사용 안내
🚀 빠른 시작
- 값과 단위를 입력: 예) 16 + px, 1 + rem
- 원본 단위를 선택해 값을 입력, 이후 대상 단위를 선택. ‘교환’으로 빠르게 전환.
- 모바일: 드로어 우상단 화살표로 원본/대상 전환.
- rem/em/%/vw/vh 에서만 설정 가능, 절대 단위는 비활성.
- 결과 보기: 나머지 단위가 즉시 계산되며 복사 가능
- 브레이크포인트: 모바일/태블릿/데스크톱 프리셋 전환으로 화면별 검증
📌 자주 쓰는 활용 사례
- 용도: 반응형 레이아웃, 디자인→개발 전달, 밀도/인쇄 대응, 스타일 규칙 통일
🧭 활용 팁
- 베이스 설정: 루트 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/교정으로 검증