Erzsamatory Weblog


페이스북의 상단 메뉴바와 우측 메신저 레이어와 같이 고정된 레이어의 생성 방법에 대해서 설명하는 글입니다. 자바스크립트가 아닌 객체의 CSS 속성을 활용한 것이기 때문에 초보자도 매우 쉽게 이해할 수 있을 것입니다. 고정 레이어는 메뉴를 고정시키거나 위로가기 버튼을 만들어, 방문자가 다른 페이지에 쉽게 접근할 수 있도록 할 때 많이 사용됩니다.


CSS만을 사용하여 만드는 화면에 고정된 레이어


고정 레이어는 겉으로 보기에는 복잡해 보이지만 실제로는 매우 간단하게 만들 수 있습니다. DOM 객체의 CSS 속성 중 하나인 position 속성을 fixed로 설정하면 해당 레이어는 브라우저 화면에 고정됩니다. 이 방법을 활용하면 페이스북과 같이 고정된 레이어를 생성하여 방문자에게 더 편리한 인터페이스를 제공할 수 있습니다.

참고로 이 블로그도 고정된 레이어를 활용하고 있습니다. 상단의 메뉴 바를 웹브라우저 상단에 고정시켜 방문자가 쉽게 다른 메뉴로 이동할 수 있도록 배려하고 있습니다. 또한 모바일 버전에서는 좌측 하단에 사이드바 보기 버튼이 생성되는데, 이것 역시 방문자가 다른 메뉴로 쉽게 이동할 수 있도록 해주는 역할을 담당합니다.


예제를 통하여 쉽게 이해하기


웹브라우저 화면에 고정되는 레이어는 자바스크립트나 CSS를 통해서 만들 수 있습니다. 과거에는 자바스크립트를 이용해서 만드는 것이 주를 이루었다면, 지금은 CSS 버전의 발전으로 인하여 CSS를 좀 더 많이 사용하는 추세입니다. CSS가 자바스크립트보다 가볍고 빨리 동작하는 스크립트 언어이기 때문입니다. 이 글에서 설명하는 소스코드도 자바스크립트가 아닌 CSS를 활용하여 고정되는 레이어를 만드는 소스코드입니다.

고정된 레이어가 포함된 HTML 예제를 통해서 좀 더 쉽게 알아보도록 하겠습니다. 아래의 HTML 소스는 웹브라우저 화면의 상단에 고정된 레이어를 생성합니다. 소스코드를 보면 아시겠지만, 자바스크립트는 하나도 사용되지 않았습니다. CSS는 자바스크립트보다 간단하고 컴퓨터에서도 빠르게 처리되는 스크립트 언어이기 때문에 속도상으로도 매우 빠릅니다. 만약 자바스크립트를 사용했었다면, 스크롤바를 감지하여 상단 객체의 top 속성을 계속해서 바꾸어주어야 하는 처리가 발생됩니다. 이렇게 연속적인 계산 작업이 발생될 때에는 연산 속도가 느린 컴퓨터에서 조금 버벅되는 느낌이 들 수 있습니다. 그래서 CSS를 활용하는 것입니다. 아래의 HTML 예제를 바탕으로 고정 레이어 생성에 대해서 쉽게 알아보도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8"/>
    <title>고정 레이어 실험</title>
    <style type="text/css">
        #layer_fixed
        {
            height:35px;
            width:100%;
            color: #555;
            font-size:12px;
            position:fixed;
            z-index:999;
            top:0px;
            left:0px;
            -webkit-box-shadow: 0 1px 2px 0 #777;
            box-shadow: 0 1px 2px 0 #777;
            background-color:#ccc;
        }
    </style>
</head>
<body>
    <div id="layer_fixed">
    <table cellspacing="0" cellpadding="0" style="width:100%; height:100%;">
    <tr>
       <td style="vertical-align:middle; padding-left: 20px; padding-right: 20px;">
            고정된 레이어입니다.
       </td>
    </tr>
    </table>
    </div>
    <br /><br /><br />
    <br /><br /><br />
    <br /><br /><br />
    <br /><br /><br />
    <br /><br /><br />
    <br /><br /><br />
    <br /><br /><br />
    <br /><br /><br />
    <br /><br /><br />
    <br /><br /><br />
    <br /><br /><br />
    <br /><br /><br />
    <br /><br /><br />
    <br /><br /><br />
    <br /><br /><br />
</body>
</html>


위의 HTML 소스코드를 CSS 부분과 BODY 부분으로 나누어 설명하도록 하겠습니다. CSS 부분에서는 BODY 부분에 추가된 DIV 태그 객체에 대한 스타일을 정의하는 부분이고 BODY 부분은 웹브라우저 화면에 콘텐츠를 출력하는 부분입니다. 이 소스코드에서는 CSS 부분이 가장 중요합니다. CSS의 position 속성이 고정 레이어를 만들 때 가장 결정적인 역할을 담당하기 때문입니다.

CSS 부분에 관한 설명


#layer_fixed
{
    height:35px;
    width:100%;
    color: #555;
    font-size:12px;
    position:fixed;
    z-index:999;
    top:0px;
    left:0px;
    -webkit-box-shadow: 0 1px 2px 0 #777;
    box-shadow: 0 1px 2px 0 #777;
    background-color:#ccc;
}


CSS 부분에서 가장 중요한 것은 position 속성입니다. 이 속성이 fixed로 설정되어 있을 때 해당 객체가 웹브라우저 창에 고정됩니다. position 속성이 fixed로 설정되어 있을 때에는 left, top, right, bottom 속성을 활용하여 해당 DIV박스가 위치하는 곳을 직접 지정할 수도 있습니다. 위 예제에서는 top과 left 속성이 모두 0px로 설정되어 있으므로 왼쪽에서 0픽셀, 위에서 0픽셀 즉, 웹브라우저 상단에 레이어를 고정시키는 결과를 가져옵니다.

z-index 속성은 레이어가 다른 레이어에 대해서 어느정도의 위치에 있는지를 나타냅니다. 쉽게 말해서, 다른 레이어와 겹치는 위치를 나타내는 것인데, 숫자가 높을 수록 위쪽에 위치하게 됩니다. 워드프로세서의 [객체 맨 위로]와 같은 속성을 떠올리면 되겠습니다. 위 예제에서는 z-index 값이 999이므로 대부분의 레이어보다 항상 위쪽에 위치하게 됩니다. 따라서 어떠한 객체가 나타난다 하더라도 웹브라우저 상단에 고정된 레이어를 가리는 객체는 나타나지 않을 것입니다.

box-shadow 속성은 객체에 그림자를 만들어주는 속성입니다. 위치가 고정된 레이어에 미적인 요소를 더하기 위하여 그림자 속성을 추가하였습니다. 공중에 떠 있는 객체라는 사실을 사용자가 쉽게 인지할 수 있도록 레이어의 아래쪽에 그림자를 넣는 것이 일반적으로 사용되는 레이아웃 디자인 방법입니다. 실제로 위의 HTML을 실행하면 그림자가 나타나는 것을 확인할 수 있습니다. 하지만 CSS의 그림자 속성은 최신 브라우저에서만 지원된다는 점을 명심하십시오. 여기에서 최신 브라우저라고 하는 것은 인터넷 익스플로러 9 이상과 그에 대응되는 기타 웹브라우저를 말합니다. 구글 크롬의 경우에는 자동 업데이트가 되기 때문에 구글 크롬을 사용하고 있다면 버전에 대해서는 크게 걱정하지 않아도 됩니다. CSS3 속성을 사용하여 그림자를 만드는 방법에 대해서는 [2014/01/26 CSS3를 이용하여 그림자 만들기] 글을 참고하시기 바랍니다.


BODY 부분에 관한 설명


<div id="layer_fixed">
<table cellspacing="0" cellpadding="0" style="width:100%; height:100%;">
<tr>
    <td style="vertical-align:middle; padding-left: 20px; padding-right: 20px;">
        고정된 레이어입니다.
    </td>
</tr>
</table>
</div>


BODY 부분은 실제로 브라우저에 나타나는 내용이 입력되는 부분입니다. 위 예제에서는 앞서 설명했던 CSS에서 정의한 layer_fixed를 ID로 가지는 레이어를 생성하였습니다. 웹브라우저 화면에 고정되는 레이어는 일반적으로 DIV 태그를 사용하여 만듭니다. 이렇게 만들어진 DIV 태그는 레이어라고 부릅니다. 위 예제에서 상단에 고정될 레이어에 테이블을 삽입한 이유는 가운데 정렬을 하기 위함입니다.

테이블 내부에 각종 내용을 추가하여 멋있는 고정된 레이어를 만들 수 있습니다. 웹브라우저 상단에 고정되는 레이어에서 가장 많이 사용되는 콘텐츠는 메뉴입니다. 이 블로그에서도 상단 메뉴는 화면에 고정될 수 있도록 만들었습니다. 메뉴가 상단에 그대로 위치하게 되면 방문자는 다른 페이지로 쉽게 이동할 수 있기 때문입니다. 이렇게 하면 방문자가 해당 사이트에 좀 더 오랫동안 머무를 수 있게 할 수도 있습니다.
http://www.erzsamatory.net/trackback/27

건전한 댓글 문화를 만들어주시기 바랍니다 ^^
불건전한 댓글이 등록되는 경우 관리자의 임의적 판단으로 삭제될 수 있음을 미리 공지드립니다.

비밀글로 작성하기
  1. 2014/01/20 15:04
    위로가기 버튼을 배치할 때 유용하겠네요~ 다음에 레이아웃을 변경할 때 유용할 것 같습니다.
    감사합니다..! ^^
    • Walter E.
      Walter E.
      2014/05/06 09:58
      도움되셨다니 정말 다행입니다.
      방문해주셔서 감사합니다 ^^
  2. 하이젠버그
    하이젠버그
    2015/03/28 16:47
    메뉴 고정한다고 헤매고 헤매다가 이 글을 보고 성공했네요~
    쉽고 친절하게 설명된 글 너무 감사드립니다~^^
    • Walter E.
      Walter E.
      2015/03/28 21:08
      도움이 되셨다니 다행입니다 ^^
  3. 666
    666
    2015/04/10 19:59
    질문입니다.제가 블로그(http://hoitallica.blogspot.com/) 하나를 만들엇습니다.그런데 브라우져 창크기를 줄이니 사이드바? 이것이 이상한데로 가더군요. 그리고 헤드라고 해야하나요 상단도 이상하게(넓어짐?) 되구요.여기서 궁금한것은 브라우져 창크기를 줄이든 말든 블로그 템플릿에는 위치나 크기에 영향을 받지않게 할수는없는지요..

    제가 초보라 자세한 설명 부탁드립니다. 늘 건강하십시요.
    • Walter E.
      Walter E.
      2015/04/11 13:09
      지금 블로그를 확인해보니 반응형 레이아웃이 적용되어 있습니다.
      구글 블로거는 대부분의 레이아웃이 반응형입니다.
      창 크기에 상관 없이 동일한 레이아웃을 보여주려면, 스타일 속성에 특정한 픽셀 사이즈가 입력되어야 합니다. 하지만 반응형 레이아웃에서는 비율(%)이 입력되어 있기 때문에 창 크기에 따라 모양이 달라지는 것입니다.
      다른 레이아웃을 선택해보시기 바랍니다.
  4. 666
    666
    2015/04/11 20:24
    그렇다면 레이아웃 즉 템플릿 자체를 바꿔야 한다는말씀인가요?
    • Walter E.
      Walter E.
      2015/04/11 22:13
      그렇습니다.

      하지만 템플릿을 직접 수정하셔도 됩니다.

      CSS 파일을 보면 @media () {~} 부분이 있을 것입니다. 이 부분을 모두 삭제하면, 레이아웃이 변동되는 것을 80%는 막을 수 있습니다.

      그리고 HTML이나 CSS에서 비율(%)로 지정된 넓이나 높이를 픽셀로 고정시키면 됩니다.
  5. 666
    666
    2015/04/12 19:06
    감사드립니다 한번 해보도록 하겟습니다
  6. 666
    666
    2015/04/12 20:24
    님이 말씀하신데로 싹다지웠더니 더이상 변하지않습니다.다만 한가지 안되는것은 사이드바인데요 사이드바는 아직도 안되네요 브라우져를 줄이면 밑으로 이상한데로 가버리구요.........하지만 상단 해드부분은 고정이되었습니다.
    뭐가문제인지 모르지만 픽셀로 하는것은 제가잘몰라 포기구요 ㅠㅠ 여기까지라도 감사드립니다.
    어차피 유저들이 브라우져 창을 줄여서 인터넷을 하지는 않으니 상관없을거 같아요.


    그리고 한가지더 질문이잇습니다. 제사이트에 드롭메뉴가 잇습니다. cad-lisp이렇게 메뉴가 있고 거기다가 마우스를 가져다 대면 드롭으로 메뉴가 밑으로 내려오는데요..이상하게도 파이어폭스에서는 아주 드롭도 잘되고 드롭메뉴가 잘보입니다.그런데 익스플러러에서는 드롭메뉴에 마우스를 가져다 대면 유투부플레이리스트에 가려져버리고 또한 가려져보이는데 거기다가 드롭으로 보여지는 메뉴가 안보입니다.이것은 어찌 해야하는지요.
    • Walter Erzsa
      Walter Erzsa
      2015/04/12 23:06
      아마 CSS로 구현된 드롭다운 메뉴인 것 같습니다.

      CSS 속성에 z-index 라는 것이 있는데, 각종 레이어의 표면적 순서를 나타냅니다.
      z-index 속성의 숫자가 클수록 위쪽에 나타납니다.

      한 번 cad-lisp 메뉴의 z-index 속성을 100 이상으로 수정해보시기 바랍니다. 아니면 그 이상도 괜찮습니다.

      만약 그대로라면 인터넷익스플로러에서만 발생하는 문제로 보입니다. 유튜브가 미디어 영역이라 침범을 못 하는 수도 있겠네요...
  7. 666
    666
    2015/04/13 17:53
    정말 고맙습니다. 귀찮게 질문드려도 친절히 답변해주시고 정말 고맙습니다.건강하시고 복많이 받으세요
    • Walter Erzsa
      Walter Erzsa
      2015/05/14 00:09
      블로그 운영자로서 당연한 일을 했을 뿐입니다. ^^
  8. 흐흐흐흑..
    흐흐흐흑..
    2015/05/13 04:50
    와..드디어 찾으려는 내용을 찾았네요..ㅜㅜ 한 다섯시간 돈거 같은데 ㅜ
    감사 합니다. ㅜㅜ
    • Walter Erzsa
      Walter Erzsa
      2015/05/14 00:09
      도움이 되셨다니 정말 기분이 좋습니다. ^^
  9. 바람처럼
    바람처럼
    2015/05/14 11:26
    정말 감사드립니다.
    귀한 자료덕분에 바로 해결했습니다.
    • Walter Erzsa
      Walter Erzsa
      2015/05/15 17:58
      더 좋은 글을 많이 작성할 수 있도록 하겠습니다.