총 14가지 CSS 단위 간 변환을 즉시 수행할 수 있습니다. px, rem, em, vw, vh, pt, cm, in 또는 기타 단위를 입력하면, 상황에 맞는 상대 단위 지원을 통해 모든 변환 결과를 한눈에 확인할 수 있습니다.
1616px1212pt11pc0.42330.4233cm4.234.23mm0.16670.1667in11rem11em100100%1.111.11vw1.781.78vh1.781.78vmin1.111.11vmax22chCSS 단위는 고정된 물리적 크기나 화면 크기에 대응하는 ‘절대 단위’와, 글꼴 크기나 뷰포트 크기와 같은 맥락에 따라 크기가 조정되는 ‘상대 단위’의 두 가지 범주로 나뉩니다. 절대 단위에는 px, pt, pc, cm, mm, in 등이 있습니다. 상대 단위에는 rem(루트 글꼴 크기에 상대적), em(부모 요소의 글꼴 크기에 상대적), %(부모 요소의 백분율), vw 및 vh(뷰포트 너비와 높이), vmin 및 vmax(vw와 vh 중 더 작거나 큰 값), ch(현재 글꼴에서 '0' 문자의 너비) 등이 있습니다.
값을 입력하고 기준 단위를 선택하세요. 변환기가 즉시 다른 13개 단위로 환산된 값을 표시합니다. 상대 단위가 올바르게 계산되려면 컨텍스트 패널을 펼치고 기본 글꼴 크기(일반적으로 16px), 상위 요소 글꼴 크기 및 뷰포트 크기를 설정하십시오. 이 기본값은 표준 브라우저 환경과 일치하므로, 대부분은 설정을 변경하지 않아도 변환이 정상적으로 작동합니다.
이 도구는 접근성 준수를 위해 디자인 사양을 px에서 rem으로 변환하거나, 특정 화면 너비에서 뷰포트 상대 크기가 어떻게 동작하는지 확인하거나, 중첩된 요소 내에서 em 단위가 어떻게 계승되는지 파악할 때 유용합니다. 엔지니어들은 코드베이스를 px 기반 레이아웃에서 rem 또는 유동 단위 시스템으로 전환할 때 이 도구를 자주 사용합니다.