홈페이지를 만드는 프로젝트를 하다가 음... 컨텐츠가 많아져 스크롤이 가능하게 되면서, 스크롤하면 완쪽에 세로로 있던 메뉴바가 슈륙 사라져버렸다. 😆
구글링해보면 해결책은 매우 간단! 한 줄이면 된다.
const MenubarContainer = styled.div`
position: fixed;
// ...
`;
그렇담 배경은? 스크롤을 하니까 아래에 빈 흰 여백만 나왔다.
구글링하니까 배경에 사진을 삽입해서 position: fixed;
로 고정한 예시만 잔뜩 나와서... 나는 색만 넣었단 말이다!!! 🥲
결론적으로
이렇게 넣으면 된다.
const AppWrap = styled.div`
background-attachment: fixed;
position: fixed;
overflow-y: scroll;
width: 100%;
// ...
`;
넘나 간단한 것 😮
CSS는 알면 진짜 쉬운데 모르면 한참을 고생이다 🤯
🐣 구글링스킬을... 키울 것!