CSS 단위 변환기
px, em, rem, %, pt, vw, vh 등 다양한 CSS 길이 단위를 정확하게 변환합니다. 기준 폰트 크기와 뷰포트 크기를 설정하여 반응형 웹 디자인에 필요한 정밀한 계산을 지원합니다.
도구 실행
이 도구는 웹 개발자가 자주 사용하는 CSS 길이 단위를 서로 변환하는 데 특화되어 있습니다. 픽셀(px)을 상대 단위인 em이나 rem으로 바꾸거나, 뷰포트 너비와 높이에 기반한 vw, vh 단위로 계산할 수 있습니다. 또한 포인트(pt), 센티미터(cm), 밀리미터(mm), 인치(in)와 같은 절대 단위도 지원합니다. 변환 과정에서는 입력된 값을 먼저 픽셀로 중간 변환한 후 목표 단위로 재계산하며, 소수점 넷째 자리까지 반올림하여 정밀도를 유지합니다. 기본 폰트 크기(16px)와 뷰포트 크기(1920x1080)를 자동으로 적용하지만, 프로젝트 요구사항에 따라 이 값들을 직접 조정할 수 있어 반응형 레이아웃 설계 시 유용합니다. 인식되지 않는 단위는 픽셀 값으로 간주하거나 기존 픽셀 값을 유지하므로, 복잡한 스타일 시트 작업 중에도 유연하게 활용할 수 있습니다.
사용 방법
- 변환하려는 숫자를 '값' 필드에 입력합니다.
- '변환 전 단위' 메뉴에서 현재 사용 중인 CSS 단위를 선택합니다.
- '변환 후 단위' 메뉴에서 원하는 결과 단위를 선택합니다.
- em 또는 rem 단위를 사용하는 경우 '기준 폰트 크기'를 확인하고 필요시 수정합니다.
- vw 또는 vh 단위를 사용하는 경우 '뷰포트 너비' 및 '뷰포트 높이' 값을 설정합니다.
- 결과 패널에 표시된 변환된 값을 확인하고 복사하여 사용합니다.
예시
- 기준 폰트 크기 16px에서 24px를 rem으로 변환하면 1.5rem이 됩니다.
- 뷰포트 너비 1920px에서 50vw는 960px에 해당합니다.
- 1인치(in)는 96픽셀(px)로 변환됩니다.
자주 묻는 질문
em과 rem의 차이점은 무엇인가요?
em은 부모 요소의 폰트 크기에 비례하지만, rem은 루트(html) 요소의 폰트 크기에 비례합니다. 이 도구에서는 '기준 폰트 크기' 값을 사용하여 두 단위 모두를 계산합니다.
vw와 vh 단위는 어떻게 계산되나요?
vw는 뷰포트 너비의 1%를, vh는 뷰포트 높이의 1%를 의미합니다. 도구의 '뷰포트 너비' 및 '뷰포트 높이' 설정값을 기준으로 백분율이 계산됩니다.
지원하지 않는 단위를 입력하면 어떻게 되나요?
알 수 없는 단위가 입력되면 소스 단위의 경우 숫자가 이미 픽셀 단위인 것으로 간주되며, 대상 단위의 경우 픽셀 값이 그대로 유지됩니다.
소수점 이하 자릿수는 어떻게 처리되나요?
정확성을 위해 변환된 값과 중간 픽셀 값 모두 소수점 넷째 자리까지 반올림되어 표시됩니다.