[아이언스카이의홈페이지만들기] position fixed를 이용한 홈페이지 메뉴 위에 고정하는방법

홈페이지메뉴 상단에 고정하는방법

안녕하세요

아이언스카이입니다

오늘은 홈페이지 만들면서 위의 메뉴가

계속 고정되어 있게 하려면 어떻게 하는지를 포스팅할 텐데요

위 사진은 이전에 제가

홈페이지 메뉴 만드는 방법에서 사용했던 사진인데요

홈페이지 돌아다니다 보면

제가 노란박스로 된 메뉴 부분이

스크롤을 내려도 계속 상단에 떠 있는 것을 볼 수 있습니다

이 부분도 css style 부분에서 속성을 바꿔준 것 뿐이랍니다

우선 제 html 코드부터 보여드릴게요

로고부분부터 리스트로 만든 메뉴를 통틀어 <div>로 감싸 주었구요

그 <div>를 <header>라는 태그 안에 넣었습니다

일전에도 말씀드렸다시피 <header>태그는

크롬에서는 잘 적용이 되지만

만약 익스플로러로 html 을 실행시킨다면

버전에 따라 안 되는 경우가 있으니 반드시 w3schools 에서

태그 버전을 확인하시고 사용하셔야 합니다~!

그래서 웹표준에 따르면 <header>를 써서 이 부분에 상단이구나를

알려주는 것도 좋지만

굳이 <header>를 쓰지 않는 이유도 그거랍니다

대신 <div>를 쓰고 class=header 라고 넣어 주어도 되겠죠!

자

그래서 저는 로고와 메뉴 한 번에 속성을 적용시킬 거기 때문에

header 태그에다 css style을 넣었습니다

위 사진을 잘 보시면 header 부분에

노란색으로 줄 그어진 곳이 보일 겁니다

position : fixed;

width : 100%;

z-index : 9999;

width:100%

포지션기능을 사용해서 header 부분을 고정해 주었구요

만약 여기서 position만 고정시키고

넓이 100%를 넣지 않는다면 위 사진처럼 보여지게 됩니다

우선 저렇게 보이는 이유는

div 안에 있는 wrapper 라는 클래스 넓이를 1170px 로 지정해 두어서

딱 1170 넓이만큼 짤리게 되는 거구요

이런 오류를 방지하기 위해서는

포지션 fixed 를 쓸 때 반드시 width (넓이)를 100% 로 지정해 주어야 합니다 

z-index : 9999;

position을 사용할 때 또 하나 옵션으로 사용하는 게 z-index 인데요

이는 레이아웃(element) 들의 순서를 숫자로 표현해 주신다고 생각하면 됩니다

즉 포토샵을 사용해 보신 분들은 '레이아웃'이라는 단어를

들어보셨을 거예요

우리가 하는 작업들을 하나의 종이에 계속 채워나가는 게 아니라

빈 종이 레이아웃 하나

그 위에 배경색을 칠한 레이아웃 하나

그 위에 사과모양 그림이 있는 레이아웃 하나

이런 식으로 레이아웃이 켜켜이 겹쳐지면서

최종모양을 완성한다고 생각하시면 되는데요

로고와 메뉴 부분이 계속 상단에 떠 있다는 것은

레이아웃으로 따지자면 제일 맨 앞에 위치하게 한다는 것과 같은 말이구요

z-index 는 숫자가 커질수록 레이아웃이 제일 앞에 놓여지게 되므로

            9999라는 일종의 표시로 가장 앞에 위치하게 하는 것입니다

            숫자는 커질수록 윗쪽 즉, 우리가 볼 때에는 앞에 놓인 것처럼 보여지는 것이다

만약 코드를 작성하다가 

z-index : 10000 이라고 내가 설정해 놓은 부분이 있다면

더 이상 9999라고 설정해 놓은 메뉴 부분이 계속 상단에 있지 않고

10000이라고 해 놓은 부분이 더 앞에 보이게 되겠죠!

그래서 상징적으로 이 부분이 제일 앞에 보여야 하니까

9999라는 숫자를 쓴 것이랍니다~!

이렇게 해서 간단하게 메뉴 상단에 고정시키는 방법에 대해

알아보았구요

앞으로 차근차근 홈페이지 만드는방법

계속 포스팅 하겠습니다~!

그럼 오늘도 즐거운 하루 되세요~~>_<