height의 %값 비율로 적용하기

%단위는 부모요소의 크기를 기준으로 해당 %만큼의 크기를 계산해서 적용하겠다는 뜻이다.

width의 %단위는 우리가 생각한대로 자연스럽게 적용이 되지만,

height의 적용은 사뭇 다르다.

왜냐하면 height은 애초에 자식의 height값을 기준으로 부모의 height값이 정해지기 때문이다.

그런데 웹디자인을 하다보면 브라우저 창을 기준으로 height값을 정하고 싶을 때가 종종 있다.

예전에는 html에 height을 100%로 주고 해당 요소뿐만 아니라 그 요소에 도달할 때까지 거치는 부모요소들도 전부 height:100%를 줘서 상속을 받게한다.

이는.... 굉장히 보기 불편하고 소모적이다.

요즘에는 간편하게 vh라는 단위가 나왔다. viewport height인데, 뷰포트 값을 기준으로 퍼센트단위로 height이 정해진다.

이젠 height: 100% 대신 height: 100vh를 써보자.