브라우저 창의 크기에 따라 폰트 크기가 변하는 vw vh 단위 px 계산 방법

반응형 웹에서 사용되어지는 폰트 크기의 단위 중 하나가 vw, 그리고 vh가 있습니다. 각 단위의 뜻은 vw (Viewport Width) 이고, vh (Viewport Height) 입니다. 즉 vw는 가로 사이즈에 대응하여 변화하는 크기이고, vh는 세로 사이즈의 변화에 따른 크기 입니다.

해상도는 윈도우 해상도가 아닌 현재 브라우저 창의 크기를 기준으로 합니다. 예를 들자면 1vw의 크기를 px로 계산하려고 합니다. 현재 창 크기의 가로 폭이 1000px 이라고 가정 했을 때, 1vw는 현재 브라우저 가로 폭의 100분의 1이 됩니다. 즉 10px이 1000px 가로폭에서의 폰트 크기가 됩니다. 이론만으로는 좀 어렵고 햇갈릴 수 있으니 아래의 예제를 살펴보도록 하겠습니다.

See the Pen CSS3: font-size: vw / vh; by rgy0409 (@rgy0409) on CodePen.

현재 미리보기의 가로사이즈는 363px, 세로사이즈는 218px 입니다. 따라서 이 창에서의 1vw는 3.63px , 1vh는 2.18px 이 됩니다. CSS에서 첫번째 p태그의 폰트 크기를 10vw 라고 했으니, 3.63px의 10배가 되겠죠. 결국 적용된 폰트의 크기는 36.3px이 됩니다.

이 부분을 크롬에서 검사 기능으로 살펴보면 정확히 계산대로 36.3px 이라고 확인하실 수 있습니다. 단! 이것은 현재 제가 보는 PC의 브라우저의 창 크기에서의 계산 결과 입니다. 여러분들께서 모바일로 접속했을 경우, 태블릿으로 접속했을 경우에는 결과가 달라질 수 있습니다. 두번째 p태그의 폰트 크기의 스타일을 15vh 라고 마크업 하였습니다. 따라서 결과는 32.7px 이 될 것입니다.

그렇죠? 크롬에서의 검사 결과 입니다. 정확히 일치합니다. 또한 위의 예제에서 CSS탭을 눌러보시면 미리보기 화면만 보여지게 되는데, 이때 첫번째 p태그에 있는 텍스트의 글씨가 커질 것입니다. 이유는 아시다시피 미리보기 화면이 가로로 넓어지면서 그에 따른 브라우저 해상도도 올라갔기 때문에 vw 계산에 의해서 폰트 크기도 커지는 것입니다.

생각만큼 어렵지 않습니다. vw, vh를 px 단위로 계산해주는 사이트도 있으니 그곳을 이용해서 편리하게 계산없이 데이터를 입력해서 값을 얻을수도 있습니다. 그런데 해상도에 따른 폰트 크기의 변화여도 막상 반응형에서는 많이 쓰이지는 않는 것 같습니다. 헤드라인같은 제목 부분을 제외하면 나머지 부분에서는 기존에 사용하는 px 단위라던지 지난 시간에 한번 소개해드렸던 em, rem을 더 많이 활용하는 것 같습니다. 이 부분은 회사마다 그리고 개인마다 좋아하는 방식대로 사용하면 될 것 같습니다. 끝.