부트스트랩(Bootstrap)은 웹 개발을 위한 가장 인기 있는 오픈 소스 프론트엔드 프레임워크 중 하나입니다. 트위터에서 개발된 Bootstrap은 HTML, CSS, JavaScript로 작성된 도구 모음을 제공하여, 반응형(Responsive) 웹 디자인을 쉽게 구현할 수 있게 해줍니다. 주요 특징은 다음과 같습니다:
주요 특징
- 반응형 디자인 (Responsive Design)
- 다양한 화면 크기와 디바이스에 맞춰 자동으로 조정되는 반응형 웹 디자인을 지원합니다. 이를 통해 데스크톱, 태블릿, 모바일 디바이스에서 일관된 사용자 경험을 제공합니다.
- 사전 설계된 컴포넌트
- 버튼, 네비게이션 바, 폼, 카드, 모달 등 다양한 사전 설계된 UI 컴포넌트를 제공합니다. 이를 통해 빠르고 일관된 디자인을 구현할 수 있습니다.
- 그리드 시스템 (Grid System)
- 12열 기반의 유연한 그리드 시스템을 사용하여 페이지 레이아웃을 쉽게 구성할 수 있습니다. 이 시스템은 반응형 디자인을 지원하며, 각 열과 행은 다양한 크기에서 적절히 정렬됩니다.
- 커스터마이제이션 (Customization)
- Bootstrap은 SASS 변수를 통해 쉽게 커스터마이제이션이 가능합니다. 이를 통해 프로젝트에 맞게 디자인을 쉽게 수정할 수 있습니다.
- 플러그인 (Plugins)
- 자바스크립트 기반의 다양한 플러그인을 제공하여 모달, 툴팁, 팝오버, 카루셀 등의 기능을 쉽게 추가할 수 있습니다.
- 브라우저 호환성
- 최신 웹 표준을 준수하며 대부분의 최신 브라우저와 호환됩니다.
- CDN을 통한 사용:
- 간단하게 CDN 링크를 HTML 파일에 추가하여 사용할 수 있습니다.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
위와 같이 CDN 링크를 넣어서 작업해도 되긴하나, 실제 프로젝트에서는 CDN 주소로 가져오지 않고 해당 파일을 서버에 위치 시켜서 진행합니다. 그이유는 CDN으로 연결해서 사용할경우 CDN서버에 문제가 생겨 해당 링크를 호출하지 못할경우 페이지를 읽지 못할 경우를 대비해서 입니다.
그리고 프로젝트 경로에 맞게 수정하시면 됩니다. (예시)
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/bootstrap.min.js"></script>
- npm 또는 yarn을 통한 설치:
- npm이나 yarn을 사용하여 프로젝트에 Bootstrap을 설치할 수 있습니다.
npm install bootstrapyarn add bootstrap
- SCSS를 통한 커스터마이제이션:
- Bootstrap의 소스 파일을 가져와서 SCSS로 커스터마이제이션할 수 있습니다.
// custom.scss
@import "~bootstrap/scss/bootstrap";
예시 코드
간단한 Bootstrap 사용 예시:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Bootstrap Example</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<h1>Hello, world!</h1>
<button class="btn btn-primary">Click me</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
이 예시는 Bootstrap을 사용하여 간단한 네비게이션 바와 버튼을 포함한 기본적인 웹 페이지를 구성하는 방법을 보여줍니다. Bootstrap을 사용하면 이러한 UI 요소들을 빠르고 쉽게 구현할 수 있습니다.
Bootstrap
강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기
getbootstrap.kr
실무에서는 디자인이 많이 필요없는 관리자 사이트에서 무료/유료 테마 구입 후 많이 이용합니다.
728x90
