sticky header와 sticky footer 만들기(html과 css으로)

코딩/web|2020. 6. 1. 13:01

안녕하세요. 비스카이비전입니다. ;D 오늘은 html과 css만으로 sticky header와 sticky footer를 만들어보도록 하겠습니다. 우선 결과물로 sticky header와 sticky footer가 무엇인지 설명드리도록 하겠습니다.

 

클릭해서 보세요.^^

 

보시는 것처럼 스크롤을 내리더라도 화면의 상단에 고정되어 있는 것을 sticky header라고 하고, 화면의 하단에 고정되어 있는 것을 sticky footer라고 합니다. sticky는 "달라붙는" 이런 뜻을 가진 단어입니다. 

 

위와 같이 레이아웃을 만드시려면 html과 css를 각각 다음과 같이 작성하시면 됩니다. 

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="header">
        sticky header
    </div>

    <p>시작!! 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 안녕하세요. 비스카이비전입니다. 끝!!</p>
    
    <div id="footer">
        sticky footer
    </div>

</body>
</html>

 

style.css

#header, #footer {
    background-color: skyblue;
    padding: 8px;
    height: 40px;
    font-size: 20px;
}

#header {
    position: sticky;
    top:0;
}

#footer {
    position: fixed;
    bottom:0;
    width: 100%;
}

body {
    margin: 0;
}

p {
    margin: 8px;
    padding-bottom: 60px;
}

 

sticky header와 sticky footer를 만드는데 있어서 핵심은 css의 position 속성을 사용하는 것입니다. 저는 sticky header를 만들 때는 position 속성의 값을 sticky로 해줬고, sticky footer를 만들 때는 fixed로 해줬습니다. 그리고 top: 0과 bottom:0으로 각각 상단과 하단에 위치할 것을 명령해줬습니다. 

 

sticky header와 sticky footer는 웹페이지 뿐만아니라 웹뷰앱을 만들 때 활용해도 좋을 것 같습니다. 

  1. BlogIcon IT's me 2020.06.01 15:17 신고 댓글주소  수정/삭제  댓글쓰기

    그냥 고정 헤더, 고정 푸터라고 말했었는데 스티키 헤더와 스티키 푸터 용어 잘 알아갑니다. ^^.

  2. BlogIcon 동네공대형 2020.06.01 15:37 신고 댓글주소  수정/삭제  댓글쓰기

    제가 쓰는 스킨도 헤더가 고정되는 형태더라구요. fixed로 되어 있어서 sticky하고 fixed 차이 찾다가 뷰포트가 나오고 스크롤박스가 나오고.. 점점 혼미해지다가... 갑니다. 그래도 동작 원리(개념)은 알고 갑니다. 감사합니다. ^^

  3. BlogIcon 꾸만꾸 2020.06.17 11:20 신고 댓글주소  수정/삭제  댓글쓰기

    IE에선 sticky가 안되는거 참고하세욤ㅠㅠ