한국어

Bootstrap 튜토리얼

Bootstrap 레이아웃

Bootstrap 콘텐츠

Bootstrap 컴포넌트

Bootstrap 폼

부트스트랩 도우미

Bootstrap 유틸리티

Bootstrap 데모

부트스트랩 - 헤더 데모

헤더는 무엇인가요?

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 부트스트랩 헤더의 흥미로운 세상으로 뛰어들어보겠습니다. 하지만 먼저, 기본적인 것부터 시작해보겠습니다. 책을 읽고 계신가요? 각 장의 시작 부분에서 가장 먼저 보는 것은 무엇인가요? 맞아요, 헤더입니다! 웹 디자인에서 헤더는 비슷한 목적을 가집니다.

Bootstrap - Headers Demo

헤더는 일반적으로 웹 페이지의 가장 상단 부분으로, 중요한 导航 요소, 브랜딩, 그리고 때로는 중요한 정보나 콜 투 액션을 포함합니다. 웹사이트의 온boarding 맞춤형 매트와 같아, 방문자를 환영하고 그들이 방향을 찾아갈 수 있게 도와줍니다.

왜 헤더가 중요한가요?

헤더는 다음과 같은 이유로 매우 중요합니다:

  1. 웹사이트 전체에 일관된 외관을 제공합니다.
  2. 导航과 사용자 경험을 개선합니다.
  3. 브랜드 아이덴티티를 강화합니다.
  4. 사이트의 SEO(검색 엔진 최적화)를 향상시킬 수 있습니다.

이제 헤더가 무엇이고 왜 중요한지 이해했으므로, 부트스트랩이 우리에게 어떻게 매력적인 헤더를 쉽게 만들어 줄 수 있는지 보겠습니다!

부트스트랩 헤더 시작하기

코드로 들어가기 전에, 프로젝트에 부트스트랩을 포함했는지 확인해 주세요. 이전에 이를 해보지 않았다면, 걱정하지 마세요! 매우 간단합니다. HTML 파일에 몇 줄을 추가하는 것입니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Headers Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Your header will go here -->

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

이 코드는 기본적인 HTML 구조를 설정하고 부트스트랩의 CSS와 JavaScript 파일을 포함합니다. 헤더 퍼포먼스의 무대를 설정하는 것으로 생각해 보세요!

간단한 헤더 만들기

먼저 간단한 헤더를 시작해보겠습니다. 부트스트랩의 네비게이션 바 컴포넌트를 기반으로 사용할 것입니다:

<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>

이를 설명해보겠습니다:

  • <header>: 이는 전체 헤더 섹션을 감싸고 있습니다.
  • <nav class="navbar navbar-expand-lg navbar-light bg-light">: 이는 큰 화면에서 확장되는 밝은 색상의 네비게이션 바를 만듭니다.
  • <div class="container">: 이는 콘텐츠를 중앙에 정렬하고 반응형 패딩을 제공합니다.
  • <a class="navbar-brand">: 이는 일반적으로 로고나 웹사이트 이름을 넣는 곳입니다.
  • <button> 요소는 모바일 뷰에 대한 토글 버튼을 만듭니다.
  • <div class="collapse navbar-collapse">: 이는 작은 화면에서 접히는 메뉴 항목을 포함합니다.
  • <ul class="navbar-nav ms-auto">: 이는 导航 항목의 목록을 만들고 오른쪽에 정렬합니다.

헤로 섹션 추가하기

헤더를 더욱 인상적으로 만들기 위해, 네비게이션 바 바로 아래에 헤로 섹션을 추가해보겠습니다:

<header>
<!-- Previous navbar code here -->

<div class="bg-primary text-white py-5">
<div class="container">
<h1 class="display-4">Welcome to My Website</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<a class="btn btn-light btn-lg" href="#" role="button">Learn more</a>
</div>
</div>
</header>

이 코드는 파란 배경색과 白色 텍스트, 큰 제목, 문단, 그리고 콜 투 액션 버튼을 생성합니다. 헤더에 스포트라이트를 추가하여 가장 중요한 메시지를 강조하는 것입니다.

반응형으로 만들기

부트스트랩의 가장 좋은 점 중 하나는 내장된 반응성입니다. 우리의 헤더는 자동으로 다양한 화면 크기에 조정됩니다. 하지만 이를 더욱 향상시킬 수 있습니다:

<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Previous navbar content -->
</nav>

<div class="bg-primary text-white py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<h1 class="display-4">Welcome to My Website</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<a class="btn btn-light btn-lg" href="#" role="button">Learn more</a>
</div>
<div class="col-lg-6 d-none d-lg-block">
<img src="path/to/your/image.jpg" alt="Header image" class="img-fluid rounded">
</div>
</div>
</div>
</div>
</header>

이 코드는 큰 화면에서는 텍스트와 이미지를 두 개의 열로 나누고, 작은 화면에서는 이미지를 숨깁니다. 이렇게 하면 깔끔한 레이아웃을 유지할 수 있습니다.

고정 헤더

사용자가 스크롤할 때 헤더가 화면 상단에 고정되기를 원하신다면, fixed-top 클래스를 네비게이션 바에 추가하세요:

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<!-- Navbar content -->
</nav>

고정 헤더를 사용할 때, 콘텐츠가 헤더 뒤에 숨겨지지 않도록 몸체에 패딩을 추가해야 합니다:

<style>
body {
padding-top: 56px;
}
</style>

헤더 커스터마이징

부트스트랩은 좋은 시작점을 제공하지만, 자신만의 스타일을 추가하지 않는 것은 두려워하지 마세요! 다음은 헤더를 커스터마이즈하는 예제입니다:

<style>
.custom-header {
background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
}
.custom-header .navbar-brand,
.custom-header .nav-link {
color: white !important;
}
.custom-header .nav-link:hover {
color: #f8f9fa !important;
}
</style>

<header class="custom-header">
<!-- Your header content -->
</header>

이 CSS는 아름다운 그라디언트 배경을 만들고 모든 텍스트를 白色로 만들어 가독성을 높입니다.

결론

이제 여러분은 부트스트랩 헤더의 세상을 여행했네요. 간단한 네비게이션 바에서 눈에 띄는 헤로 섹션까지. 기억해야 할 점은, 최고의 헤더는 단지 보기 좋을 뿐만 아니라 사용자에게 잘服务的 것입니다. 그래서 실험을 두려워하지 마시고, 웹사이트에 가장 잘 맞는 것을 찾아보세요.

이제 우리가 사용한 부트스트랩 클래스의 빠른 참조 표입니다:

Class Purpose
navbar 네비게이션 컴포넌트를 만듭니다
navbar-expand-lg 브레이크포인트에서 네비게이션 바가 확장되는 것을 결정합니다
navbar-light 네비게이션 바에 밝은 색상 테마를 설정합니다
bg-light 배경색을 밝게 설정합니다
container 콘텐츠를 중앙에 정렬하고 반응형 패딩을 제공합니다
navbar-brand 브랜드/로고 영역을 스타일링합니다
navbar-toggler 모바일 뷰에 대한 토글 버튼을 만듭니다
collapse navbar-collapse 접히는 네비게이션 콘텐츠를 감싸는 요소입니다
navbar-nav 전체 높이와 가벼운 무게의 导航을 스타일링합니다
nav-item 각 导航 항목을 스타일링합니다
nav-link 네비게이션 바의 실제 링크를 스타일링합니다
fixed-top 네비게이션 바를 화면 상단에 고정합니다
bg-primary 주요(보통은 파란색) 배경색을 설정합니다
text-white 텍스트 색상을 白色로 설정합니다
display-4 큰, 눈에 띄는 제목을 만듭니다
lead 문단을 강조하기 위한 스타일입니다
btn btn-light btn-lg 큰, 밝은 색상의 버튼을 만듭니다

계속 연습하고, 호기심을 가지고 있으면 곧 당신도 훌륭한 헤더를 만들 수 있을 것입니다. 행복한 코딩!

Credits: Image by storyset

이전 튜토리얼:
Bootstrap - 캐러셀 데모
다음 튜토리얼:
Bootstrap - 푸터 데모