[메뉴나 팝업 등에 써먹기 좋은 "떠있는 고정 레이어" 코드 만들기]
떠 있는 고정 레이어?
어떤 사이트에서는 마우스 휠을 굴려서 화면을 아래로 스크롤 하더라도 상단의 메뉴가 계속 같은 자리를 차지하고 있는 것을 볼 수가 있습니다.
또 어떤 사이트에서는 화면이 스크롤 되도 배너가 계속 같은 자리에 떠 있는 것을 볼 수가 있습니다.
이것은 레이어를 fixed로 띄워서 놓았기 때문입니다.
브라우저 상에서의 고정 좌표를 지정하여서 계속 그 좌표에 있게 하면 아무리 화면이 움직여도 자리가 변하지 않습니다. 계속 같은 자리에 떠 있으면서 고정되는 레이어이기 때문입니다.
화면 디자인용이나, 배너용, 메뉴용 등으로 자주 활용되는 떠 있는 고정 레이어의 소스코드에 대해 알아 보도록 하겠습니다.
CSS에서의 모양을 정하는 코드
기본적인 떠 있는 고정 레이어 소스코드는 이런 구조입니다.
#fixed_layer
{
position:fixed;
z-index:우선순위;
height:세로길이px;
width:가로길이%;
top:상하위치px;
left:좌우위치px;
}
- position에 fixed가 주어진 것이 핵심입니다. 이것 때문에 계속 같은 자리를 차지하고 있는 것입니다.
- z-index는 다른 레이어 때문에 가려져서 안 보이지 않도록 맨 앞으로 지정하는 것입니다.
- height와 width가 레이어의 크기를 조절하는 것입니다.
- top와 left는 어디 쯤에 배치할 것인가를 지정하는 것입니다.
홈페이지라면 style.css 파일을 불러서 열고, 블로그라면 html/css 관리자 페이지로 가서 아래의 내용을 추가해 줍니다.
#fixed_layer
{
position:fixed;
z-index:1000;
height:50px;
width:100%;
top:0px;
left:0px;
-webkit-box-shadow: 0 2px 2px 0 #cccccc;
box-shadow: 0 2px 2px 0 #cccccc;
background-color:#ffbb00;
color: #000000;
font-size:10px;
}
- box-shadow는 레이어에 그림자를 주는 것입니다. 그래야 진짜 떠 있는 느낌을 줍니다.
- -webkit-box-shadow는 브라우저 마다 모양의 차이가 생기는 것을 방지해 줍니다.
- background-color는 레이어의 바탕색이고, color는 레이어 안의 글자의 색상입니다.
HTML문서에서 레이어를 보이게 하는 소스코드
위의 CSS코드는 그저 모양과 위치만을 지정하는 소스입니다.
실제로 홈페이지 문서에 이 레이어가 나타나도록 하려면 <div>태그로 레이어를 만들어 줘야 합니다.
<div>의 구조는 매우 간단합니다.
<div id="레이어의 이름">
내용이나 이미지 태그
</div>
홈페이지라면 원하는 html 또는 php의 문서를 열어서 입력하면 되고, 블로그라면 html 관리자 페이지에 들어가서 아래의 입력해 주면 됩니다.
<div id="fixed_layer">
메뉴레이어 입니다.
<img src="www.0.com/1.jpg">
</div>
- div id에는 CSS에서 정한 이름을 복사해서 넣습니다. 이름이 다르면 적용이 안 됩니다.
- img태그의 이미지 경로는 자신의 이미지 URL를 붙여 넣습니다.
이러한 떠 있는 고정 레이어는 외국사이트의 경우 매우 유용하게 잘 활용되고 있는 것을 볼 수 있습니다.
국내에서도 신문 사이트의 배너들이 이런 방법을 많이 사용합니다.
★ 이 정보가 도움이 된다면 아래의 공감을 부탁드립니다! ^^
