오늘은 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는 웹페이지 뿐만아니라 웹뷰앱을 만들 때 활용해도 좋을 것 같습니다.
'Dev > HTML, CSS' 카테고리의 다른 글
| div 요소 테두리 그리기(css) (0) | 2020.07.04 |
|---|---|
| 태그(tag)와 요소(element) 용어 정리 (0) | 2020.07.03 |
| html 문서 내 의 의미는? (0) | 2020.06.19 |
| css로 이미지 가운데 정렬하는 두 가지 방법 (0) | 2020.06.18 |
| 그라데이션 효과 주기(css) (1) | 2020.06.02 |
| 반응형 웹페이지 기본 틀 만들기(그리드, 미디어쿼리 활용) (0) | 2020.05.26 |
| php 변수값을 javascript 변수에 대입하려면? (0) | 2020.05.20 |
| HTML, CSS, JAVASCRIPT, PHP 주석 처리 (0) | 2020.05.13 |