[Bootstrap] 1장 Bootstrap 이란?

1. Bootstrap 이란?

Bootstrap은 웹 개발을 위한 CSS 프레임워크로, 반응형 웹 디자인을 쉽게 구현할 수 있도록 도와주는 도구이며, Bootstrap의 특징은 다음과 같습니다.

Bootstrap 특징
- 반응형 디자인: Bootstrap은 다양한 화면 크기에 맞춰 자동으로 레이아웃을 조정하는 그리드 시스템 제공
- 사전 스타일링 컴포넌트: 버튼, 네비게이션 바, 모달, 카드 등 다양한 UI 컴포넌트를 미리 스타일링 하여 제공
- CSS 및 JavaScript 통합: CSS와 JavaScript로 작성된 다양한 플러그인을 통한 인터랙티브한 요소를 쉽게 추가

2. Bootstrap 장단점

장점
- 빠른 개발: 미리 정의된 컴포넌트를 사용하여 UI 개발 속도를 크게 향상
- 일관성: 다양한 브라우저와 디바이스에서 일관된 디자인 유지
- 커뮤니티 지원: 방대한 커뮤니티와 자료가 있어 문제 해결이 용이
- 문서화: 잘 정리된 공식 문서가 있어 배우기 쉬움
단점
- 파일 크기: Bootstrap을 사용하면 추가적인 CSS 및 JavaScript 파일이 필요하며, 전체 웹 페이지의 파일 크기가 증가할 가능성이 있음
- 디자인 유사성: 많은 웹 사이트가 Bootstrap을 사용하기 때문에, 디자인이 유사해질 가능성과 이를 피하기 위한 커스터 마이징이 필요
- 학습 곡선: 처음 사용할 경우, 그리드 시스템이나 클래스를 이해하는 데 시간이 소요됨

3. Bootstrap 설치 방법

Bootstrap을 설치하는 방법은 여러 가지가 있지만,일반적으로 다음과 같은 방법을 사용합니다. 가장 간단한 방법으로 Bootstrap의 CDN을 사용하는 것입니다. HTML 파일에 <head> 부분에 다음 코드를 추가합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    />
  </head>
  <body>
    <h1>Hello, Bootstrap!</h1>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </body>
</html>

Node.js와 npm이 설치되어 있다면 다음 명령어로 Bootstrap을 설치할 수 있습니다.

npm install bootstrap

설치 후, CSS와 JS 파일을 프로젝트에서 불러옵니다.

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';

로컬 파일에서 다운로드하려먼 Bootstrap 공식 웹사이트에서 최신 버전을 다운로드하고 다은로드한 파일을 프로젝트 디렉토리에 추가한 후 HTML 파일에서 링크를 설정합니다.

<link rel="stylesheet" href="path/to/bootstrap.min.css">
<script src="path/to/bootstrap.bundle.min.js"></script>

4. Bootstrap 사용 예제

간단하게 Bootstrap을 사용해 기본적인 레이아웃, 버튼, 카드 등을 포함하는 웹 페이지를 만듭니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    />
  </head>

  <body>
    <div class="container mt-5">
      <h1 class="text-center">Bootstrap Example</h1>

      <div class="row mt-5">
        <div class="col-md-4">
          <div class="card">
            <div class="card-body">
              <div class="card-title">Card1</div>
              <div class="card-text">Card Description</div>
              <a href="#" class="btn btn-primary">About</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-body">
              <div class="card-title">Card1</div>
              <div class="card-text">Card Description</div>
              <a href="#" class="btn btn-primary">About</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-body">
              <div class="card-title">Card1</div>
              <div class="card-text">Card Description</div>
              <a href="#" class="btn btn-primary">About</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

GitHub - Koras02/bootstrap-bloging

Contribute to Koras02/bootstrap-bloging development by creating an account on GitHub.

github.com

LIST

1. Bootstrap 이란?

2. Bootstrap 장단점

3. Bootstrap 설치 방법

4. Bootstrap 사용 예제

티스토리툴바