css에서 단위를 작성할 때,
주로 사용하는 px 외에도 pt, rem, em 등과 함께
vw, vh, vmin, vmax 라는 단위도 존재한다.
각 단위는 디바이스 혹은 브라우저의 크기 즉, viewport에 비례해서
크기가 적용되는 단위이다.
1. vw (Viewport Width)
뷰포트의 너비에 비례해서 값이 적용된다.
디바이스의 높이는 고려하지 않고
디바이스의 너비가 768px인 경우
100vw는 768px이 되고 1vw는 7.68px이 된다.
2. vh (Viewport Height)
뷰포트의 높이에 비례해서 값이 적용된다.
디바이스의 너비는 고려하지 않고
디바이스의 높이가 1024px인 경우
100vh는 1024px이 되고 1vh는 10.24px이 된다.
<style>
.wrap{width:10vh; height:10vw;}
</style>
<body>
<div class="wrap"></div>
</body>768x1024 크기의 디바이스가 있다는 가정하에 (너비 768, 높이 1024)
위와 같이 .wrap 이라는 클래스의 영역에 width:10vh, height:10vw의 단위로
값을 지정하였을 경우
width는 높이 기준의 vh이기 때문에 102.4px
height는 너비 기준의 vw이기 때문에 76.8px 의 값이 지정된다.
3. vmin (Viewport Minimum)
뷰포트의 너비와 높이 중 더 작은 값이 적용된다.
<style>
.wrap{width:10vmin; height:10vmin;}
</style>
<body>
<div class="wrap"></div>
</body>768x1024 의 디바이스 사이즈 기준
위와 같이 소스를 작성하게 된다면
너비와 높이 중 너비가 더 작은 값이니 768px을 기준으로
.wrap의 width, height 값은 76.8px이 된다.
4. vmax (Viewport Maximum)
뷰포트의 너비와 높이 중 더 큰 값이 적용된다.
<style>
.wrap{width:10vmax; height:10vmax;}
</style>
<body>
<div class="wrap"></div>
</body>768x1024 의 디바이스 사이즈 기준
위와 같이 소스를 작성하게 된다면
너비와 높이 중 높이가 더 큰 값이니 1024px을 기준으로
.wrap의 width, height 값은 102.4px이 된다.
5. viewport 단위 사용시 주의사항
vw, vh, vmin, vmax와 같이 viewport 단위를 사용할 때는
브라우저 호환성을 고려해야한다. 일반적인 px이나 pt, em, rem과는 다르게
- vw와 vh의 경우 ie9+ 부터 적용이 가능하다.
- vmin의 경우 ie9에서는 vm 이라는 단위로 사용이 가능하다. (vmin -> vm)
- vmax는 ie에서는 지원이 되지 않는다.
위와 같은 주의사항이 있다.
https://caniuse.com/#search=vw
'Frontend > CSS' 카테고리의 다른 글
| [css 속성] box-sizing (0) | 2020.08.22 |
|---|---|
| [css 응용] 이미지 세로 중앙 정렬 (0) | 2020.05.23 |
| [css 속성] transition (0) | 2020.04.21 |
| [css 속성] z-index 우선순위 주기, z-index -(음수) 처리 (0) | 2020.03.31 |
| [css 속성] float (float 해제, clear) (0) | 2020.03.24 |