부트스트랩 - 고정형 푸터 데모

고정형 푸터는 무엇인가요?

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 부트스트랩을 사용하여 고정형 푸터 세계에 다潜入해보겠습니다. 하지만 코드를 다루기 전에, 고정형 푸터가 정확히 무엇인지 이해해보겠습니다.

Bootstrap-Sticky footer Demo

고정형 푸터는 브라우저 창 하단에 "붙어" 있는 푸터입니다. 내용물이 충분하지 않아 자연스럽게 내리지 않아도 말입니다. 마치 언제나 당신을 지지해주는 충실한 친구 같은 것입니다!

고정형 푸터를 사용하는 이유는 무엇인가요?

상대적으로 내용물이 적은 웹사이트를 만들 때를 상상해보세요. 고정형 푸터가 없다면, 페이지가 좀... 그냥 비어 보일 수 있습니다. 고정형 푸터는 내용물의 길이에 관계없이 디자인이 완벽하고 전문적으로 보이도록 해줍니다. 마치 웹 디자인 sundae에 올리는 체리 같은 것입니다!

부트스트랩으로 고정형 푸터 만들기

이제 우리가 목표로 하는 것을 알고 있으니, 손을 불쑥불쑥하고 부트스트랩을 사용하여 우리만의 고정형 푸터를 만들어보겠습니다. 초보자라도 걱정하지 마세요 - 단계별로 설명해드리겠습니다!

단계 1: HTML 구조 설정

먼저 기본적인 HTML 구조를 만들어야 합니다. 다음과 같습니다:

<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Sticky Footer Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<header>
<!-- 여기에 헤더 내용을 넣으세요 -->
</header>

<main class="flex-shrink-0">
<!-- 여기에 주 내용을 넣으세요 -->
</main>

<footer class="footer mt-auto py-3 bg-light">
<!-- 여기에 푸터 내용을 넣으세요 -->
</footer>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

이를 해부해보면 다음과 같습니다:

<html> 태그에 class="h-100"을 추가하여 뷰포트 높이의 100%를 차지하게 합니다.
<body>에 class="d-flex flex-column h-100"을 추가하여 전체 높이를 차지하는 flebox 컨테이너를 만듭니다.
<main>에 class="flex-shrink-0"을 사용하여 주 내용이 줄어들지 않도록 합니다.
<footer>에 class="footer mt-auto py-3 bg-light"을 추가하여 푸터를 하단으로 이동시키고 스타일을 적용합니다.

단계 2: 내용 추가

이제 페이지에 내용을 추가해보겠습니다:

<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">고정형 푸터 데모</a>
</div>
</nav>
</header>

<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">고정형 푸터와 고정형 네비게이션 바</h1>
<p class="lead">이 커스텀 HTML과 CSS를 사용하여 데스크톱 브라우저에서 뷰포트 하단에 푸터를 고정할 수 있습니다.</p>
</div>
</main>

<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">고정형 푸터 내용을 여기에 넣으세요.</span>
</div>
</footer>

이렇게 하면 간단한 페이지에 헤더, 주 내용, 푸터가 추가됩니다.

단계 3: 커스텀 CSS 추가

모든 것이 올바르게 보이게 하려면 약간의 커스텀 CSS가 필요합니다. <head> 섹션에 다음을 추가하세요:

<style>
main > .container {
padding: 60px 15px 0;
}
</style>

이렇게 하면 주 내용의 상단에 패딩을 추가하여 고정형 네비게이션 바 뒤에 숨겨지지 않도록 합니다.

결과

이 단계를 따라하면, 고정형 푸터가 있는 아름다운 페이지를 만들 수 있습니다! 내용물이 충분하지 않을 때 푸터가 뷰포트 하단에 고정되고, 내용물이 많아지면 화면에 맞게 내려갑니다.

일반적인 문제와 해결책

문제	해결책
푸터가 내용물과 겹침	`<main>`에 `class="flex-shrink-0"` 확인
푸터가 하단에 안 보임	`<body>`에 `class="d-flex flex-column h-100"` 확인
내용물이 네비게이션 바 뒤에 숨김	주 내용 컨테이너에 패딩 추가

결론

이제 여러분은 부트스트랩을 사용하여 고정형 푸터를 만들 수 있게 되었습니다. 마치 웹사이트에 항상 맞는 신발을 주는 것처럼입니다.

웹 개발은 연습과 실험에 대한 것입니다. 코드를 조금씩 바꿔보고, 다른 스타일을 시도하거나, 다른 부트스트랩 컴포넌트와 결합해보세요. 누가 알겠는가? 다음 큰 웹 디자인 트렌드를 만들 수도 있을 것입니다!

계속 코딩하고, 학습하고, 가장 중요한 것은 즐겁게 하세요! 다음에 만날 때까지, 친절한 이웃 컴퓨터 선생님으로부터 인사드립니다. 행복한 코딩 되세요!

Credits: Image by storyset