메뉴바 고정시키기

• 스크롤을 움직여도 고정되는 메뉴바를 만들어보자!

/*메뉴바*/
.btns {
    position: fixed;
    top: 0;
    width: 100%;
}

스크롤에 영향을 받지 않고 특정 지점에 고정될 수 있도록 원하는 영역의 position을 fixed로 고정시킨다.

고정시키고싶은 위치 조정

• top이 0인 이유 : 화면 상단에 빈틈없이 고정하기 위해
• width가 100%인 이유 : 화면 양측에 꽉 차게 하기 위해

🚨 만약! 메인 body의 윗 부분이 고정바 뒤로 들어가서 일부가 보이지 않을 경우 body 부분만큼 padding 값으로 해결할 수 있다.