BootStrap이란?

HTML, CSS, JavaScript로 구성된 오픈 소스 프레임워크로써, 반응형 웹 디자인을
쉽게 구현할 수 있도록 도와주는 프론트엔드 라이브러리.

즉, 구현하기 복잡한 여러 기능들을 간단한 방법으로 사용 할 수 있게 해주는 프레임워크.

<brBootstrap은 쉽고 강력한 CSS 프레임워크로, 빠르게 반응형 웹을 구축할 수 있는 최고의 도구 중 하나입니다.
하지만 커스터마이징을 할 수 없다면 여러가지 제약이 따를 수 있으니,
팀 개발에서는 사용을 신중하게 고려해야 할 것입니다.>

주요 기능적 특징

반응형 디자인 (Responsive Design)

• 모바일 우선(Mobile First) 설계
• 다양한 디바이스(PC, 태블릿, 스마트폰)에서 자동으로 레이아웃 조정
• container, row, col을 이용한 그리드 시스템(Grid System) 제공

모바일인지 웹인지를 해상도로 감지하여 요소들을 다르게 구성

그리드 시스템 (Grid System)

• 열(column) 기반 레이아웃 시스템
• CSS의 flexbox를 기반으로 동작, 화면 크기에 따라 자동으로 조정
• 12개의 컬럼을 기반으로 레이아웃 구성
• col-- 클래스를 사용하여 다양한 크기의 화면 지원

다양한 UI 컴포넌트

• 버튼(Button): 다양한 스타일의 버튼 (btn-primary, btn-secondary 등)
• 폼(Form): 입력 필드, 체크박스, 라디오 버튼 등
• 네비게이션(Navigation): 메뉴바, 탭, 드롭다운
• 모달(Modal): 팝업 창
• 카드(Card): 블로그 글, 상품 소개 등에 유용한 카드 UI

손쉬운 스타일링

• 기본적으로 수려한 디자인을 제공하여 CSS 작성 최소화
• 커스텀 CSS를 추가하여 원하는 스타일로 변경 가능

자바스크립트 플러그인 제공

• jQuery 없이도 사용 가능
• JavaScript를 활용한 동적 기능 제공 (ex. 모달, 툴팁, 드롭다운 등)

Bootstrap 사용 방법

CDN 방식

해당하는 링크에서 파일로 특정 파일을 다운받는 방식.
자세한 것은 이후 포스팅

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

• 장점: 간단한 추가, 쉬운 업데이트
  단점: 인터넷 연결 필요

NPM 또는 Yarn 설치

npm install bootstrap

or

yarn add bootstrap

• 장점: 로컬 개발 가능, 필요에 따라 커스텀 가능
  단점: 직접 빌드 과정 필요

더 수월하게 커스터마이징 할 수 있는 SASS 방식도 존재하나
본 포스팅에서는 다루지 아니함

마치며...

Bootstrap은 쉽고 강력한 CSS 프레임워크로, 빠르게 반응형 웹을 구축할 수 있는 최고의 도구 중 하나입니다.
하지만 커스터마이징을 할 수 없다면 여러가지 제약이 따를 수 있으니,
팀 개발에서는 사용을 신중하게 고려해야 할 것입니다.