CSS 단위 변환기 (px / rem / em / vh / vw)

px 대신 rem을 사용하는 이유

브라우저는 16px에서 시작하지만, 저시력 사용자는 브라우저 설정에서 기본 글꼴 크기를 높이는 경우가 많습니다. rem으로 지정한 텍스트는 해당 설정에 따라 커지지만 px로 지정한 텍스트는 커지지 않습니다. 페이지 확대는 두 방식 모두 확대하지만, 많은 사용자가 의존하는 것은 글꼴 크기 설정이며 WCAG의 텍스트 크기 조정 기준은 손실 없이 200%까지 확대되는 텍스트를 요구합니다. 크기와 그 주변 간격은 rem으로 지정하고, 가는 선과 테두리에는 px를 사용하십시오.

em 열과 중첩 구조

em은 요소 자체의 글꼴 크기를 기준으로 하며, font-size 자체에서는 부모 요소의 글꼴 크기를 기준으로 합니다. 여기의 em 값은 부모 요소가 루트 크기라고 가정하며, 이는 최상위 수준에서만 성립합니다. 0.875em 요소 안에서 다시 0.875em을 사용하면 14px가 아니라 12.25px가 되고, 축소 효과가 누적됩니다. 따라서 rem이 더 안전한 기본값이며, em은 구성 요소의 텍스트에 맞춰 크기가 조정되어야 하는 간격에 적합합니다.

62.5% 기준과 뷰포트 단위

html { font-size: 62.5% }로 설정하면 1rem이 10px가 되어 계산하기 쉬워집니다. 이에 맞추려면 기본 크기에 10을 입력하십시오. 그러면 서드파티 구성 요소를 포함해 rem으로 크기를 지정한 다른 모든 요소가 작아지므로, body에 읽기 쉬운 크기를 다시 설정하십시오.

vw와 vh 수치는 1440 × 900 뷰포트를 기준으로 합니다. 휴대전화에서는 브라우저 도구 모음이 표시될 때 100vh가 보이는 영역보다 높을 수 있습니다. 이를 고려하는 단위는 100svh와 100dvh입니다.

사용 방법

1. 픽셀 값(px)과 루트 기준 크기(기본값 16px)를 입력합니다.
2. 계산된 rem, em, vw, vh 값을 확인합니다.
3. 바로 사용할 수 있는 CSS 코드 조각을 복사하거나 스케일 표를 확인합니다.

개인정보 보호 및 제한사항

클라이언트 측 JavaScript에서 즉시 실행됩니다.