CSS vw 단위 변환기

언제 사용하나요?

반응형 디자인에서 고정 px 값 대신 뷰포트 기준 vw 단위를 사용해야 할 때, 디자인 시안의 px 값을 vw로 변환해야 할 때 사용합니다.

사용 방법

• 기준 뷰포트 너비를 입력합니다 (예: 1440).
• px 값을 입력하면 vw로, vw 값을 입력하면 px로 변환됩니다.
• 변환 결과를 복사해 CSS에 사용합니다.

입력값 안내

변환 기준이 될 디자인 시안의 전체 뷰포트 너비(예: 모바일 375, 데스크탑 1440)와 변환하려는 요소의 픽셀(px) 크기를 입력합니다.

계산·변환 기준

vw = (px ÷ 뷰포트 너비) × 100. 예: 뷰포트 1440px 기준, 144px → 10vw.

사용 예시

• px → vw 변환 - 디자인 시안의 px 값을 반응형 vw 단위로 변환합니다.
• 반응형 폰트 크기 - 폰트 크기를 vw로 지정할 때 참고 값을 계산합니다.
• 배포 전 빠른 점검 - 입력값과 생성 결과를 확인해 개발·운영 작업 전 오류 가능성을 줄입니다.

예시

• 뷰포트 1440px 기준: 144px → 10vw
• 뷰포트 375px 기준: 37.5px → 10vw

주의사항

• 생성된 vw/vh 값은 참고용입니다. 실제 콘텐츠 레이아웃에서 다양한 화면 크기로 직접 확인하세요.
• IE 11 이하 브라우저는 vw/vh 단위를 완전히 지원하지 않으니 대상 브라우저를 확인하세요.

계산·사용 가이드

vw 단위란

1vw는 뷰포트(브라우저 화면) 너비의 1%입니다. 화면 크기에 비례하는 반응형 레이아웃을 만들 때 px 대신 vw를 씁니다.

px-vw 변환 공식

특정 해상도에서 px를 vw로 바꾸려면: vw = (px / 화면너비) × 100 공식을 씁니다. css-clamp 도구와 함께 활용하면 최솟값·최댓값을 지정하는 반응형 타이포그래피도 만들 수 있습니다.

자주 묻는 질문

vw 단위란 무엇인가요?

viewport 너비의 1%를 뜻하는 CSS 단위입니다. 뷰포트 너비가 1440px이면 1vw = 14.4px입니다.

기준 뷰포트 너비를 바꿀 수 있나요?

네, 계산 기준이 되는 뷰포트 너비를 직접 입력할 수 있습니다.

vw를 px로도 되돌릴 수 있나요?

네. px→vw와 vw→px 양방향 변환을 지원해 어느 쪽이든 환산할 수 있습니다.

vw 단위는 반응형에 적합한가요?

뷰포트 너비에 따라 자동으로 크기가 변해 반응형 글자·여백에 유용합니다. 다만 최소·최대 크기는 clamp()로 함께 제한하는 것이 좋습니다.

관련 도구

• JSON 포매터 - JSON 문자열을 보기 좋게 들여쓰기하거나 최소화합니다. 유효성 오류도 함께 표시합니다.
• UUID 생성기 - 암호학적으로 안전한 UUID v4를 최대 20개까지 한 번에 생성합니다.
• 비밀번호 생성기 - 길이, 문자셋, 개수를 선택해 브라우저에서 안전한 랜덤 비밀번호를 생성합니다.
• JWT 디코더 - JWT의 header와 payload를 디코딩해 JSON과 주요 클레임을 확인합니다.
• 정규식 테스터 - 정규식 패턴을 입력해 텍스트에서 매칭 결과를 실시간으로 확인합니다.
• QR 코드 생성기 - 텍스트나 URL을 QR 코드로 변환하고 이미지로 다운로드합니다.