요즘 회사에서 사내 admin 을 만들고 있다. 사내 admin 사이트 이기 때문에 브라우저는 크롬으로 고정시켜서 개발 중인데, modal full popup을 만드는 중 CSS 스팩 중 vh 라는 단위를 사용하게 되었다.
https://www.w3schools.com/cssref/css_units.asp 에 따르면 vw, vh 는 뷰포트를 기준으로 하는 단위이다. 고맙게도 이 단위는 IE도 지원한다.
앞으로 사용할 일이 많이 생길 것 같다. 뷰포트는 브라우저가 보이는 화면 크기이다. 당연히 브라우저 크기를 조절하게 되면 이 크기도 당연히 변경되게 된다.
css 의 기능이 많아지면 UI를 만드는 과정에서 javascript 를 사용할 일이 줄어들어 공수가 많이 줄어든다. 이 단위를 지원하지 않았다면 브라우저 크기를 측정하는 것을 javascript 로 구해와야 한다. 그리고 기획에 따라서는 브라우저 크기를 조절하면 자동으로 크기가 조절되기를 원할것이다. 이 경우 자바스크립트로 resize 이벤트를 처리해야 한다. 이 경우 더더욱 공수가 많이 들게 된다.
어째든 IE 까지 지원하는 좋은 속성이다. 근데 정말 IE는 이제 안 사용했으면 좋겠다.