요즘 웹에서 자주 사용되는 Bootstrap이나 여러 웹사이트를 보면 상단에 메뉴가 고정된 경우가 많습니다.
오래전부터 잘 보이긴했지만, 요즘 눈에 더 들어오네요.

이렇게 웹페이지에서 특정한 레이어를 고정하는 방법은 매우 간단합니다. Style 태그나 CSS를 통하여 쉽게 레이어를 고정할 수 있습니다.

아래 #layer_fixed에 position을 fixed 로 설정하여 적용되는 구간에 대해 화면에 고정시킬 수 있습니다.

<style type="text/css">
        #layer_fixed
        {
            height:46px;
            width:100%;
            color: #000;
            font-size:12px;
            position:fixed;
            z-index:999;
          }
    </style>
    <div id="layer_fixed">
    <font size=4 color=red>고정레이어(Fixed Layer)</font>
    </div>

위 처럼 코드를 적용하게 되면 각 html 내 id 구간에서 style 속성으로 인해 강제로 지정한 위치에 페이지가 고정되게 됩니다.

position:fixed;

이 부분 때문에 페이지 고정이 이루어지죠. CSS에 미리 고정이 필요한 레이어에 대해 position을 세팅해주면 웹 개발 시 쉽게 고정 레이어를 사용할 수 있습니다.

댓글 없음:

댓글 쓰기