[TIL : 30] CSS Menubar, 배경색 고정

홈페이지를 만드는 프로젝트를 하다가 음... 컨텐츠가 많아져 스크롤이 가능하게 되면서, 스크롤하면 완쪽에 세로로 있던 메뉴바가 슈륙 사라져버렸다. 😆
구글링해보면 해결책은 매우 간단! 한 줄이면 된다.

const MenubarContainer = styled.div`
  position: fixed;
  // ...
`;

그렇담 배경은? 스크롤을 하니까 아래에 빈 흰 여백만 나왔다.
구글링하니까 배경에 사진을 삽입해서 position: fixed;로 고정한 예시만 잔뜩 나와서... 나는 색만 넣었단 말이다!!! 🥲
결론적으로
이렇게 넣으면 된다.

const AppWrap = styled.div`
  background-attachment: fixed;
  position: fixed; 
  overflow-y: scroll;
  width: 100%;
  // ...
`;

넘나 간단한 것 😮

CSS는 알면 진짜 쉬운데 모르면 한참을 고생이다 🤯

🐣 구글링스킬을... 키울 것!