Front-end/Bootstrap

부트스트랩 (Bootstrap)

NiceKHJ 2024. 8. 12. 14:29

일반적으로 부트스트랩은 자동완성이 안된다.

 

vs code 에서 설치후 쓰면 자동완성 가능.

 

1. 부트스트랩 소개

부트스트랩은 웹사이트를 쉽게 개발할 수 있게 도와주는 CSS 오픈 소스 프레임워크 입니다.

  • Front-end 개발자들이 반응형 웹 디자인을 쉽게 개발할 수 있도록 미리 정의된 CSS 속성들과 JavaScript 라이브러리를 제공합니다.
  • 하나의 CSS 선택자만으로 스마트폰 , 태블릿 , 노트북 , 데스크탑 까지 다양한 기기에서 동작하는 반응형 웹 페이지를 쉽게 만들 수 있습니다.
  • 사용자가 웹사이트를 쉽게 제작 , 유지 , 보수할 수 있도록 도와줍니다.

부트스트랩의 역사

  • 2011년 : 트위터 개발자 Mark Otto가 트위터 앱의 UI 개발을 정형화하기 위해 아이디어 제안
  • 2013년 : Version 3 출시
  • 2018년 : Version 4 출시
  • 2021년 : Version 5 출시
  • 2023년 : Version 5.3.x 사용중

CSS vs 부트스트랩

  • CSS : 개발자가 직접 <style> 태그를 이용하여 CSS 속성을 작성합니다. 모든 재료를 사용해 직접 요리를 만드는 것과 비슷합니다.
  • 부트스트랩 : 미리 정의된 CSS 선언들을 HTML 태그의 class 속성을 이용하여 적용합니다. 이미 만들어진 기성품을 사용하는 것과 유사합니다.

부트스트랩의 장단점

  • 장점 :
    • 반응형 웹사이트를 쉽고 빠르게 만들 수 있습니다.
  • 단점 :
    • 독창적이지 않은 정형화된 웹사이트가 될 수 있습니다.
    • 미리 정의된 스타일 속성이 많아 커스터마이징이 어려울 수 있습니다.
    • !important 키워드를 과도하게 사용할 수 있습니다.

 

2. 부트스트랩 구성 요소

 

핵심 구성 요소

  1. CSS 선택자 : 미리 정의된 클래스 선택자의 스타일 속성
  2. UI Component: Accordion, Alerts, Badge, Button, Card, Carousel, Modal, Navbar 등
  3. Grid Layout System: 요소 배치에 관련된 핵심 기본 개념
  4. JavaScript Plugin: 동적 기능 관련 자바스크립트 라이브러리

부트스트랩 설치 및 사용

 

설치 방법:

  1. 직접 다운로드 후 웹 서버에 파일 업로드
  2. CDN 이용
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

부트스트랩 UI Components

  1. Button : 다양한 크기와 스타일의 버튼 제공
  2. Typography : 글꼴 , 제목 , 본문 텍스트 , 리스트 등 텍스트 스타일링
  3. Image : 반응형 이미지 처리
  4. Table : 테이블 스타일링
  5. Alerts , Badge , Breadcrumb : 알림 , 배지 , 경로 표시 등 다양한 UI 요소
  6. Cards : 유연한 콘텐츠 컨테이너
  7. Forms : 입력 폼 스타일링
  8. Navbar : 반응형 네비게이션 바
  9. Carousel : 이미지 슬라이더

 

3. 부트스트랩 레이아웃

 

Grid System

  • Container , Row , Column 3가지 요소로 레이아웃 구성
  • 하나의 Row는 기본적으로 12개의 컬럼으로 구성
  • 클래스 선택자(container , row , col)를 이용하여 화면 레이아웃 구성

Container 종류

  • .container : 반응형 고정 너비 컨테이너
  • .container-{breakpoint} : 특정 중단점까지 100% 너비 , 이후 고정 너비
  • .container-fluid : 모든 중단점에서 100% 너비

Break points

  • 반응형 디자인의 기본 요소
  • 디바이스나 뷰포트 크기에 따라 레이아웃 조정
  • 미디어 쿼리를 사용하여 CSS 적용

Grid System 활용

  • 이미지 갤러리, 개인 포트폴리오 등 다양한 레이아웃 구성 가능

 

4. 부트스트랩 템플릿 활용

 

기본 템플릿 사용하기

  • 부트스트립 공식 사이트에서 제공하는 기본 템플릿 활용

무료 템플릿 사용하기

  • 구글에 Bootstrap 무료 템플릿 검색
  • https://startbootstrap.com/ 등의 사이트에서 무료 템플릿 다운로드 및 사용

부트스트랩 단축어

 

1. 여백 (Spacing)

  • m: margin
  • p: padding

방향:

  • t: top
  • b: bottom
  • s: start (left in LTR)
  • e: end (right in LTR)
  • x: left and right
  • y: top and bottom

크기:

  • 0 ~ 5: 크기 정도 (0이 가장 작고 5가 가장 큼)
  • auto: 자동

예: mt-3 (margin-top), px-4 (padding left and right)


2. 색상 (Colors)

  • primary, secondary, success, danger, warning, info, light, dark

예: bg-primary (배경색), text-danger (글자색)

3. 텍스트 정렬 (Text Alignment)

  • text-start, text-center, text-end

4. 디스플레이 (Display)

  • d-none, d-inline, d-block, d-flex

5. Flexbox

  • justify-content-start, justify-content-center, justify-content-end
  • align-items-start, align-items-center, align-items-end

6. 그리드 시스템 (Grid System)

  • col, col-sm, col-md, col-lg, col-xl
  • row, container

7.반응형 (Responsive)

  • sm, md, lg, xl, xxl (breakpoints)

8. 테두리 (Borders)

  • border, border-top, border-end, border-bottom, border-start
  • rounded, rounded-circle, rounded-pill

9. 위치 (Position)

  • position-static, position-relative, position-absolute, position-fixed, position-sticky

10. 너비와 높이 (Width & Height)

  • w-25, w-50, w-75, w-100
  • h-25, h-50, h-75, h-100

11. 폰트 크기 (Font Size)

  • fs-1, fs-2, fs-3, fs-4, fs-5, fs-6

12. 폰트 무게 (Font Weight)

  • fw-bold, fw-bolder, fw-normal, fw-light, fw-lighter

13. 텍스트 변형 (Text Transform)

  • text-uppercase, text-lowercase, text-capitalize

14. 가시성 (Visibility)

  • visible, invisible

예시