부트스트랩 - 고정형 푸터 네비게이션 바 데모

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 부트스트랩을 사용하여 고정형 푸터 네비게이션 바를 만드는 흥미로운 여정을 시작할 것입니다. 여러분의 친절한 이웃 컴퓨터 교사로서, 저는 이 과정을 단계별로 안내해드리며 작성하는 모든 코드를 이해하실 수 있도록 하겠습니다. 그럼 가장 좋아하는 음료를 마시며 편안하게 앉아, 이제 시작해보겠습니다!

Bootstrap-Sticky footer navbar Demo

고정형 푸터 네비게이션 바는 무엇인가요?

코딩을 시작하기 전에 우리가 이루고자 하는 것을 이해해보겠습니다. 고정형 푸터 네비게이션 바는 페이지에 있는 콘텐츠의 양이나 스크롤한 거리에 관계없이 페이지 하단에 고정된 네비게이션 바입니다. 그것은 언제나 함께하는 충실한 친구와 같은 것입니다!

고정형 푸터 네비게이션 바를 사용하는 이유는 무엇인가요?

중요한 링크나 작업에 쉽게 접근할 수 있습니다.
특히 모바일 기기에서 화면 공간을 절약합니다.
네비게이션 옵션을 항상 시각적으로 유지하여 사용자 경험을 향상시킵니다.

이제 우리가 만들고자 하는 것과 그것이 유용한 이유를 알았으니, 코드를 작성해보겠습니다!

HTML 구조 설정

먼저, 우리의 HTML 문서의 기본 구조를 설정해야 합니다. HTML에 익숙하지 않으신 분들도 걱정 마세요. 저는 각 부분을 설명해드리겠습니다.

<!DOCTYPE html>
<html lang="ko" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>고정형 푸터 네비게이션 바 데모</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">
<!-- 여기에 우리의 콘텐츠를 추가할 것입니다 -->

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

이를 해부해보면:

<!DOCTYPE html>: 브라우저에게 우리가 HTML5를 사용하고 있음을 알립니다.
<html lang="ko" class="h-100">: 우리의 페이지의 루트 요소. h-100 클래스를 추가하여 뷰포트 높이의 100%를 차지하게 합니다.
<head> 태그 내부에서:

문자 인코딩과 뷰포트를 설정합니다.
페이지에 제목을 부여합니다.
부트스트랩 CSS 파일을 링크합니다.

<body class="d-flex flex-column h-100">: 부트스트랩 클래스를 사용하여 body를 뷰포트 높이의 100%를 차지하는 fleks 컨테이너로 만듭니다.
<body>의 끝 부분에 부트스트랩 JavaScript 파일을 포함합니다.

헤더 추가

이제 페이지에 헤더를 추가해보겠습니다:

<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">고정형 네비게이션 바</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">홈</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">링크</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">비활성화</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="검색" aria-label="Search">
<button class="btn btn-outline-success" type="submit">검색</button>
</form>
</div>
</div>
</nav>
</header>

이 코드는 상단에 고정된 네비게이션 바를 생성합니다. 이 바에는 브랜드 이름, 네비게이션 링크, 그리고 검색 폼이 포함됩니다. 네비게이션 바는 작은 화면에서汉堡 메뉴로 축소됩니다.

주 콘텐츠 추가

이제 페이지에 주 콘텐츠를 추가해보겠습니다:

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

flex-shrink-0 클래스는 <main> 요소가 축소되지 않도록 하여 푸터를 아래로 밀어냅니다.

고정형 푸터 생성

이제 우리의 별이 되는 푸터를 만들어보겠습니다:

<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">푸터 콘텐츠를 여기에 두세요.</span>
</div>
</footer>

mt-auto 클래스는 푸터를 페이지 하단에 고정합니다.

커스텀 CSS 추가

모든 것이 완벽하게 작동하기 위해, 우리는 약간의 커스텀 CSS를 추가해야 합니다. <head> 태그 내부에 <style> 태그 안에 다음을 추가하세요:

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

.footer {
background-color: #f5f5f5;
}
</style>

이 CSS는 주 콘텐츠의 상단에 패딩을 추가하여 고정형 네비게이션 바 뒤에 숨겨지지 않도록 하고, 푸터의 배경색을 설정합니다.

모든 것을 함께 모음

여기서는 우리의 완전한 코드입니다:

<!DOCTYPE html>
<html lang="ko" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>고정형 푸터 네비게이션 바 데모</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
main > .container {
padding: 60px 15px 0;
}

.footer {
background-color: #f5f5f5;
}
</style>
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">고정형 네비게이션 바</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">홈</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">링크</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">비활성화</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="검색" aria-label="Search">
<button class="btn btn-outline-success" type="submit">검색</button>
</form>
</div>
</div>
</nav>
</header>

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

<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">푸터 콘텐츠를 여기에 두세요.</span>
</div>
</footer>

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

결론

이제 여러분은 부트스트랩을 사용하여 고정형 푸터 네비게이션 바를 가진 웹페이지를 성공적으로 만들었습니다. 웹 개발은 요리와 같아서 - 완벽하게 만드는 데는 연습이 필요합니다. 첫 번째 시도에서 완벽하지 않아도 실망하지 마세요. 계속 실험하고, 언제나 재미있게 코드를 작성하세요!

여러분이 배운 것의 요약:

컴포넌트	목적
HTML 구조	우리의 웹페이지의 기본 구조를 제공합니다
부트스트랩 CSS	우리에게事前 스타일된 컴포넌트와 유틸리티 클래스를 제공합니다
커스텀 CSS	우리의 페이지의 외관을 미세 조정할 수 있습니다
헤더	우리의 네비게이션 바를 포함합니다
주 콘텐츠	우리의 페이지의 주요 콘텐츠를 담고 있습니다
푸터	페이지 하단에 고정된 푸터를 만듭니다
부트스트랩 JS	인터랙티브한 컴포넌트를 활성화합니다

웹 개발의 마스터 청크는 연습과 호기심입니다. 그러니 계속 코드를 작성하고, 계속 배우며, 가장 중요한 것은 즐겁게 코드를 작성하세요! 다음에 다시 뵙겠습니다. 즐거운 코딩 되세요!

Credits: Image by storyset