CSS 단위 변환이란, 웹 디자인에서 사용되는 다양한 길이 단위(px, em, rem, %, vw, vh 등)를 상호 변환하는 것입니다.
절대 단위와 상대 단위
CSS 단위는 크게 절대 단위와 상대 단위로 나뉩니다. 절대 단위(px, pt, cm 등)는 고정 사이즈이고, 상대 단위(em, rem, %, vw, vh 등)는 기준에 대한 비율로 표현됩니다.
px(픽셀)
가장 일반적인 단위로, 화면상의 1 도트를 나타냅니다. 고정 사이즈라 다루기 쉽지만, 사용자의 폰트 사이즈 설정을 무시하기 때문에 접근성에 문제가 있습니다.
em(엠)
부모 요소의 폰트 사이즈를 기준으로 한 상대 단위입니다. 1em = 부모 요소의 font-size. 중첩 구조에서 복리로 계산되기 때문에, 깊은 계층에서는 예상치 못한 사이즈가 될 수 있습니다.
rem(루트 엠)
루트 요소(html)의 폰트 사이즈를 기준으로 한 상대 단위입니다. 1rem = html의 font-size(일반적으로 16px). em과 달리 중첩의 영향을 받지 않기 때문에, 모던 CSS에서는 권장됩니다.
%(퍼센트)
부모 요소의 사이즈에 대한 비율을 나타냅니다. font-size의 경우 부모의 font-size, width의 경우 부모의 width 기준이 됩니다. 속성에 따라 기준이 다르므로 주의가 필요합니다.
vw/vh(뷰포트 단위)
뷰포트(표시 영역)의 사이즈를 기준으로 한 단위입니다. 1vw = 뷰포트 너비의 1%, 1vh = 뷰포트 높이의 1%. 반응형 디자인에서 화면 사이즈에 따른 유연한 레이아웃을 구현할 수 있습니다.
pt/pc(인쇄 단위)
인쇄 업계에서 사용되는 단위입니다. 1pt = 1/72인치, 1pc = 12pt. 인쇄용 CSS나 PDF 생성에서 사용되지만, 화면 표시에는 일반적으로 px나 rem을 사용합니다.
물리적 단위(cm/mm/in)
실제 물리적 길이를 나타내는 단위입니다. 1in = 2.54cm = 25.4mm = 96px(CSS 정의). 인쇄물과의 정합성이 필요한 경우에 사용되지만, 화면의 물리적 사이즈는 보장되지 않습니다.
실시간 변환의 이점
본 도구는 실시간 변환을 지원하며, 기준값을 변경하면 즉시 결과가 업데이트됩니다. 다양한 화면 사이즈나 폰트 설정에서의 모습을 빠르게 확인할 수 있어, 효율적인 CSS 설계가 가능합니다.