CSS 단위 변환기
px, rem, em, vw 간 변환. 기본 폰트 크기와 뷰포트 너비를 설정할 수 있습니다. 반응형 CSS 디자인에 필수적인 무료 온라인 도구.
환산값
참고
CSS 단위
CSS에는 절대 단위와 상대 단위가 있습니다. px와 같은 절대 단위는 컨텍스트에 관계없이 고정됩니다. rem, em, vw와 같은 상대 단위는 기준값에 따라 확장되어 반응형 및 접근 가능한 레이아웃에 필수적입니다.
px, rem, em, vw
px(픽셀) — 절대 단위. 1px은 장치 독립적인 1픽셀입니다. 테두리, 그림자, 폰트 크기에 연동되지 않아야 하는 요소에 사용합니다.
rem(root em) — 루트 요소(html)의 폰트 크기를 기준으로 합니다. 브라우저 기본 루트 크기는 16px입니다. 사용자의 브라우저 폰트 크기 설정을 존중하므로 폰트 크기와 간격에 권장됩니다.
em — 부모 요소의 폰트 크기를 기준으로 합니다. 중첩된 요소에서 누적될 수 있습니다. 요소 자체의 폰트 크기에 맞게 확장되는 패딩 및 마진에 유용합니다.
vw(뷰포트 너비) — 1vw = 뷰포트 너비의 1%. 화면 크기에 적응하는 유동적 타이포그래피와 전체 너비 레이아웃에 이상적입니다.
일반적인 px에서 rem 변환
기본 브라우저 기준 16px의 경우: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. 1440px 디자인의 뷰포트 단위: 14.4px = 1vw, 72px = 5vw.
접근성을 위해 rem이 선호되는 이유
글꼴 크기에 rem을 사용하면 사용자의 브라우저 글꼴 크기 설정이 존중됩니다. 사용자가 브라우저를 기본 16px 대신 20px로 설정하면, rem 기반 레이아웃은 비례적으로 크기가 조정되지만 px 기반 레이아웃은 고정됩니다. WCAG 1.4.4 (텍스트 크기 조정)는 콘텐츠나 기능의 손실 없이 텍스트를 200%까지 크기 조정할 수 있도록 요구합니다 — rem 단위는 이 요구 사항을 자연스럽게 충족합니다.
개인정보
모든 변환은 100% 브라우저에서 실행됩니다. 서버로 전송되는 데이터가 없습니다.