CSS 단위 변환기
CSS 단위 간 변환: px, rem, em, %, vh, vw. 기본 폰트 크기와 뷰포트 크기를 설정하세요.
작동 방식: 값을 입력하고 단위를 선택하면 모든 변환이 즉시 표시돼요. 결과를 클릭하면 복사할 수 있어요. 프로젝트에서 다른 기본 폰트 크기나 뷰포트를 사용한다면 아래 설정을 조정하세요.
이 설정은 rem, em, %, vh, vw 계산에 영향을 줘요. 대부분의 프로젝트는 기본값으로 16px를 사용해요.
CSS 단위 이해하기
CSS는 길이, 크기, 위치를 표현하기 위해 다양한 단위를 지원해요. 올바른 단위를 선택하는 것은 접근성 있고 반응형인 레이아웃을 만드는 데 중요해요. 단위는 크게 두 가지로 나뉘는데, 항상 고정된 크기를 나타내는 절대 단위(px 같은)와 기준값에 따라 크기가 변하는 상대 단위(rem, em, %, vh, vw)가 있어요.
절대 단위 vs 상대 단위
px(픽셀) 같은 절대 단위는 화면 크기나 사용자 설정에 관계없이 고정돼요. 예측 가능하고 이해하기 쉽지만 사용자가 브라우저 폰트 크기를 변경할 때 접근성 문제가 생길 수 있어요. 상대 단위는 비례적으로 조정되는데, rem은 루트 폰트 크기, em은 부모 요소 폰트 크기, %는 부모의 크기, 뷰포트 단위(vh, vw)는 화면 크기에 따라 변해요.
rem 언제 사용할까
rem(root em)은 루트 <html> 요소의 폰트 크기에 상대적이며, 대부분의 브라우저에서 기본값이 16px이에요. 폰트 크기와 간격에 rem을 사용하면 사용자의 시스템 폰트 크기 설정을 존중하는 레이아웃이 되어 접근성 면에서 중요해요. html { font-size: 62.5% }로 설정해서 1rem = 10px로 만드는 패턴이 일반적이에요.
em 언제 사용할까
em은 현재 요소의 폰트 크기(또는 폰트 이외 속성의 경우 가장 가까운 부모 폰트 크기)에 상대적이에요. 컴포넌트 레벨 스케일링에 유용한데, 예를 들어 padding을 em으로 설정하면 컴포넌트의 폰트 크기를 바꿀 때 간격이 자동으로 조정돼요. 하지만 em 값은 중첩된 요소에서 누적될 수 있어서 규모가 커질수록 rem보다 관리하기 어려워요.
뷰포트 단위
vw(뷰포트 가로)와 vh(뷰포트 세로)는 브라우저 뷰포트 크기의 백분율이에요. 100vw는 전체 너비, 50vh는 화면 높이의 절반이에요. 전체 화면 섹션, 히어로 이미지, 화면을 채워야 하는 레이아웃에 최적이에요. 최신 CSS는 svh, lvh, dvh를 도입해서 모바일 브라우저의 동적 뷰포트 높이를 더 정확하게 처리해요.