Bootstrap - 사이드바 데모

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 Bootstrap 사이드바의 세계에 흥미로운 여정을 떠납니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 저는 이 주제를 안내해 드리는 것을 기쁘게 생각합니다. 그러니 마음에 드는 음료를 한 잔 챙기고 편안하게 앉아, 이제 시작해 보겠습니다!

Bootstrap - Sidebars Demo

사이드바는 무엇인가요?

코딩을 시작하기 전에, 사이드바가 정확히 무엇인지 이해해 보겠습니다. 책을 읽고 계신 중에, 페이지 옆에 좁은 열이 추가 정보나 빠른 링크를 제공하는 것을 상상해 보세요. 그게 바로 웹 디자인에서의 사이드바입니다!

사이드바는 일반적으로 웹 페이지의 왼쪽이나 오른쪽에 배치된 수직 열입니다. 이곳에는 навіgаtіоn 링크, 추가 정보, 또는 주요 콘텐츠 영역을 보완하는 다른 콘텐츠가 포함됩니다. 사이드바는 정보를 조직하고, 중요한 요소에 빠르게 접근할 수 있게 함으로써 사용자 경험을 향상시킵니다.

Bootstrap으로 기본 사이드바 만들기

이제 사이드바가 무엇인지 알았으니, Bootstrap을 사용하여 하나 만들어 보겠습니다. 간단한 예제부터 시작하고 점진적으로 확장해 나갈 거예요.

단계 1: HTML 구조 설정

먼저, 우리는 HTML 구조를 설정해야 합니다. 다음은 기본 템플릿입니다:

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 사이드바 데모</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- 사이드바 -->
<div class="col-md-3 sidebar">
<!-- 사이드바 콘텐츠는 여기에 들어갑니다 -->
</div>
<!-- 주요 콘텐츠 -->
<div class="col-md-9 main-content">
<!-- 주요 콘텐츠는 여기에 들어갑니다 -->
</div>
</div>
</div>

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

이 템플릿에서 우리는 컨테이너에 두 개의 열을 만들었습니다: 사이드바(3 유닛 넓이)와 주요 콘텐츠(9 유닛 넓이). Bootstrap은 12열 그리드 시스템을 사용하므로, 이 숫자는 12에 합산됩니다.

단계 2: 사이드바에 콘텐츠 추가

이제 사이드바에 콘텐츠를 추가해 보겠습니다:

<!-- 사이드바 -->
<div class="col-md-3 sidebar bg-light">
<h3 class="mt-3">사이드바 메뉴</h3>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">홈</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">소개</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">서비스</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">연락처</a>
</li>
</ul>
</div>

여기서 우리는 사이드바에 제목과 навіgаtіоn 링크 목록을 추가했습니다. bg-light 클래스는 밝은 배경색을 적용합니다.

단계 3: 주요 콘텐츠 추가

이제 주요 영역에 콘텐츠를 추가해 보겠습니다:

<!-- 주요 콘텐츠 -->
<div class="col-md-9 main-content">
<h1 class="mt-3">우리 웹사이트에 오신 것을 환영합니다</h1>
<p>이곳은 주요 콘텐츠 영역입니다. 여기에 페이지의 주요 정보가 표시됩니다.</p>
</div>

사이드바 강화

이제 기본 사이드바를 만들었으니, 몇 가지 추가 기능으로 강화해 보겠습니다.

검색 상자 추가

<div class="col-md-3 sidebar bg-light">
<h3 class="mt-3">사이드바 메뉴</h3>
<form class="d-flex mb-3">
<input class="form-control me-2" type="search" placeholder="검색" aria-label="Search">
<button class="btn btn-outline-success" type="submit">검색</button>
</form>
<!-- ... 사이드바 콘텐츠 나머지 ... -->
</div>

이렇게 하면 사용자들이 빠르게 콘텐츠를 찾을 수 있는 검색 상자가 사이드바 상단에 추가됩니다.

드롭다운 메뉴 추가

사이드바에 드롭다운 메뉴를 추가해 보겠습니다:

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
제품
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">제품 1</a></li>
<li><a class="dropdown-item" href="#">제품 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">특별 제안</a></li>
</ul>
</li>

이 코드를 <ul class="nav flex-column"> 안에 추가하면 "제품" 드롭다운 메뉴가 생성됩니다.

사이드바 반응형으로 만들기

사이드바의 도전 과제 중 하나는 모바일 기기에서 잘 작동하게 만드는 것입니다. 우리는 사이드바를 반응형으로 만들어 보겠습니다:

<div class="container-fluid">
<div class="row">
<!-- 사이드바 -->
<div class="col-md-3 sidebar bg-light" id="sidebar">
<button class="btn btn-primary d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarContent">
사이드바 전환
</button>
<div class="collapse d-md-block" id="sidebarContent">
<!-- ... 사이드바 콘텐츠 ... -->
</div>
</div>
<!-- 주요 콘텐츠 -->
<div class="col-md-9 main-content">
<!-- ... 주요 콘텐츠 ... -->
</div>
</div>
</div>

우리는 작은 화면에서만 보이는 전환 버튼을 추가했고, 사이드바 콘텐츠를 접히는的可折叠 div로 감싸았습니다. 더 큰 화면에서는 항상 보이게 됩니다.

사이드바 스타일링

마지막으로, 우리는 사이드바에 커스터마이즈된 CSS를 추가하여 더 나은 모습을 만들어 보겠습니다:

<style>
.sidebar {
min-height: 100vh;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
.sidebar .nav-link {
color: #333;
}
.sidebar .nav-link.active {
color: #007bff;
}
</style>

이 코드를 <head>에 추가하면 사이드바가 전체 높이를 가지고, 약간의 그림자를 추가하며, навіgаtіоn 링크에 스타일을 적용합니다.

결론

축하합니다! 지금 당신은 완전히 기능적이고 반응형인 Bootstrap 사이드바를 만들었습니다. 연습이 완벽을 이루는 열쇠이므로, 다양한 레이아웃과 스타일을 실험해 보지 마세요.

이 표는 우리가 사용한 주요 Bootstrap 클래스와 그 목적을 요약합니다:

클래스	목적
container-fluid	전체 너비 컨테이너 생성
row	수평 열 그룹 생성
col-md-3	중간 화면 이상에서 3 유닛 넓이 열 생성
bg-light	밝은 배경색 적용
nav	навіgаtіоn 컴포넌트 표시
nav-item	навіgаtіоn 항목 스타일 적용
nav-link	навіgаtіоn 링크 스타일 적용
dropdown	드롭다운 메뉴 생성
btn	버튼 스타일 적용
form-control	폼 입력 스타일 적용

계속 코딩하고, 계속 배우며, 가장 중요한 것은 즐겁게 하세요! 모든 마스터는 한때 초보자였습니다. 여러분의 웹 개발 여정이 어디로 나아갈지 기대해 봅니다!

Credits: Image by storyset