이렇게 나오는 이유는 ?
width: auto 👉 요소의 부모 크기 기준으로 가득찬다.
✅ cover의 부모인 body의 넓이만큼 cover의 width가 결정이 된다.
height: auto 👉 요소의 자식 높이 기준으로 자동 조절된다.**
✅wow 텍스트 높이만큼 설정되어있음.
🤷🏻♀️ 근데!!! 이러면 안됨.. 왜 안될까잉?ㅎㅎ
%의 의미는 ❗ 부모 height 즉,
body를 받겠다.body의 height에 따라서 .cover의 height 가 결정됨.
어 잠깐, body는 전체 영역 아니야? 왜 이렇게 좁아,,
width: auto 👉 요소의 부모 크기 기준으로 가득찬다.
height: auto 👉 요소의 자식 높이 기준으로 자동 조절된다.
이 조건에 부합하기 때문이다~
👀 즉 ,body는 body의 자식인 .cover 의 높이만큼 설정된다는 것(서로를 기준으로 삼고 있는 상황이라는 것~)
🐰 나름의 해결방법
- body,html에 height:100%;를 주자. (꼼수 쓰는 것)
- .cover에 height: 100vh(100 viewport height)
IE 9버전부터 가능
🧲 참고
background-size: cover;
background-position: center;이미지 반복없이 배경하기에 적절한 코드이다.
추가로, can I use 에서 사용이 가능한지 확인하는 습관을 기르자.
또한, px로 주는건 위와 해당 안되는 것 같다 ㅎㅎㅎㅎㅎ
