왓차 화면을 긁었는데, Home에 영화카드를 띄우면 footer와 겹친다.
background와 같은 위치 속성에 height: 100vh;
가 있었다.
따라서 화면 크기만큼만 background가 적용되고 스크롤을 내리자마자 footer 위치인데,
억지로 영화카드를 집어넣어서 영화카드와 footer가 겹치는 현상 발생
width, height가 지정X -> 자동으로 auto
지정된다.
width: auto; | height: auto; |
---|---|
요소의 부모 크기 기준으로 가득 찬다. | 요소의 자식 기준으로 자동 조절된다. |
화면에 배경 이미지를 꽉 차게 하려면?
- html body에 height: 100%;
- 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;
}