Height가 0이 되는 문제
문제 상황
css에 좌우로 요소를 나누기 위해 하위 div에 float: left를 썼더니 부모 div의 height가 0이 되는 상황이 발생했다
해결
부모 요소에 display:inline-block 또는 overflow: hidden 스타일을 주면 자식을 포함하는 height가 된다
- display: inline-block을 쓰면 자식 요소의 콘텐츠가 차지하는 만큼 부모의 width가 정해짐
- overflow: hidden을 쓰면 자식 요소의 블록이 차지하는 만큼 부모의 width가 정해짐
참고: https://zetawiki.com/wiki/CSS_%EB%B6%80%EB%AA%A8_height_0_%EB%90%98%EB%8A%94_%ED%98%84%EC%83%81
배경 그림이 화면 전체에 맞지 않음
문제 상황
배경에 그림을 넣고 창을 늘렸다 줄였다 하면 그림이 그에 맞춰 자동으로 크기가 조절되도록 하고 싶었다
처음에는 background-size: 100vw를 썼는데 그림이 처음 창 크기에 잘 맞고 화면을 늘리면 잘 늘어났으나 가로 스크롤이 있을 경우 처음에 보이지 않았던 부분에는 그림이 적용이 안됨
해결
background-size: cover을 사용해서 해결
개발자 준비생