vw, vh, vmin, vmax, max-width 등 크기를 지정하는 단위

지난번에 width, height를 이용해서 크기를 지정해봤고 그 이전엔 %, em 등 다양한 단위를 적용할 수 있었다. 이번엔 또 다른 단위를 알아보도록 하자.
뷰포트라는 단어가 있다. 쉽게 말하자면 웹 페이지가 표시되는 영역을 뜻한다.
이 단어를 언급한 이유는 이번에 배울 요소의 크기를 정할 때 쓰이는 단위 때문이다.

1. vw : 1vw는 뷰포트의 넓이의 1% 뷰포트의 넓이가 100px이면 1vw = 1px

2. vh : 1vh는 뷰포트의 높이의 1% 뷰포트의 높이가 200px이면 1vh = 2px

3. vmin : 넓이가 300px, 높이가 500px인 뷰포트가 있다고 치자 넓이가 더 작기 때문에 vmin은 넓이가 기준이 된다. 해당 예시에서 1vmin = 3px이 된다.

4. vmax : 위의 예시를 그대로 적용하면 vmax는 높이가 된다. 그 예시에서 1vmax = 5px이 된다.

1~4의 항목들은 꼭 넓이 높이에만 적용할 수 있는 수치가 아니다.

5. max-width : 요소의 최대 넓이를 지정한다. 지정 넓이 초과해서 커질 수 없게 제한된다.

6. min-width : 요소의 최소 넓이 지정. 지정 넓이 미만으로 안작아진다.

7. max-height : 요소의 최대 높이 지정. 지정 높이 초과할 수 없다.

8. min-height : 요소의 최소 높이 지정. 지정 높이 미만으로 작아질 수 없다.