스티키 푸터(sticky footer)를 고정 푸터(fixed footer)와 혼동하기 쉽지만, 두 패턴은 분명히 다릅니다. 스티키 푸터는 콘텐츠가 화면을 가득 채우지 못할 경우 항상 화면 하단에 붙어 있거나, 콘텐츠가 길어질 때는 웹페이지 콘텐츠의 맨 아래에 위치하는 패턴입니다. 반면 고정 푸터는 사용자가 페이지를 스크롤하는 내내 화면 하단에 그대로 머무는 방식입니다.
아래 코드 에디터 예제를 통해 두 방식의 차이를 직접 확인해 보세요.
고정 푸터(Fixed Footer) 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sticky Footer</title>
</head>
<style>
body {
width: 100%;
margin: 0 auto;
text-align: center;
}
header {
background: orange;
height: 100px;
display: inline-block;
width: 100%;
}
p {
text-align: left;
width: 80%;
margin: 0 auto;
line-height: 5rem;
font-size: 2rem;
text-indent: 5rem;
}
footer {
background: black;
color: white;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
<body>
<header>
<h1>This is a header</h1>
</header>
<div>
<h2>This is the website content.</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Aspernatur cum aliquid nostrum dolore sunt ex exercitationem,
enim provident quia laudantium, blanditiis repellendus similique
in possimus, nisi voluptatem? Quibusdam, suscipit impedit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
veritatis doloremque recusandae similique mollitia quod impedit,
rerum inventore beatae quia vel aperiam maiores corrupti tenetur
illo praesentium repudiandae a distinctio?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta
saepe, reiciendis in maxime perspiciatis cum similique a quis
accusamus blanditiis harum voluptates at doloribus autem numquam
sint? Qui, tempora ratione!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde,
deserunt placeat? Laborum voluptates minus, adipisci odit
repellat corrupti libero! Asperiores delectus quasi debitis
mollitia eum et vel recusandae quas esse.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Molestias ad dolorem rerum suscipit eos eius libero animi omnis,
ea esse distinctio doloremque corporis, a quidem inventore sequi
nostrum aut impedit.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Suscipit quod ipsum maiores, minus non atque asperiores corrupti
placeat nulla temporibus est libero numquam ad culpa architecto
reprehenderit nemo doloribus ipsa?
</p>
</div>
<footer>
<h5>This is a fixed footer.</h5>
</footer>
</body>
</html>핵심 포인트
고정 푸터는 CSS의 position: fixed; 속성과 bottom: 0; 값을 사용해 뷰포트(화면) 하단에 고정됩니다. 이렇게 하면 스크롤 위치와 상관없이 푸터가 항상 화면에 보이게 됩니다.
스티키 푸터(Sticky Footer) 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sticky Footer</title>
</head>
<style>
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.page-header, .page-footer {
flex-shrink: 0;
}
h1, h2, h3, h4, h5 {
text-align: center;
}
.orange {
background: orange;
}
.page-body {
background: blue;
flex-grow: 1;
}
.page-body p {
text-align: left;
width: 80%;
margin: 0 auto;
line-height: 4rem;
font-size: 1.8rem;
text-indent: 4rem;
}
.black {
background: black;
color: white;
}
</style>
<body>
<div class="container">
<header class="page-header orange">
<h1>This is a header</h1>
</header>
<div class="page-body">
<h2>This is the website content.</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
</div>
<footer class="page-footer black">
<h5>This is a sticky footer.</h5>
</footer>
</div>
</body>
</html>핵심 포인트
스티키 푸터는 플렉스박스(flexbox) 레이아웃을 활용합니다. 컨테이너에 min-height: 100vh;를 지정해 최소한 화면 전체 높이를 확보하고, 본문 영역에는 flex-grow: 1;을 적용해 남은 공간을 모두 차지하게 만듭니다. 또한 헤더와 푸터에 flex-shrink: 0;을 지정해 콘텐츠가 많아져도 크기가 줄어들지 않도록 합니다.
덕분에 콘텐츠가 짧으면 푸터가 화면 하단에 딱 붙고, 콘텐츠가 길어지면 푸터가 자연스럽게 콘텐츠 아래로 밀려납니다.
결론
첫 번째 예제의 고정 푸터는 position 속성으로 화면 하단에 고정됩니다. 두 번째 예제의 스티키 푸터는 플렉스박스의 flex-grow와 flex-shrink 속성을 활용해 콘텐츠 맨 아래에 위치합니다. 각 코드 예제에서 푸터의 동작 특성이 어떻게 다른지 주목해서 비교해 보세요.
위 샌드박스 환경에서 직접 코드를 수정하며 실행해 보면 두 패턴을 훨씬 쉽게 이해할 수 있습니다. 다양한 값으로 실험하면서 자신만의 레이아웃을 완성해 보세요.