VW 계산기
PX to VW 변환기
시안의 px 값을 입력하면 바로 vw로 바뀝니다. 기준 너비와 설정은 자동으로 저장됩니다.
자주 쓰는 값
클릭하면 vw 값이 복사됩니다.
CSS 일괄 변환
CSS를 붙여넣으면 모든 값이 바로 변환됩니다. @media 조건은 그대로 둡니다.
SCSS · CSS로 직접 계산하기
기준 너비가 반영된 함수입니다. 프로젝트에 붙여넣어 쓰세요.
SCSS
CSS
기준 너비별 PX → VW 변환표
자주 쓰는 시안 너비별로 px 값이 몇 vw인지 정리한 표입니다.
다른 단위 변환 도구
PX to VW 변환 가이드
스마트폰부터 울트라 와이드 모니터까지 화면 크기가 다양해지면서, 화면 너비에 비례하는 vw(Viewport Width) 단위는 반응형 웹의 기본 도구가 되었습니다. 이 변환기는 디자인 시안의 px 값을 기준 너비에 맞춰 vw로 바꿔 줍니다.
1. VW 단위란?
1vw는 브라우저 화면 너비의 1%입니다. 화면 너비가 1000px이면 1vw는 10px이고, 500px로 줄어들면 5px이 됩니다. 덕분에 미디어 쿼리를 여러 개 쓰지 않아도 요소가 화면 크기에 비례해 커지고 작아집니다.
2. 사용 방법
- 기준 너비에 시안의 아트보드 너비(예: 1920, 1440, 375)를 입력하거나 프리셋을 누르세요.
- PX → VW 칸에 값을 입력하면 즉시 결과가 나옵니다. 결과를 클릭하면 복사됩니다.
- 여러 값을 한 번에 바꾸려면 CSS 일괄 변환에 코드를 붙여넣으세요.
3. 실무 팁
- 보더·그림자처럼 1~2px 정도의 얇은 값은 px로 두는 편이 화면에서 더 선명합니다. "1px 이하는 px 유지" 옵션을 켜 두세요.
- 폰트는 vw만 쓰기보다 clamp() 생성기로 최소·최대 크기를 함께 지정하세요.
- @media 조건의 px는 화면 너비 기준이므로 vw로 바꾸면 안 됩니다. 일괄 변환은 이 부분을 자동으로 건너뜁니다.
자주 묻는 질문
px를 vw로 변환하는 공식은 무엇인가요?
vw 값 = (변환할 px 값 ÷ 기준 뷰포트 너비) × 100입니다. 예를 들어 1920px 기준 시안에서 96px는 (96 ÷ 1920) × 100 = 5vw가 됩니다.
기준 너비는 몇으로 설정해야 하나요?
디자인 시안의 아트보드 너비를 그대로 입력하면 됩니다. 데스크톱 시안은 보통 1920px 또는 1440px, 모바일 시안은 360px·375px·390px이 많이 쓰입니다.
폰트 크기도 vw로 변환해도 되나요?
가능하지만 주의가 필요합니다. 작은 화면에서 글자가 너무 작아지거나 큰 화면에서 지나치게 커질 수 있으므로 clamp() 함수로 최소·최대 크기를 제한하는 것을 권장합니다. 또한 vw로만 지정한 폰트는 브라우저 확대/축소가 잘 동작하지 않아 접근성에 불리할 수 있습니다.
CSS 코드 전체를 한 번에 vw로 변환할 수 있나요?
네. CSS 일괄 변환에 코드를 붙여넣으면 모든 px 값이 바로 vw로 바뀝니다. @media 조건의 px는 그대로 두고, 1px 보더처럼 작은 값은 px로 유지할 수 있습니다. vw를 px로 되돌리는 변환도 지원합니다.
입력한 기준 너비가 다음에 방문해도 유지되나요?
네. 기준 너비, 소수점 자릿수, 변환 옵션은 브라우저에 자동 저장되어 다음 방문 때 그대로 적용됩니다. 서버로 전송되지 않습니다.