관리 메뉴

키스세븐

메뉴/팝업 등에 써먹기 좋은 "떠있는 고정 레이어"코드 만들기 본문

홈피와 블로그

메뉴/팝업 등에 써먹기 좋은 "떠있는 고정 레이어"코드 만들기

키스 키스세븐 2015. 1. 5. 00:30
공유하기 링크
필요하면 공유하세요 ^^

[저작권 정책 변경 안내]

저작권 정책이 "복사는 금지되고 링크 공유만 허용"으로 변경됩니다.

지나치게 대량 복사를 해가서 오히려 이 블로그가 검색서비스에서 억울하게 무단복사글 적용 취급을 받고 있습니다.

이에 복사를 불허하며, 또한 "이미 대량 복사를 해간 분들에게도 삭제를 요청"합니다.

그러나 링크 공유는 그대로 허용되니 참고 바랍니다.

읽은 후 마음에 드시면 즐겨찾기 하세요!

[메뉴나 팝업 등에 써먹기 좋은 "떠있는 고정 레이어" 코드 만들기] 





떠 있는 고정 레이어? 


어떤 사이트에서는 마우스 휠을 굴려서 화면을 아래로 스크롤 하더라도 상단의 메뉴가 계속 같은 자리를 차지하고 있는 것을 볼 수가 있습니다. 

또 어떤 사이트에서는 화면이 스크롤 되도 배너가 계속 같은 자리에 떠 있는 것을 볼 수가 있습니다. 

이것은 레이어를 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를 붙여 넣습니다. 


이러한 떠 있는 고정 레이어는 외국사이트의 경우 매우 유용하게 잘 활용되고 있는 것을 볼 수 있습니다. 

국내에서도 신문 사이트의 배너들이 이런 방법을 많이 사용합니다.

[저작권법 표시] 이 글의 원본: 키스세븐(www.kiss7.kr)

 


★ 이 정보가 도움이 된다면 아래의 공감을 부탁드립니다! ^^ 

(로그인 필요없음)


키스세븐지식은 키스세븐과 그룹 사이트입니다.

아래로 더 내려 가 보세요!

혹시 읽을만한 것이 또 있을지도 모르잖아요? ^^

유용하다면 즐겨찾기도 해 주세요!
http://kiss7.tistory.com

Tag
, , , , , , , , , , ,
공유하기 링크
필요하면 공유하세요 ^^
저작권법: 단,직접 복사 시에는 반드시 원문주소 표시 필수
0 Comments
댓글쓰기 폼