| | at : |


Archive

[CODING] HTML Style 태그/CSS를 이용한 레이어 고정하기(Fixed Layer / CSS) 하훌 rwxr-xr-x 0 10/07/2015



[CODING] HTML Style 태그/CSS를 이용한 레이어 고정하기(Fixed Layer / CSS)

Permission rw-r--r--
Author 하훌
Date and Time 10/07/2015
Label
License 크리에이티브 커먼즈 라이선스


요즘 웹에서 자주 사용되는 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을 세팅해주면 웹 개발 시 쉽게 고정 레이어를 사용할 수 있습니다.

Share







HAHWUL
HACKING | PENETRATION-TEST | CODING
HACKERONE : GIT : 0DAY-TODAY : EXPLOIT-DB : PACKETSTORM
GOOGLE+ | HAHWUL@GMAIL.COM | TWITTER
WWW.HAHWUL.COM






Recent Post

0 개의 댓글:

댓글 쓰기