1. 부트스트랩이란?
Bootstrap은 HTML, CSS, JavaScript를 기반으로 하는 가장 인기 있는 오픈 소스 프런트엔드 프레임워크 중 하나다. 반응형 웹사이트와 애플리케이션 개발을 위한 다양한 사전 제작된 컴포넌트와 편리한 디자인 옵션을 제공한다.
2. 주요 특징
1) 반응형 디자인: 다양한 기기와 화면 크기에 맞게 자동으로 조정되는 레이아웃을 제공한다.
2) 사용 용이성: 사용자가 쉽게 접근하고 사용할 수 있는 인터페이스 컴포넌트를 제공한다.
3) 사전 제작된 컴포넌트: 버튼, 네비게이션 바, 모달 창 등의 재사용 가능한 컴포넌트를 포함한다.
4) 사용자 정의 가능성: CSS 사전 처리기인 Sass를 사용하여 테마와 컴포넌트를 사용자가 원하는 대로 조정할 수 있다.
5) 효율적인 그리드 시스템: Flexbox를 기반으로 하는 그리드 시스템을 통해 레이아웃을 쉽게 구성할 수 있다.
Bootstrap을 사용한 기본 HTML 구조
<!doctype html>
<html lang="en">
<head>
<!-- 문자 인코딩 설정 -->
<meta charset="utf-8">
<!-- 반응형 웹 디자인을 위한 뷰포트 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 웹 페이지 제목 -->
<title>Bootstrap demo</title>
<!-- Bootstrap CSS CDN 링크 -->
<link href="<https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<!-- Bootstrap JavaScript 및 Popper.js CDN 링크 -->
<script src="<https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js>" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>2-1. 주요 구성 요소
메타 태그:
charset="utf-8": 문자 인코딩을 UTF-8로 설정한다.
name="viewport": 모바일 장치에서 적절한 반응형 동작을 위한 뷰포트 설정을 포함한다.
Bootstrap CSS CDN:
Bootstrap의 스타일시트를 페이지에 포함합니다. 이 스타일시트는 Bootstrap 구성 요소의 기본 스타일을 제공한다.
Bootstrap JavaScript 및 Popper.js:
Bootstrap의 JavaScript 기능을 사용하기 위해 필요한 스크립트를 포함한다. 여기에는 Popper.js도 포함되어 있으며, 이는 드롭다운, 팝오버, 툴팁 등의 기능에 필요한다.
2-2. 사용 방법
이 HTML 구조를 사용하여, Bootstrap 기반의 웹 페이지를 개발할 수 있다.
필요에 따라 Bootstrap 구성 요소를 추가하고, 공식 예제를 참조하여 원하는 레이아웃과 스타일을 구현할 수 있다.
Bootstrap의 CSS와 JavaScript는 CDN을 통해 쉽게 포함할 수 있으며, 이를 통해 다양한 디자인과 기능을 빠르게 구현할 수 있다. Bootstrap을 사용하면 반응형 웹 디자인과 다양한 웹 컴포넌트를 손쉽게 사용할 수 있어, 개발 과정을 크게 단순화시킨다.
3. 핵심 컴포넌트 분석
3-1. 카드(Card)
용도: 다양한 콘텐츠(이미지, 텍스트, 링크 등)를 효과적으로 표시하기 위한 컨테이너다.
특징: 유연하고 확장 가능하며, 다른 Bootstrap 컴포넌트와 쉽게 조합하여 사용할 수 있다.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>3-2. 캐러셀(Carousel)
용도: 이미지, 텍스트, 기타 콘텐츠를 순환시키며 표시하는 슬라이드쇼다.
특징: 시각적으로 매력적인 콘텐츠 표시 방법을 제공하며, 사용자 정의가 가능하다.
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>3-3. 드롭다운(Dropdown)
용도: 링크 목록과 같은 콘텐츠를 표시하는 상황별 오버레이다.
특징: 접근성을 고려하여 설계되었으며, Popper 라이브러리를 사용하여 동적 위치 지정을 제공한다.
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>3-4. 네비게이션 바(Navbar)
용도: 브랜딩, 탐색 링크, 기타 요소를 포함할 수 있는 반응형 탐색 헤더다.
특징: 다양한 콘텐츠 지원 및 사용자 정의 색상, 스타일링 옵션을 제공한다.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" 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">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<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>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>3-5. 페이지네이션(Pagination)
용도: 사용자가 사이트 내에서 쉽게 내비게이션 할 수 있도록 돕는 네비게이션 링크를 제공한다.
특징: 활성 및 비활성 상태 표시, 아이콘 사용 등의 기능을 포함한다.
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
'웹 서비스 개발(FB,BE,SERVER,DB) > Vue.js' 카테고리의 다른 글
| 4. Vue.js 활용 (0) | 2024.03.08 |
|---|---|
| 3. Vue 이해하기 (0) | 2024.03.07 |
| 2. Vue.js (0) | 2024.03.06 |
| 1. Vue 설치하기 (0) | 2024.03.06 |
댓글