본문 바로가기
프레임워크

[프레임워크] 부트스트랩(Bootstrap)에 대해서

by 클레어몬트 2025. 2. 25.

부트스트랩 공식 홈페이지 문서를 잘 활용하자!

그대로 가져와서 활용하면 된다

 

https://getbootstrap.kr/

 

Bootstrap

강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기

getbootstrap.kr

 

(부트스트랩 프레임워크 사용 예시 코드)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 학습</title>
    <!-- Bootstrap CSS & JS -->
    <link
        rel="stylesheet"
        href="node_modules/bootstrap/dist/css/bootstrap.min.css"
    />
    <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="mb-3">
        <label for="exampleFormControlInput1" class="form-label">Email address</label>
        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
    </div>
    <div class="mb-3">
        <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
    </div>

    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
        <label class="form-check-label" for="flexCheckDefault">
          Default checkbox
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
        <label class="form-check-label" for="flexCheckChecked">
          Checked checkbox
        </label>
      </div>
</body>
</html>

 

 

 

 

ㅁ부트스트랩(Bootstrap): 웹 애플리케이션 및 웹사이트를 쉽고 빠르게 개발할 수 있도록 도와주는 오픈 소스 프론트엔드 프레임워크

Bootstrap은 부츠의 끈(boot's strap)이라는 뜻으로, 신발 끈만 땡겨도 신발이 잘 신겨진다는 느낌이다

 

트위터(Twitter)에서 내부 도구 개발을 위해 처음 만들어졌으며, 이후 2011년에 오픈 소스로 공개되면서 전 세계적으로 널리 사용되고 있다. 부트스트랩은 현재도 활발하게 업데이트되고 있으며, 수많은 테마와 플러그인이 개발자 커뮤니티에 의해 공유되고 있다. 따라서 초보자부터 숙련된 개발자까지 폭넓게 활용할 수 있는 필수 프레임워크라 할 수 있다.

부트스트랩의 특징

  1. 반응형 웹 디자인(Responsive Web Design)
    • 부트스트랩은 모바일 퍼스트(Mobile First) 디자인 철학을 바탕으로 반응형 웹 페이지를 쉽게 구축할 수 있다
    • 그리드 시스템(Grid System)을 사용하여 화면 크기에 따라 콘텐츠의 레이아웃이 유동적으로 변경된다
  2. 미리 정의된 UI 컴포넌트
    • 버튼, 네비게이션 바, 모달, 카드, 폼 등 다양한 UI 컴포넌트가 미리 정의되어 있어 일관된 디자인을 유지하면서도 개발 시간을 크게 단축할 수 있다
    • CSS와 JavaScript가 결합된 컴포넌트들은 추가적인 플러그인 설치 없이 바로 사용할 수 있다
  3. 풍부한 스타일링 옵션
    • 기본적으로 세련된 디자인이 적용되어 있으며, CSS 커스터마이징을 통해 쉽게 스타일을 변경할 수 있다
    • Sass를 사용하면 더 정교한 스타일링과 테마 설정이 가능하다
  4. 강력한 문서화와 커뮤니티 지원
    • 공식 문서가 매우 상세하게 제공되며, 수많은 예제 코드와 설명이 포함되어 있어 학습 곡선이 낮다(초보자에게 유리)
    • GitHub 저장소와 커뮤니티가 활성화되어 있어 문제 해결 및 플러그인 확장에 유리하다

주요 기능

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

  • 부트스트랩의 그리드 시스템은 12개의 열(Column)로 구성되어 있으며, 반응형 레이아웃을 손쉽게 구현할 수 있다
  • 다양한 화면 크기(xs, sm, md, lg, xl)에 맞춰 Col-breakpoint-number 형식으로 열을 배치할 수 있다
<div class="container">
  <div class="row">
    <div class="col-md-6">왼쪽 열</div>
    <div class="col-md-6">오른쪽 열</div>
  </div>
</div>
  • 위 코드는 화면이 md(중간 크기) 이상일 때 두 개의 열이 가로로 배치되며, 그 이하일 때는 세로로 쌓인다

2. UI 컴포넌트(Components)

  • 버튼(Button): btn-primary, btn-success, btn-danger 등 미리 정의된 스타일을 사용하여 일관된 UI 디자인을 유지할 수 있다
<button class="btn btn-primary">기본 버튼</button>
<button class="btn btn-success">성공 버튼</button>
<button class="btn btn-danger">경고 버튼</button>

 

  • 네비게이션 바(Navigation Bar): 반응형 네비게이션 바를 손쉽게 구현할 수 있으며, 다양한 색상 테마가 제공된다
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">브랜드</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <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="#">홈</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">기능</a>
      </li>
    </ul>
  </div>
</nav>

 

  • 모달(Modal): 팝업 형태의 모달 창을 쉽게 생성하고 제어할 수 있다
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  모달 열기
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">모달 제목</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="닫기">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        모달 내용이 들어갑니다.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">닫기</button>
      </div>
    </div>
  </div>
</div>

 

 

 

 

 

+ (부트스트랩을 이용한 로그인 개발)

https://github.com/imclaremont/FE-login

 

GitHub - imclaremont/FE-login: with Bootstrap

with Bootstrap. Contribute to imclaremont/FE-login development by creating an account on GitHub.

github.com

 

+ (부트스트랩을 이용한 로또 개발)

https://github.com/imclaremont/lottery-js

 

GitHub - imclaremont/lottery-js: 부트스트랩을 이용한 로또 시스템

부트스트랩을 이용한 로또 시스템. Contribute to imclaremont/lottery-js development by creating an account on GitHub.

github.com

저작자표시 비영리 변경금지

티스토리툴바