부트스트랩 하는법 기본 단계
부트스트랩을 프로젝트에 바로 적용하려면 getbootstrap.com에서 제공하는 무료 CDN 링크를 사용하세요.
가장 간단한 방법은 HTML head에 CSS 링크를 넣고 body 끝에 JS 스크립트를 추가하는 겁니다.
이 과정은 2분이면 끝납니다.
먼저 기본 HTML 구조를 만듭니다.
DOCTYPE은 html로 시작하고 lang=”en” 또는 lang=”ko”를 넣으세요.
head 안에 charset=”utf-8″과 viewport 메타를 반드시 추가해야 반응형이 제대로 작동합니다.
보안과 안정성을 위해 필수입니다.
getbootstrap.com 무료 CDN 사용하기
getbootstrap.com에서 최신 버전 CDN을 복사하세요.
v5.3.8 버전 기준으로 npm install bootstrap@5.3.8 명령어도 있지만, 웹페이지라면 CDN이 제일 빠릅니다.
jsDelivr CDN을 통해 CSS와 JS를 불러오면 별도 다운로드 없이 바로 사용 가능합니다.
CSS 링크 예시:
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65″ crossorigin=”anonymous”>
JS 번들 (툴팁, 팝오버 포함 Popper 내장):
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js” integrity=”sha384-…” crossorigin=”anonymous”></script>
이 링크들은 v5.2.3 버전 integrity 해시를 사용합니다.
최신 버전은 getbootstrap.com/docs에서 확인 후 교체하세요.
bootstrap.bundle.min.js 하나로 모든 JS 컴포넌트와 Popper를 커버합니다.
스타터 템플릿 완전 복사해서 적용
부트스트랩 사용자 가이드에서 권장하는 스타터 템플릿을 그대로 복사하세요.
이걸 사용하면 viewport와 기본 설정이 다 포함되어 있습니다.
| 구분 | 코드 |
|---|---|
| 완전한 HTML 예시 |
|
이 템플릿에서 title만 바꾸고 h1 내용을 수정하면 바로 부트스트랩이 적용됩니다.
기본 HTML 태그가 부트스트랩 스타일로 변형되어 폰트, 여백, 색상이 자동 적용됩니다.
head에 넣으면 오류 날 수 있어요.
npm으로 부트스트랩 설치하는법
Node.js 프로젝트라면 npm으로 설치하세요.
터미널에서 npm install bootstrap@5.3.8 명령어를 실행합니다.
Ruby 사용자라면 gem install bootstrap -v 5.3.8을 사용하세요.
설치 후 node_modules/bootstrap/dist 폴더에서 css와 js 파일을 복사하거나, Sass로 빌드합니다.
설치 문서는 getbootstrap.com/docs/installation에서 더 자세한 패키지 매니저 가이드를 확인하세요.
Sass 사용자라면 변수 오버라이드를 먼저 합니다:
$primary: #900;
$enable-shadows: true;
$prefix: “mo-“;
@import “../node_modules/bootstrap/scss/bootstrap”;
Sass 커스터마이징 사용자 가이드
부트스트랩을 무료로 커스터마이징하려면 Sass 파일을 부분적으로 import하세요.
functions부터 시작해서 variables, maps, mixins 순서로 불러옵니다.
| 단계 | Sass import 순서 |
|---|---|
| 1단계 | @import “../node_modules/bootstrap/scss/functions”; |
| 2단계 | $primary: #900; $enable-shadows: true; |
| 3단계 | @import “../node_modules/bootstrap/scss/variables”; @import “../node_modules/bootstrap/scss/variables-dark”; @import “../node_modules/bootstrap/scss/maps”; @import “../node_modules/bootstrap/scss/mixins”; @import “../node_modules/bootstrap/scss/root”; |
| 4단계 (선택) | @import “../node_modules/bootstrap/scss/utilities”; @import “../node_modules/bootstrap/scss/reboot”; @import “../node_modules/bootstrap/scss/containers”; |
이 순서를 지키면 gradients, shadows 같은 글로벌 옵션을 활성화하고 필요한 컴포넌트만 포함할 수 있습니다.
전체 Sass를 import하면 모든 CSS 기능이 활성화됩니다.
클래스 사용법은 간단합니다.
<h1 class=”부트스트랩_클래스”>처럼 적용하세요.
기본 디자인을 쓰거나 템플릿을 가져와도 좋습니다.
viewport 메타 태그 필수 설정
모든 부트스트랩 프로젝트에 <meta name=”viewport” content=”width=device-width, initial-scale=1″>를 head에 넣으세요.
이게 없으면 모바일에서 확대/축소가 제대로 안 됩니다.
스타터 템플릿 예시에서 확인할 수 있듯이 charset=”utf-8″과 함께 사용합니다.
content=”width=device-width, initial-scale=1″ 값은 고정으로 사용하세요.
항상 첫 번째로 체크하세요.
box-sizing 전역 설정 이해
부트스트랩은 content-box에서 border-box로 전역 box-sizing을 변경합니다.
크기 조절이 간단해집니다.
중첩 요소(::before, ::after)도 상속받습니다.
예외 설정:
selector-for-some-widget {
box-sizing: content-box;
}
이 스니펫으로 특정 위젯만 content-box로 되돌릴 수 있습니다.
전체 레이아웃에서 여백과 테두리가 padding 안에 포함되어 계산이 쉬워집니다.
부트스트랩 JS 번들 포함 팁
bootstrap.bundle.js 또는 bootstrap.bundle.min.js를 사용하면 Popper가 포함되어 툴팁과 팝오버가 바로 작동합니다.
별도 Popper 설치 불필요합니다.
구성 요소 표시 링크를 클릭해 테스트하세요.
JS를 body 끝에 넣고 data-bs-toggle 같은 속성을 사용하면 됩니다.
문제 발생 시 스택 오버플로 bootstrap-5 태그로 검색하세요.
공식 Slack #bootstrap 채널이나 irc.libera.chat 서버에서도 도움 받을 수 있습니다.
integrity 해시 포함 링크를 getbootstrap.com에서 복사하세요.
bundle.min.js로 JS와 Popper 모두 커버됩니다.
$enable-shadows: true;도 함께 설정하면 shadows가 활성화됩니다.
content=”width=device-width, initial-scale=1″을 반드시 추가하세요.
Sass 빌드 시 @import “../node_modules/bootstrap/scss/bootstrap”;로 컴파일합니다.
selector { box-sizing: content-box; }로 특정 요소만 변경 가능합니다.
툴팁, 팝오버 모두 작동합니다.
Slack #bootstrap 채널도 유용합니다.
