웹페이지 하단에 항상 고정되어 있는 푸터(fixed/sticky footer)는 스크롤을 내려도 화면 아래쪽에 계속 머물러야 하는 요소입니다. CSS의 position: fixed 속성을 활용하면 간단하게 구현할 수 있습니다.
핵심 원리
고정 푸터를 만들 때 가장 중요한 속성은 다음과 같습니다.
- position: fixed; — 요소를 뷰포트 기준으로 고정시킵니다.
- bottom: 0; left: 0; — 화면의 맨 아래, 맨 왼쪽에 배치합니다.
- width: 100%; — 화면 전체 너비를 차지하도록 설정합니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.footer {
font-size: 20px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(50, 6, 100);
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1>Fixed/Sticky Footer Example</h1>
<div class="footer">
<p>All rights reserved ©</p>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 페이지를 어디까지 스크롤하더라도 보라색 배경의 저작권 문구가 담긴 푸터가 항상 화면 하단에 고정되어 나타납니다.
추가 팁
고정 푸터를 사용할 때는 본문 콘텐츠 마지막 부분이 푸터에 가려지지 않도록 body 또는 콘텐츠 영역에 padding-bottom 값을 충분히 주는 것이 좋습니다. 예를 들어 푸터 높이가 60px라면 padding-bottom: 70px; 정도로 여유를 두면 됩니다.