단위 정리 (vh/vw/calc)

px, em, rem을 넘어서서 요새 많이 쓰이는 단위를 정리해보겠습니다.

사용함에 있어서 굉장히 편히라고 게다가 IE9부터 지원을 하기 때문에 앞으로의 쓰임이 더욱 기대되는 단위라고 합니다!

1. vw, vh

ex) width:100vw; height:100vh;

width에는 vw를 hright에는 vh를 사용합니다. 이 부분은 반응형웹과 같은 곳에서 쓰일수록 더욱 편리함이 높아집니다.

이 단위는 요소의 뷰포트값의 100분의 1을 하는 값을 뜻합니다. 즉 값에 해당하는 숫자는 1부터 100이 됩니다. (1vh -100vh)

가령 브라우저의 전체 넓이가 1000px이 된다면 1vh는 10px가 되는 것을 뜻합니다.

위 단위를 사용하는 사례로는,

브라우저의 전체화면에 풀 이미지를 넣어야하는 경우 height: 100%; 를 쓰지 않고, height: 100vh; 를 사용하는것입니다.

퍼센테이지 값이 아닌, 좀더 명확한 단위를 씀으로써 편리하면서도 가변적으로 변할 수 있는 전체화면을 만들었습니다.

다만 이 단위를 쓰는 경우, IE의 하위 브라우저는 지우너이 가능하지 않다는 점을 알아두어야합니다.

2. calc()

ex) width:calc(100%-2rem); width:calc(100%/4);

이 단위야 말로 우리가 늘 고민해왔던, 값을 연산하면 좋을텐데… 하는 생각을 그대로 반영한 단위인 듯 합니다.

가령 똑같이 나눠야하는 가로 사이즈 라던지, 양옆의 여백만 없앤 전체값이라던지.

이러한 고민을 px을 굳이 알지 않아도 편리하게 반영할 수 있습니다. 중첩에 중첩을 해서 다양한 연산도 가능해보이지만,

현재 중첩 연산까지는 지원하는 브라우저가 극소수 인지라, 가볍게 쓰는걸 추천합니다.

위 단위도 IE는 9부터 지원이가능하고 밴더프리픽스를 같이 써줘야 다양한 브라우저의 하위버전에 반영이 되는 것

이 두가지 단위를 쓰실 때는 fallback (대체 스타일시트)을 같이 써줘서

해당 단위가 반영되지 않는 하위브라우저에서도 반영이 될 수 있게 해주는게 좋은 방법!

ex) .test {width:100%; width100vw;}