💻 학습 내용

🛫GIT-HUB

HTML | twitch_content
CSS | twitch_content

content

🖤 트위치는 header영역을 제외하고 content 내부 에서만 스크롤이 만들어진다. 이럴 때는 overflow-y: auto; 코드를 작성해 주면 된다.
➜ overflow-y: auto; : scroll과 비슷하며 content에서 넘치는 부분이 생겼을 때 자동으로 스크롤이 생긴다.
⭐️overflow 정리

🖤 background도 한 줄로 코드를 정리할 수 있다.

background: url(../img/notebook.jpg) no-repeat center;
background-size: cover;

➜background-size: cover;는 우리가 사용하는 이미지를 만들어진 공간에 다 채울 수 있도록 자동으로 축소 확대 해주면서 가로세로 비율은 유지된다.
웹사이트를 줄이거나 키울때 자동으로 이미지를 줄였다 커졌다 해준다.
백그라운드 포지션으로 센터를 맞춰주면 이미지의 중심부를 중앙에 넣어주게 된다.
그렇기 때문에 이미지를 제작할 때 센터에 주요 컨텐츠가 다 몰리도록 만들어 준다.
⭐️ background정리

📝 마무리

💛 오늘은 background를 통하여 이미지를 배경으로 삽입 하였다. 그리고 위에 layer를 만들어 덮어씌워주는 것을 하였는데 background 이미지에 position:relative; 작성을 실수로 빼먹었다.
그렇게 되니까 layer 부분이 content 전체 부분을 채우게 되어버렸다.
실수한 부분을 찾기 위해 선생님이 작성하신 코드와 내가 작성한 코드를 비교하면서 찾아 갔다.
background이미지를 부모태그로 정해주지 않아서 content 부분 전체를 부모로 인식하고 layer가 적용되었던 것 이다.
앞으로는 부모태그를 확실하게 작성했는지 확인하는 작업이 필요할 것으로 보인다.