1. Introduction
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Bootstrap은 빠르고 간편한 반응형 웹 디자인을 위한 오픈소스 프레임워크이다. HTML, CSS, JS로 만들어진 typography, form, button, table, tab, navigation, modal, image carousel 등을 제공하고 추가적으로 JS plugin들을 제공한다.
1. Code의 재사용
CSS를 활용한 UI/UX 디자인은 수많은 셀렉터와 CSS 프로퍼티를 선언하는 작업이다. 이때 중복되는 선언이 발생할 수 있는데, class 어트리뷰트를 활용하면 중복 선언을 방지할 수 있고 코드를 재사용할 수 있다.
예를 들어 버튼의 스타일을 작성하는 경우, 웹사이트 내의 버튼은 일정한 스타일 기준을 정하고 사용하는 것이 일반적이다. 이때 기본이 되는 스타일을 선언하고 컬러와 크기 등 세부 사항을 상황에 맞게 변경할 수 있는 구조가 바람직하다.
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
display: inline-block;
font-size: 14px;
font-weight: 400;
text-align: center;
color: #333;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
padding: 6px 12px;
cursor: pointer;
}
.btn-large {
font-size: 18px;
padding: 10px 16px;
border-radius: 6px;
}
.btn-red {
color: #fff;
background-color: #d9534f;
border-color: #d43f3a;
}
.btn-blue {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}
</style>
</head>
<body>
<button class="btn">Button</button>
<button class="btn btn-red">Button</button>
<button class="btn btn-blue">Button</button>
<button class="btn btn-large">Button</button>
</body>
</html>
위와 같이 미리 사용될 가능성이 높은 스타일을 미리 작성하여 class화 하면 같은 코드를 중복 작성하는 비효율을 줄일 수 있으며 이는 비용 절감과 품질의 향상으로 이어진다.
Bootstrap은 이처럼 미리 선언해놓은 다양한 class와 자바스크립트 코드로 이루어진 프론트엔드 프레임워크이다.
HTML에 Bootstrap의 class를 지정하는 것으로 빠르고 쉽게 일관된 스타일의 반응형 웹사이트를 작성할 수 있게 한다.
1.2 프레임워크의 장점
Framework의 사전적 의미는 아래와 같다.
- 뼈대
- 틀
- 체제
소프트웨어에서의 프레임워크란 "소프트웨어 개발 시 공통적으로 필요한 기능들을 재사용 관점에서 모아 구조화한 것"으로 일관된 애플리케이션의 뼈대를 제공하며 필요에 따라 확장 가능한 기반 코드를 제공한다. 즉, 프레임워크에서 제공하는 기반 코드를 사용하여 필요한 기능을 추가해나가는 방법이다.
웹사이트 디자인에는 정형화된 코드가 자주 사용되는데 이를 별도로 저장해두었다가 필요할 때마다 복사하여 사용하곤 한다. 이를 스니핏(Snippet)이라 한다. 그러나 스니핏이 개발팀 내 공유되어 관리되지 못하고 개인별로 사용하다보면 전체 코드에서는 일관된 스타일을 가지지 못하여 품질면이나 유지보수면에서 문제가 발생할 수 있다.
따라서 검증된 프레임워크나 라이브러리를 사용하는 것은 올바른 방법이다. 또한 프레임워크가 제공하는 스타일로 팀 전체의 스타일을 통일시키는 것은 커뮤니케이션 측면에서도 바람직하다.
1.3 부트스트랩의 장점
1.4 버전
2024년 4월 기준 현재 최신 버전은 5.3.3이다.
2. 설치
부트스트랩을 사용하기 위한 방법은 아래와 같다.
- 부트스트랩을 다운로드 받은 후 자신의 환경에 위치시킨 후 사용하는 방법
- CDN(Content Delivery Network)을 사용하는 방법
- npm을 통해 설치하는 방법
2.1 다운로드
다운로드한 파일의 구조는 아래와 같다.
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff22.2 CDN
CDN이란 html 파일에서 참조하는 css, js 파일이나 다른 리소스 파일을 웹사이트 서버가 아닌 다른 공유 공간에 두고 여러 웹사이트가 참조할 수 있게 하는 서비스를 의미한다. 웹사이트 구축 시, 별도 다운로드가 필요없고 페이지 로딩 속도가 빠르다는 장점이 있다. 부트스트랩이나 제이쿼리는 많은 웹사이트에서 사용하기 때문에 CDN 서버에서 이미 다운로드했을 가능성이 크다. 이미 다운로드된 리소스 파일은 캐시에서 로드되어 결국 페이지 로딩 속도가 빨라지게 된다. 하지만 CDN을 제공하는 서버가 다운된다면 손쓸 방법이 없다.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>2.3 npm
프로젝트 폴더로 이동한 후, npm 명령어를 사용하여 부트스트랩을 설치한다.
$ cd <project-folder>
## package.json이 존재하지 않는 경우
$ npm init --y
$ npm install --save bootstrap설치가 완료되면 프로젝트 폴더의 루트에 node_modules 폴더가 생성되고 node_modules/bootstrap/dist 폴더에 설치파일이 존재한다.
