Bootstrap 5 주요 기능 정리

My Pale Blue Dot·2025년 2월 21일

Carousel JavaScript Offcanvas bootstrap5 grid-system modal navbar 자바스크립트

JAVASCRIPT

목록 보기

26/26

📅 날짜: 2025-02-21

📌 개념 정리

오늘은 Bootstrap 5를 활용하여 웹사이트의 기본 레이아웃과 주요 UI 컴포넌트를 구성하는 방법을 학습했다.
Bootstrap 5는 CSS와 JavaScript를 활용하여 반응형 웹사이트를 쉽게 구축할 수 있도록 도와주는 프레임워크이다.

이번 학습에서는 웹사이트의 전체적인 레이아웃을 설정하고, 자주 사용되는 UI 요소들을 구현하는 방법을 익혔다.

Grid System을 활용하여 반응형 레이아웃 구성
Navbar를 사용하여 네비게이션 바 구현
Offcanvas와 Modal을 활용하여 사이드 메뉴 및 팝업 창 생성
Carousel을 활용하여 이미지 슬라이더 구성
Card UI를 활용하여 콘텐츠 박스 디자인
NavTabs와 Accordion을 사용하여 탭 및 아코디언 UI 구현

이번 학습을 통해 Bootstrap 5의 주요 기능을 활용하여 웹페이지를 구조화하고, 반응형 UI를 적용하는 방법을 익혔다.

📌 학습 내용

🔹 1. Bootstrap 5 기반 웹 레이아웃 구성

📂 01_Layout.html

📝 레이아웃 코드 예제

<div class="wrapper">
    <header>
        <div class="top-header"></div>
        <nav></nav>
    </header>
    <main>
        <section></section>
        <section></section>
        <section></section>
    </main>
    <footer></footer>
</div>

📌 설명:

<header>: 상단 영역(로고, 네비게이션 포함 가능).
<main>: 페이지의 메인 콘텐츠 영역.
<footer>: 하단 영역.
wrapper: 전체 페이지를 감싸는 컨테이너 역할.

📂 02_Nav.html

📝 네비게이션 바 코드 예제

<nav class="navbar navbar-expand-lg navbar-light">
    <div class="container-fluid">
        <a class="navbar-brand text-white" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item me-3">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item me-3">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown me-3">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
                        role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
            </ul>
            <form class="d-flex me-5">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-secondary" type="submit">Search</button>
            </form>
            <button class="btn bg-success text-white" data-bs-toggle="modal"
                data-bs-target="#loginModal">Login</button>
            <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasLogin"
                role="button" aria-controls="offcanvasExample">
                Join
            </a>
        </div>
    </div>
</nav>

📌 설명:

<nav class="navbar navbar-expand-lg">: 큰 화면에서는 펼쳐지고, 작은 화면에서는 접히는 네비게이션 바.
<button class="navbar-toggler">: 모바일 화면에서 네비게이션 바를 접었다 펼치는 버튼.
<ul class="navbar-nav">: 네비게이션 바 내부 메뉴 항목 리스트.
<li class="nav-item dropdown">: 드롭다운 메뉴 구성.
<form class="d-flex">: 네비게이션 바 내부의 검색창.
<button class="btn bg-success">Login</button>: 로그인 버튼 추가.
<a class="btn btn-primary">Join</a>: 회원가입 버튼 추가.

🔹 3. Bootstrap 5 Offcanvas(오프캔버스) 기능 추가

📂 03_Offcanvas.html

📝 오프캔버스 코드 예제

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasLogin"
    role="button" aria-controls="offcanvasExample">
    Join
</a>

<div class="offcanvas offcanvas-end" id="offcanvasLogin">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">회원가입</h5>
        <button class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        <form>
            <input type="text" class="form-control mb-2" placeholder="이름">
            <input type="email" class="form-control mb-2" placeholder="이메일">
            <button class="btn btn-success w-100">회원가입</button>
        </form>
    </div>
</div>

📌 설명:

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasLogin">Join</a>
→ 회원가입 버튼을 클릭하면 오프캔버스 패널이 열린다.
<div class="offcanvas offcanvas-end">
→ offcanvas-end를 사용하여 오른쪽에서 등장하는 패널을 구현.
<button class="btn-close">
→ 패널을 닫을 수 있도록 닫기 버튼 추가.
<form>
→ 사용자가 회원가입 정보를 입력할 수 있는 입력 필드 추가.

🔹 4. Bootstrap 5 Modal(모달 창) 기능 구현

📂 04_Modal.html

📝 모달 코드 예제

<button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#loginModal">
    로그인
</button>

<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="loginModalLabel">로그인</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="email" class="form-control mb-2" placeholder="이메일">
                <input type="password" class="form-control mb-2" placeholder="비밀번호">
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
                <button class="btn btn-primary">로그인</button>
            </div>
        </div>
    </div>
</div>

📌 설명:

<button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#loginModal">로그인</button>
→ 로그인 버튼 클릭 시 모달 창이 열림.
<div class="modal fade">
→ fade 속성을 사용하여 부드럽게 나타나는 효과 적용.
<div class="modal-dialog">
→ 모달 창의 크기 및 정렬 설정.
<input type="email">, <input type="password">
→ 사용자가 이메일과 비밀번호를 입력할 수 있는 로그인 폼 추가.
<button class="btn-close">
→ 닫기 버튼 추가.

🔹 5. Bootstrap 5 Carousel(이미지 슬라이더) 기능 구현

📂 05_Carousel.html

📝 캐러셀 코드 예제

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="image1.jpg" class="d-block w-100" alt="Slide 1">
        </div>
        <div class="carousel-item">
            <img src="image2.jpg" class="d-block w-100" alt="Slide 2">
        </div>
        <div class="carousel-item">
            <img src="image3.jpg" class="d-block w-100" alt="Slide 3">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>

📌 설명:

<div class="carousel slide" data-bs-ride="carousel">
→ data-bs-ride="carousel"을 추가하여 자동 재생 기능 활성화.
<div class="carousel-inner">
→ 슬라이드될 이미지들을 감싸는 컨테이너.
<div class="carousel-item active">
→ 첫 번째 이미지를 active 클래스로 설정하여 기본적으로 표시.
<button class="carousel-control-prev">, <button class="carousel-control-next">
→ 이전/다음 버튼을 추가하여 수동 슬라이드 기능 제공.

🔹 6. Bootstrap 5 Card(카드 UI) 기능 구현

📂 06_Card.html

📝 카드 UI 코드 예제

<div class="container mt-4">
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <img src="image1.jpg" class="card-img-top" alt="Card Image">
                <div class="card-body">
                    <h5 class="card-title">Card Title 1</h5>
                    <p class="card-text">카드 설명 내용입니다.</p>
                    <a href="#" class="btn btn-primary">자세히 보기</a>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <img src="image2.jpg" class="card-img-top" alt="Card Image">
                <div class="card-body">
                    <h5 class="card-title">Card Title 2</h5>
                    <p class="card-text">추가 카드 설명입니다.</p>
                    <a href="#" class="btn btn-primary">더 보기</a>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <img src="image3.jpg" class="card-img-top" alt="Card Image">
                <div class="card-body">
                    <h5 class="card-title">Card Title 3</h5>
                    <p class="card-text">마지막 카드 설명입니다.</p>
                    <a href="#" class="btn btn-primary">자세히 보기</a>
                </div>
            </div>
        </div>
    </div>
</div>

📌 설명:

<div class="container mt-4">
→ 카드를 감싸는 부모 컨테이너.
<div class="row">, <div class="col-md-4">
→ 가로로 3개의 카드를 정렬하도록 설정.
<div class="card">
→ 각 카드의 기본 컨테이너.
<img src="image1.jpg" class="card-img-top">
→ 카드 상단에 이미지 추가.
<div class="card-body">
→ 카드 제목, 설명, 버튼을 포함하는 본문 영역.

🔹 7. Bootstrap 5 NavTab & Accordion 기능 구현

📂 07_NavTab_Accordion.html

📝 네비게이션 탭 코드 예제

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="tab1-tab" data-bs-toggle="tab" data-bs-target="#tab1" role="tab">
            탭 1
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab2-tab" data-bs-toggle="tab" data-bs-target="#tab2" role="tab">
            탭 2
        </button>
    </li>
</ul>

<div class="tab-content">
    <div id="tab1" class="tab-pane fade show active" role="tabpanel">
        <p>탭 1 내용</p>
    </div>
    <div id="tab2" class="tab-pane fade" role="tabpanel">
        <p>탭 2 내용</p>
    </div>
</div>

📌 설명:

<ul class="nav nav-tabs">
→ 탭 버튼을 감싸는 네비게이션 바.
<button class="nav-link active" data-bs-toggle="tab">
→ 탭 클릭 시 해당 콘텐츠가 표시되도록 설정.
<div class="tab-content">
→ 탭 버튼과 연결된 콘텐츠를 표시하는 영역.
show active 클래스가 있는 콘텐츠가 기본적으로 보이는 탭.

📝 아코디언 코드 예제

<div class="accordion" id="faqAccordion">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#faq1">
                질문 1
            </button>
        </h2>
        <div id="faq1" class="accordion-collapse collapse show">
            <div class="accordion-body">질문 1에 대한 답변입니다.</div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#faq2">
                질문 2
            </button>
        </h2>
        <div id="faq2" class="accordion-collapse collapse">
            <div class="accordion-body">질문 2에 대한 답변입니다.</div>
        </div>
    </div>
</div>

📌 설명:

<div class="accordion">
→ 아코디언 전체 컨테이너.
<button class="accordion-button" data-bs-toggle="collapse">
→ 버튼을 클릭하면 해당 내용이 펼쳐지거나 닫힘.
collapse show
→ 기본적으로 첫 번째 아코디언을 펼쳐진 상태로 표시.

📌 최종 요약

학습 내용	설명
웹 레이아웃 구성	`<header>`, `<main>`, `<footer>`을 사용하여 기본 구조 설계
Navbar(네비게이션 바)	`navbar`를 활용하여 반응형 네비게이션 구현
Offcanvas(오프캔버스)	로그인 창을 사이드에서 등장하도록 설정
Modal(모달 창)	로그인 버튼 클릭 시 중앙에 모달 창 표시
Carousel(이미지 슬라이더)	`carousel`을 사용하여 배너 이미지 슬라이드 구현
Card UI	`card`를 활용하여 콘텐츠 박스 구성
NavTab & Accordion	`nav-tabs`와 `accordion`으로 탭 및 FAQ 스타일 UI 구현

📌 학습 총평

✅ 배운 점

Bootstrap 5의 다양한 UI 컴포넌트를 활용하여 웹페이지를 더 쉽게 구성할 수 있다는 점을 배웠다.
반응형 디자인을 적용하는 방법을 익히고, 기본적인 웹사이트의 구조를 만들 수 있는 능력을 키웠다.
Offcanvas, Modal, Carousel, Card UI 등 실제 웹사이트에서 자주 쓰이는 기능들을 직접 구현해보았다.

🔥 추후 개선할 점

Bootstrap 5의 그리드 시스템을 더 깊이 이해하여 레이아웃을 더 정교하게 디자인하는 연습 필요.
Bootstrap과 함께 CSS 커스터마이징을 병행하여 개성 있는 UI를 만들도록 노력해야 함.
실제 프로젝트에서 Bootstrap을 사용하여 더 복잡한 웹페이지를 만들어보는 실습이 필요함.

My Pale Blue Dot

Here, My Pale Blue.🌏

이전 포스트

Bootstrap 5 주요 기능 정리

JAVASCRIPT

📅 날짜: 2025-02-21

📌 개념 정리

📌 학습 내용

🔹 1. Bootstrap 5 기반 웹 레이아웃 구성

📝 레이아웃 코드 예제

🔹 2. Bootstrap 5 Navbar(네비게이션 바) 구현

📝 네비게이션 바 코드 예제

🔹 3. Bootstrap 5 Offcanvas(오프캔버스) 기능 추가

📝 오프캔버스 코드 예제

🔹 4. Bootstrap 5 Modal(모달 창) 기능 구현

📝 모달 코드 예제

🔹 5. Bootstrap 5 Carousel(이미지 슬라이더) 기능 구현

📝 캐러셀 코드 예제

🔹 6. Bootstrap 5 Card(카드 UI) 기능 구현

📝 카드 UI 코드 예제

🔹 7. Bootstrap 5 NavTab & Accordion 기능 구현

📝 네비게이션 탭 코드 예제

📝 아코디언 코드 예제

📌 최종 요약

📌 학습 총평

✅ 배운 점

🔥 추후 개선할 점

Chart.js를 활용한 JSON 데이터 기반 동적 차트 생성

0개의 댓글