[css] 100vh를 활용하여 화면에 배경이 꽉 차게 만들기

100vh와 100%를 이용하여 콘텐츠 흐름에 따라 배경이 따라갈 수 있게 제작하기

<section class="wrap">
 <div class= "main">
  컨텐츠
 </div>
</section>

✅html
1) 배경을 넣을 section에 클래스명 wrap선언
2) div로 콘텐츠 내용을 작성 후 클래스명 main선언

.wrap {
 background: black;
 height: 100%;
}
.main{
 min-height: 100vh;
}

✅css
1-1) wrap에 배경 색을 넣어준다
1-2) 높이 100%를 지정해준다

2-1) main 콘텐츠 최대 높이를 100vh로 지정해준다

✔️배경 높이를 100% 콘텐츠 높이를 100vh 설정 시 콘텐츠 높이보다 화면 높이가 작아지면 스크롤이 생기며 배경 높이가 따라오지 못함
✔️배경 높이를 100vh 콘텐츠 높이를 100% 설정 시 콘텐츠 높이가 화면 높이보다 작으면 배경 높이가 콘텐츠에 맞춰져 하단에 빈 공간이 생김
✔️ 높이가 아닌 최소 높이를 100vh를 설정하여 해결