생활코딩 아름다운 웹사이트를 위하여!

생활코딩 아름다운 웹사이트를 위하여! - Bootstrap

채개바라 2024. 3. 27. 21:23

2024. 3. 27. 21:23

Bootstrap(부트스트랩)이란?

웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크
하나의 코드로 스마트폰, 태블릿, 데스크탑 등 다양한 기기에서 작동하게 만들 수 있다.
다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다.

Starter template

https://getbootstrap.com/docs/5.0/getting-started/introduction/

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
 
    <!-- Optional JavaScript; choose one of the two! -->
 
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
 
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>
Colored by Color Scripter

cs

만들고자 하는 웹페이지 소스코드에 붙여넣기하면 부트스트랩을 사용할 준비가 완료된다.

BootStrap 버튼

Button

부트스트랩에서는 다음과 같은 버튼을 제공하는데, 버튼 사용을 위해서는 btn이라는 클래스를 기본으로 하고 btn-primary와 같이 추가적인 클래스를 함께 사용해 디자인을 적용하는 방식이다.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Button Group

버튼을 하나의 그룹으로 묶어서 사용하는 방식도 있다.

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

컨테이너와 그리드

1) 컨테이너(Container)

CSS에서 배운 것처럼 컨테이너는 화면 구성요소들을 묶기 위한 틀이다. 보통 <div> 태그들을 중첩해 사용하는 형식을 취하며 부트스트랩도 동일하다. 다만 전체 구조를 잡기 위해서 부트스트랩에서는 두 가지 컨테이너 모델을 제공하고 있다.

1. container

반응형으로 동작하며 고정폭을 가지고 있다. width 설정과 margin 설정을 통해 컨테이너와 브라우저 윈도우 사이의 여백을 조정할 수 있다.

<div class="container">
  <!-- Content here -->
</div>

2. container-fluid

viewport 전체 폭을 모두 차지하는 컨테이너 박스

<div class="container-fluid">
  ...
</div>

2) 그리드(Grid)

그리드는 테이블과 유사하게 화면을 분할해 원하는 레이아웃을 잡기 위해 정의된 것으로, 부트스트랩에서는 12개의 컬럼 구조를 사용할 수 있으며 6개의 화면크기와 관련된 옵션을 제공한다.

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

1. 12 그리드 컬럼

화면을 12개의 컬럼으로 분할할 수 있으며 필요에 따라 컬럼을 묶어 더 큰 크기의 컬럼으로 사용할 수도 있다.

만약 8:4의 비율로 하고 싶다면 다음과 같이 코드를 작성하면 된다.

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

2. 6 그리드 옵션

부트스트랩의 그리드 시스템은 화면 크기에 따라 사용할 수 있는 6개의 옵션을 제공한다.

.col- (extra small devices - 화면크기 < 576px)
.col-sm- (small devices - 화면크기 ≥ 576px)
.col-md- (medium devices - 화면크기 ≥ 768px)
.col-lg- (large devices - 화면크기 ≥ 992px)
.col-xl- (xlarge devices - 화면크기 ≥ 1200px)
.col-xxl- (xxlarge devices - 화면크기 ≥ 1400px)

예를 들어, class값에 <ul class="col-sm-2">와 같은 값을 준다면 화면의 크기가 576px보다 커지면 그리드 기능이 활성화되고, 576px보다 작아지면 그리드 기능을 break시킨다.

[예제]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<body class="container">
    <h1>WEB</h1>
    <div class="row">
        <ul class="col-sm-2"> <!-- 컨테이너를 2:10으로 분할 --> 
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
        <article class="col-sm-10"> <!-- 컨테이너를 2:10으로 분할 -->  
            <h2>Welcome</h2>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus augue, tempus non ullamcorper id, pretium vel velit.
            Etiam lacus nibh, viverra tempor molestie vel, feugiat a massa. Ut turpis neque, mattis a ex nec, sagittis posuere ligula.
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
            Curabitur in justo sed augue laoreet pulvinar non a lorem. Maecenas ac odio in enim lobortis egestas.
            Aliquam sit amet porttitor nisi, vel placerat tortor. Proin eget ex ac tortor mattis semper.
            Duis at nulla nec augue venenatis euismod non bibendum massa. Maecenas aliquet molestie libero, ac commodo mauris ultrices non.
            Nulla rhoncus nulla nibh, ut vehicula lorem iaculis quis. Nunc diam risus, aliquet a massa vitae, placerat aliquam erat.
            Fusce nunc lorem, maximus sed interdum eu, dignissim ac est. Donec quis mattis dui. Aliquam non venenatis orci.
            Sed non enim sed urna porta efficitur ut sed dolor. Suspendisse ut enim felis. Maecenas vestibulum condimentum felis eget accumsan.
            Cras nisi eros, finibus eget orci scelerisque, efficitur sollicitudin dolor. Donec molestie ligula quis velit varius vestibulum.
            Integer venenatis efficitur vulputate. Suspendisse non fringilla quam. Nulla massa nibh, dignissim sit amet lobortis vitae, pulvinar at neque.
            Quisque tempor eu erat at fermentum. Etiam nulla orci, mollis nec ligula pulvinar, venenatis sollicitudin ligula.
            <br><br>
            <div class="btn-group" role="group" aria-label="Basic example">
                <button type="button" class="btn btn-success">Create</button>
                <a href="index.html" class="btn btn-success">Update</a>
                <input type="button" class="btn btn-success" value="Delete">
            </div>
        </article>
    </div>
    <!-- Optional JavaScript; choose one of the two! -->
 
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
 
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
</body>
Colored by Color Scripter

cs

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

StartCode