요새 많이 쓰이는 단위 정리 (vh/vw/calc)

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

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

 

1. vw, vh

width:100vw; height:100vh;

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

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

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

​

위의 단위를 쓴 저의 구체적 사례로는,

브라우저의 전체화면에 풀 이미지를 넣어야하는 경우였는데 height:100%를 쓰지 않고, height:100vh를 썼습니다.

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

​

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

브라우저 버전 지원은 http://www.w3schools.com/cssref/css_units.asp 해당 링크를 통해 확인 하실 수 있습니다.

 

 

- 20180718 update

vw로 폰트사이즈에 작업을 해보니 반응형에서 좋은듯, 안좋은 듯한 단위.

일단 미디어쿼리로 모바일 버전 한번만 선언해도 되니 편하다.

*문제는 pc에서 320 px 이하로 갔을때가 문제. 브라우저 가로 크기를 100%로 인지하는 vw 이기 때문이다.

브라우저를 320px 이하로 줄였을 경우, 가로 스크롤이 생기게 해뒀는데

역시나 줄어든 가로를 100% 로 인지하기 때문에 글자는 계속해서 줄여져 나간다.

즉, 미디어쿼리로 320px 단위에서 한번 더 선언을 해줘야 될 것으로 보인다.

만약에 나라면?

반응형시 딱딱 줄어드는 글자들이 싫다면 추천한다.

​

 

2. calc()

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

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

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

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

현재 중첩 연산까지는 지원하는 브라우저가 극소수 인지라, 가볍게 쓰는걸 추천드리고 싶습니다. (1차 연산정도로)

​

이 또한 IE는 9부터 지원이 가능하고 밴더프리픽스를 같이 써줘야 다양한 브라우저의 하위버전에 반영이 되는 것으로 알고있습니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/calc 이페이지로 지원가능한 브라우저에 대해서 확인 하실 수 있습니다.

​

​

​

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

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

 

.test {width:100%; width:100vw;} /* 예 */

 

 

 

 

 

*좋아요와 댓글은 힘이 됩니다.