CSS | <nav> 상단에 고정시키는 방법

예전에 했던 클로닝을 다시한번 복습중인데 또 다른 어려움에 봉착했습니다. 분명 예전에 배웠던 건데 아직도 익숙하지 않아서 똑같은 지점에서 헤매는 상황이에요. 바로 네비게이션 메뉴를 고정시키는 것입니다. 원하는 모양은 웹페이지를 스크롤해서 화면을 내려도 계속해서 메뉴가 상단에 고정되도록 하는 거에요. 

 

현재까지 완성시킨 모습은 다음과 같습니다. 

 

display: inline-block을 이용해서 각각의 메뉴들을 가로로 정렬시켰고, 각각 메뉴의 ul, li의 여백들을 없앤 상태로 개별 메뉴인 li에 오른쪽, 왼쪽 여백을 15px씩 줬습니다.

 

지금까지 모습에 해당하는 CSS는 이러합니다.

 

지금부터는 상단에 메뉴를 고정시키는 작업을 할거에요.

어떤 CSS를 활용해야할까요?

 

 

 

바로 position입니다. 

Positon

position 속성은 요소가 어떻게 위치하는지에 대한 방법을 지정합니다. 이에 5가지 값을 적용할 수 있습니다.

• static
• relative
• fixed
• absolute
• sticky

이 중에서 상단에 메뉴를 고정시키는 방법으로 활용할 값은 fixed 입니다.

 

네비게이션 값 전체에 적용해야 하므로

 

 

nav{      position: fixed;   }

 

요렇게 적용해줍니다. 

그리고 나서 새로고침을 누르면, 

 

fixed 적용 후

 

오잉 왜 다 왼쪽으로 다 쏠려있는 것인가요?

 

 

 

하지만 스크롤해 보면 네비게이션 메뉴는 상단에 고정되고 아래쪽의 웹페이지만 이동하는 것을 확인할 수 있습니다.

메뉴가 마치 화면 아래쪽에 깔려있는 상태로 고정되어 있는 것 처럼요.

 

고정은 잘 작동됨

 

그래서 추가로 필요한 건 네비게이션 메뉴가 아래쪽의 화면보다 더 앞으로 튀어나오도록 설정하는 건데,

그 위치를 바꿔주는 역할을 하는 게

z-index 입니다.

 

Z-index

z-index 속성은 요소가 어떻게 쌓일지를 결정하는 것입니다. 마치 종이를 차곡차곡 한장한장 쌓는 것 처럼요. 이때 어떤 것을 상단에 쌓을지를 결정할 수 있게 하는 거라고 보시면 될거 같아요.

또한 z-index는 position 속성과만 사용됩니다. 

position: absolute, position: relative, position: fixed, or position: sticky 를 지정하고 z-index에 숫자를 지정해줍니다.

z-index: 0; 가 기본 값이고, 숫자가 커질수록 앞으로 나오게 됩니다.

 

말하자면, 화면을 뚫고 저 뒤쪽에서 내쪽을 향해 긴 직선이 있을 때 화면 표면은 0, 화면 뒤쪽으로 움직이는 건 음수, 화면 앞쪽으로 움직이는 건 양수로 그래프 상에서 이동시킨다고 상상해 보면 될 거 같아요.

 

결과적으로, 제가 적용시킨 건

z-index: 1; 이고 결과는 다음과 같아요. 

 

 

화면을 스크롤해서 내렸지만 네비게이션 메뉴가 앞에 있으면서 고정된 상태로 되었네요!!

 

 

 

여기서 추가로 메뉴가 화면상단에 꽉 차도록 width: 100%;만 설정해주면 되겠습니다.

 

완성!!

오호호호호 이렇게 하여 

 

 

네비게이션 <nav> 메뉴를 상단에 스크롤 내림과 관계없이 고정시킬 수 있게 되었네요!