<HTML/CSS>이쁜 메뉴바 만들기 (sticky) (fixed)

보통의 웹사이트를 보면 화면 상단에 메뉴바가 되었든 사이트의 로고가 되었든 우리가 스크롤을 내리면 밑으로 따라 내려오는 것을 볼 수가 있다. 처음 CSS를 배웠을 때 엄청 배우고 싶었고 그만큼 자주 쓰고 있으니 한 번 알아보도록 하자.

 

See the Pen NWxrVOr by Sang Hoon Jeong (@DevilFront) on CodePen.

 

 

자 배운대로 스티키를 써 봤지만 그냥 sticky만 선언해주면 안되고 무조건 top, left,right 등 하나이상의 위치속성으로 나타내는 것이 필요하다. 단순히 스티키를 써주면 안되고 따라 내려오는 지점이 어딘지를 top 속성등을 이용해서 나타내주면 된다. 필수다 필수!

 

See the Pen GRoqaPK by Sang Hoon Jeong (@DevilFront) on CodePen.

 

하지만 이렇게 해도 안되는 걸 확인 할 수 있을 것이다. 그 이유는 바로 sticky로 지정해줄 블록은 어느 다른 블록안에 속해 있으면 안 된다. container클래스 안에 있는 상태에서 밖으로 빼내주기만 해보자

 

See the Pen dyGXEwr by Sang Hoon Jeong (@DevilFront) on CodePen.

성공적으로 작동하는 것을 볼 수 가 있다. 또다른 비슷한 개념으로 position:fixed;를 예로 들 수 있는데 sticky와의 차이점이라고하면 브라우저 화면상에 위치를 지정해주면 화면이 내려가거나 올라가는 것에 상관없이 그 자리를 유지하는 속성이다. 사용법만 알고 넘어가자

 

See the Pen JjGKqVe by Sang Hoon Jeong (@DevilFront) on CodePen.

 

이 둘의 차이점을 확실히 알고 넘어가면 이쁜 페이지를 구현하는데 도움이 될 것이당><!