본문 바로가기
  • 커뮤니티
  • 블로그
  • 북마크
IT/사이트

[사이트]모바일(반응형) 사이트 제작시 vw로 자동 수치변환

by 빽짱구 2020. 1. 15.

오랜만에 사이트 소개를 하네요.

모바일 사이트 제작 시 절대 수치를 px로 할 때도 있지만, 이벤트 or 랜딩 페이지 등은 유동적으로 사이즈가 변할 수 있도록 상대 사이즈를 사용할 때도 있습니다. 상대 사이즈란 (%,em, vw) 등이며, 절대 사이즈는 (px, pt) 등이 있겠습니다.

상대 사이즈는 해상도에 따라 그 크기가 유동적으로 변화하는 사이즈이며, 절대 사이즈는 해상도와 상관없이 사이즈가 고정됨을 의미합니다.

 

사이트 주소 : https://it-news.pw/pxtovw/

 

사용법은 간단합니다.

예) 디자이너가 가로 해상도 640px로 전달해줬으면 'ENTER YOUR VIEWPORT WIDTH' 란에 '640'을 넣으시고,

'ENTER YOUR PIXEL UNIT' 란에 변경할 px 수치를 입력하시면 됩니다.

 

추가 설명을 드리자면,

이미지 가로 사이즈가 640일 때 폰트 사이즈나 기타 margin, padding 등이 30px 이면 'ENTER YOUR PIXEL UNIT'에 30을 넣으시고 'CLICK TO GET VW UNIT'를 클릭하시면, vw로 변경된 수치를 알려줍니다.

뒤에 두 자리 소주점까지 작성할 필요는 없지만, 약간에 차이는 있을 수 있으니 그 부분은 제작하시면서 세밀하게 맞춰주시면 됩니다.

일일이 퍼센트 계산기로 계산하시지 말고 PX to VW Calculator 사이트를 이용해보세요.