블로그에 설명이 굉장히 잘 되어 있다. 블로그 그림이랑 같이 봐야 이해가 쉽다
vw/vh
v = 뷰포트(보여지는 영역)를 기준으로 한다.
vw = viewport width / ex) 500px너비의 뷰포트면 1vw=5px (1%)
vh = viewport height
사용자가 브라우저 창 크기를 바꾸거나 모바일 화면을 회전시켜도 상관없이 뷰포트 영역 전체를 차지하거나 일부만 차지하는데 쓰임
예를 들어, 헤더영역 높이가 50px이고 컨텐츠 영역 높이를 '헤더를 제외한 나머지 높이 전체'로 만들고 싶다면, height: calc(100vh - 50px);을 지정해주면 됩니다.
%보다 나은 이유
height: 100%도 전체 높이를 지정할 수 있지만, 문제는 %가 부모요소를 기준으로 계산하기 때문에, secion에 100%를 주고싶으면 그 위의 body, html 모두 100%를 줘야 한다. 하지만 height:100vh는 부모높이에 무관하게 전체 영역을 차지한다.
vmin/vmax
vmin:더 작은 viewport를 기준으로
vmax:더 큰 viewport 기준으로
예를들어 1200px*600px 뷰포트라면 1vmin=1vh(높이가 작으므로)=6px이고 1vmax=1vh=12px이다
이를 잘 활용하면 언제든 화면에 보이는 요소, 그리고 언제는 화면을 꽉 채우는 요소를 쉽게 만들 수 있다.
만약 80vw80vh로 지정한 요소가 있다면, 현재 보고있는 화면에서 세로를 반으로 줄일 경우 가로인 vw에는 높이가 아무 영향이 없으므로 vw가 반응하지 않아 요소의 크기가 변하지 않는다.
따라서 잘려 보이게 되는데, (1000px1000px에서 1000px500px로 줄었다면, 300px이 잘림)
80vmin80vmin인 요소가 있다면, 높이값이 줄면 가로, 세로 중 더 작은 값을 택하기 때문에 작아진 높이 값에 반응해서 잘리지 않고 화면에 표시된다.
em/rem
em = 부모폰트를 기준으로 한 단위
1em=부모의 폰트크기.
$browser-font-size: 16;
@function em($pixels, $context: $browser-font-size) {
@return #{$pixels/$context}em;
}
.title {
font-size: em(32); // 32/16 = 2em;
}이런식으로 계산을 함수로 만들어서 필요할 때 마다 쓸 수 있다
.title { font-size: 40px; }
.title__image { width: 10em; } //40px
.title__text { font-size: 0.4em; } //16px
@media all and (max-width: 750px) {
.title { font-size: 20px ; } // 이제 .title 아래에 있는 모든 em 단위가 영향을 받습니다.
}rem=최상위 폰트를 기준으로 한 단위=relative to the root element
HTML문서에서 최상위 요소는 이다. 때문에 html의 폰트크기가 12px라면 1rem=12px이다
이를 응용하면 미디어 쿼리로 부모의 폰트요소만 바꿔주면 쉽게 반응형을 만들 수 있다
html { font-size: 62.5%; }
.image { width: 12rem; } //120px
.item { font-size: 1.6rem; } //16px
.copyright { margin-top: 5rem; } //50px
@media all and (max-width: 750px) {
html { font-size: 50%; } // 이제 문서 내 모든 rem 단위가 영향을 받습니다.
}브라우저가 지정해주는 기본 폰트 사이즈는 100% = 16px이죠.
이걸 계산하기 쉽게 62.5% = 10px로 바꿔버리는 거에요.
'1rem = html 요소에 지정된 폰트 크기'로 계산한다고 했었죠.
따라서 위 구문이 있다면 '1rem = 10px'이 됩니다.
그래서 128px = 12.8rem, 4px = 0.4rem 처럼 쓸 수 있습니다.
참조 블로그
[반응형 웹 vh,vw] https://nykim.work/85
