문제

왓차 화면을 긁었는데, Home에 영화카드를 띄우면 footer와 겹친다.

원인

background와 같은 위치 속성에 height: 100vh;가 있었다.

따라서 화면 크기만큼만 background가 적용되고 스크롤을 내리자마자 footer 위치인데,

억지로 영화카드를 집어넣어서 영화카드와 footer가 겹치는 현상 발생

auto

width, height가 지정X -> 자동으로 auto 지정된다.

%

화면에 배경 이미지를 꽉 차게 하려면?

1. html body에 height: 100%;
2. viewport height인 vh

<div class="cover">wow</div> 

body {
    margin: 0;
}
.cover {
    height: 100%;
}

height의 %: 부모의 height를 받겠다.

=> cover의 부모는 body, 즉 body의 height에 따라 결정

=> body의 height는 자식 기준(cover)으로 자동 조절, 즉 cover의 높이만큼 설정

=> body 추가 (body의 부모인 html까지 100% 주기)

body {
    margin: 0;
}
html, body {
    height: 100%;
}
.cover {
    height: 100%;
}

=> 또는 다른 단위 쓰기 viewport

viewport: 화면 자체

viewport height = vh

.cover {
    height: 100vh;
}