TIL] css단위 vh와 vw

vh

반응형으로 웹디자인을 할 때는 아무래도 픽셀 단위가 아닌 % 단위를 많이 사용한다.

하지만 css의 퍼센트 값이 모든 문제를 해결할 수 있지는 않다!

css의 너비 값은 가장 가까운 부모 요소에 상대적인 영향을 받기 때문이다.

이럴 때 vh가 상대적으로 많이 쓰인다.

vh 요소는 높이값의 100분의 1단 위이다.

예를 들어 브라우저 높잇값이 700일 때 1vh는 7px이라는 뜻이다.

---

vw

그렇다면 높이값 말고 뷰포트의 너비 값으로 적용하려면 어떻게 해아 할까?

vw를 사용하면 된다.

vw 요소는 뷰포트의 너비 값의 100분의 1단 위이다.

예를 들어 뷰포트의 너비 값이 700px이면 1vw는 7px이라는 뜻이다.

---

뷰포트란 무엇일까?

vh단위를 쓸 때 브라우저의 높이는 어떤 건지 알지만

vw단위를 쓸 때 뷰포트가 생소하여 찾아보게 되었다!

뷰포트는 현재 화면에 보이고 있는 다각형의 영역이다.

웹브라우저에서는 현재 창에서 문서를 볼 수 있는 부분을 말한다.

뷰포트 중에서도 지금 볼 수 있는 부분을 시각적 뷰포트라고 부르고

모바일과 같은 특정 상황에서 사용자가 화면을 확대했을 때 같은 상황에서

레이아웃 뷰포트의 크기는 변하지 않지만

시각적 뷰포트는 더 작아진다.

---

오늘은 친형의 결혼식이라 정신없이 하루가 지나갔다.

공부는 많이 하지 못했지만 css에서 중요한 단위인

vh와 vw를 공부하게 되었는데 토이 프로젝트에서

vh를 사용하기는 했지만 정확한 개념은 몰라서 찾아보니

vh는 css에서 굉장히 유용하게 쓰이는 단위 중 하나인 것 같다.

그와 마찬가지로 vw는 모바일 반응형 웹디자인을 할 때

정말 중요한 요소로 쓰일 것 같다!

css단위도 적절하게 사용하여 완성도 높은 코딩을 할 수 있는

개발자가 되기 위해 노력해야겠다!