---
description: 210712, 210714
---

# 부트스트랩

## 부트스트랩 설치

전문가들이 미리 만들어 놓은 CSS 양식

`getbootstrap.com` 으로 부트스트랩을 설치할 수 있고 `startbootstrap.com` 에서 여러가지 탬플릿 양식을 다운받을 수 있다.

* 버전은 베타버젼 5 보다는 4버전을 사용하면 좋다. (둘의 문법이 조금 다름)



부트스트랩 사용은 두 가지로 할 수 있는데, 첫번째는 코드를 html 파일에 직접 붙이고 참조를 인터넷 링크로 설정하는 방법이다.

![](https://2275555537-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNN4u9o9noCQwX8pO35%2F-MeNyV9DJjoyn_i6q_op%2F-MeO7JeRIz0Eqy_qrHIe%2Fimage.png?alt=media\&token=417257a8-179f-49ed-8dbc-eec4318a8413)

```markup
<link href="practice.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
```

두번째는, 같은 폴더에 다운받은 코드를 참조하는 방식이다.

![](https://2275555537-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNN4u9o9noCQwX8pO35%2F-MeNyV9DJjoyn_i6q_op%2F-MeO7jeeGhcRRGRK2lXK%2Fimage.png?alt=media\&token=7e6197cc-e1ad-416e-8f98-4e6d1a594187)

![](https://2275555537-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNN4u9o9noCQwX8pO35%2F-MeNyV9DJjoyn_i6q_op%2F-MeO8HMf_dHMErwbGm0K%2Fimage.png?alt=media\&token=ba367f0f-1696-423d-b5a1-fdd7014598a8)

```markup
<link href="./bootstrap4/css/bootstrap.min.css" rel="stylesheet" type="text/css">
```



## Navigation Bar

`getbootstrap.com` 에서 Layout에 있는 NavBar를 보면 아래와 같은 코드를 얻을 수 있다.

```markup
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
```

이를 `About.me.html` 에 붙이면,

![](https://2275555537-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNN4u9o9noCQwX8pO35%2F-MeO8hFPBoVNqVx_sELl%2F-MeO9uTpOFPFh5_3hdxs%2Fimage.png?alt=media\&token=6775b6c6-a2f9-49f4-bbb9-836a3b8a7e1e)

다음과 같이 네비게이션 바가 생긴 모습. 이미 누가 만들어놓아서 편리하게 이용할 수 있고 디자인도 이쁘다는 장점이 있지만 부트스트랩은 다음과 같은 장점 때문에도 사용한다.

![](https://2275555537-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNN4u9o9noCQwX8pO35%2F-MeO8hFPBoVNqVx_sELl%2F-MeOAF-LZTp014eCAIGQ%2Fimage.png?alt=media\&token=f0692bb9-136d-48ba-bd52-3a4d0b35117d)

화면 크기가 변경되면 그에 따라 보여지는 모습도 바꿔준다는 것이다.

## Container

지금은, 네비게이션 바 아래로 내용이 너무 여백없이 붙어있다.

이는 `div class="container"` 를 이용해서 여백을 만들 수 있다

```markup
<div class="container">
    <h1>About me</h1>
    <h2>장고 스터디 상민입니다.</h2>
    
    <p>HTML, CSS, JS, DJANGO로 웹사이트 만들기</p>
    <p>조성범 멍충이 황인태 바보 오형주 짱</p>
    <a href="index.html">첫 화면으로 가기</a>
    
    
    <img src="images/photo2.jpg" width="400px">
    
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</div>
```

![](https://2275555537-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNN4u9o9noCQwX8pO35%2F-MeYFioKtxjE2xn_NuBv%2F-MeYT5WAUJuf6gRDMio9%2Fimage.png?alt=media\&token=e732486f-ee00-401d-9d97-1352844639ba)

양 옆으로 여백이 생긴 모습

## Grid

그리드는 부트스트랩에서 화면을 관리하는 방식이다.

화면에 있는 컨텐츠들을 모두 가로로 놓고 싶으면 다음과 같이 정의하면 된다

```markup
<div class="row"></div>
```

이 때, 가로로 놓여진 컨텐츠들 사이에도 비율을 할당하고 싶을 때는

```markup
<div class="col-9"></div>
<div class="col-3"></div>
```

처럼 하면 9 : 3의 비율로 컨텐츠가 배치되게 된다.

```markup
<div class='col-sm'></div>
```

이는 총 갯수만큼 동일한 비율로 배치되게 하겠다는 뜻.

만약 div 개수가 4개이면 1 : 1 : 1 : 1로 배치된다.



여기서, `sm`은 small 이라는 뜻이다. small의 정의는 다음과 같다

![](https://2275555537-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNN4u9o9noCQwX8pO35%2F-MeYFioKtxjE2xn_NuBv%2F-MeYXhzbh5e81859CwIJ%2Fimage.png?alt=media\&token=6b6a9eef-992a-434a-be4c-4c1369232c9d)

```markup
<div class="container">
    <div class="row">
      <div class="col-sm col-lg-6 bg-info">
        One of three columns
      </div>
      <div class="col-sm col-lg-3 bg-secondary">
        One of three columns
      </div>
      <div class="col-sm col-lg-3 bg-warning">
        One of three columns
      </div>
    </div>
  </div>
```

위 코드처럼 작성하게 되면 화면이 작을 때에는 1 : 1 : 1 비율로, 화면이 클 때는 6 : 3 : 3 비율로 배치되게 된다.

![](https://2275555537-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNN4u9o9noCQwX8pO35%2F-MeYFioKtxjE2xn_NuBv%2F-MeYYD84UJHTfRKUIKJv%2Fimage.png?alt=media\&token=58dacd01-7364-4b0c-b9c9-f876fa859a2d)

![](https://2275555537-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNN4u9o9noCQwX8pO35%2F-MeYFioKtxjE2xn_NuBv%2F-MeYYBKOm4l8tFNA5cZF%2Fimage.png?alt=media\&token=01e83bc2-f2d8-421b-ba68-05ed2f50adf6)

화면 크기에 따라 이미지 크기고 변경하기 위해서는 이미지 크기를 고정하면 안되고 `img-fluid` 라는 클래스로 정의해줘야 한다

```markup
<img src="images/photo2.jpg" width="400px">

<img src="images/photo2.jpg" class="img-fluid">
```



또한, 배경색을 지정해줄 수도 있다.

![](https://2275555537-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNN4u9o9noCQwX8pO35%2F-MeYFioKtxjE2xn_NuBv%2F-MeYXJHWVJeDslvhyG_W%2Fimage.png?alt=media\&token=5144e1ee-ad42-45c6-822e-4c5daac9ba9c)

```markup
<div class="container">
    <div class="row">
      <div class="col-sm bg-info">
        One of three columns
      </div>
      <div class="col-sm bg-secondary">
        One of three columns
      </div>
      <div class="col-sm bg-warning">
        One of three columns
      </div>
    </div>
</div>
```

![](https://2275555537-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNN4u9o9noCQwX8pO35%2F-MeYFioKtxjE2xn_NuBv%2F-MeYXUNGldXSH6_YA7Wq%2Fimage.png?alt=media\&token=9e8d1824-9565-43bd-b087-f8ee6be08a31)



이러한 모든 기능은 html의 기능이 아니라 부트스트랩에 정의되어 있는 기능이다

* 모든 기능이라 함은 `<div class = "blahblah">` 로 정의되는 모든 것



## Spacing

컨텐츠를 위쪽 네비게이션 바와 여백을 주고 싶다. 이 때 알아두어야 할 용어 두가지.

* 마진 : 경계 바깥쪽 간격 설정
* 패딩 : 경계 안쪽 간격 설정

```markup
<div class="row my-5">
```

* m : margin
* y : y축으로
* 5 : 5칸 만큼



![](https://2275555537-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNN4u9o9noCQwX8pO35%2F-MeYZKMrxT0HkZW0irK3%2F-MeYgibg0ggxlVBxVGwW%2Fimage.png?alt=media\&token=e2fa018f-c5ef-4bdf-b593-c83d36d9a00d)

또 위처럼 로그인을 오른쪽으로 보내고 싶을 때는 Log In 왼쪽으로 마진을 줘야 한다

```markup
<ul class="navbar-nav ml-auto">
  <li class="nav-item">
    <a class="nav-link" href="#">Log In</a>
  </li>
</ul>
```

* m : margin
* l : left, 왼쪽으로
* auto : 최대한

또한, `auto` 라는 것은 상대적인 개념이기 때문에 다른 navbar에서 mr-auto를 주고 여기서는 마진을 설정하지 않아도 동일하다.

그리고, 부트스트랩은 총 12칸으로 나뉘어져 있다고 생각하면 된다. 그래서 8 : 4 나 9 : 3 처럼 나누는 것

## 블로그 리스트 페이지 만들기

이제 `blog_list.html` 도 수정할 것이다. 양식은 `about_me.html` 과 동일하게 하기 위해 CSS와 JS를 똑같이 작성해준다.

```markup
<div class="container">
    <div class="row my-3">
        <div class="col-md-8 col-lg-9">
            <h1>Blog</h1>
            <p>공사중...</p>
        </div>
        <div class="col-md-4 col-lg-3">
            <h1>Blog2</h1>
            <p>공사중...2</p>
        </div>
    </div>
</div>
```

![](https://2275555537-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNN4u9o9noCQwX8pO35%2F-MeYZKMrxT0HkZW0irK3%2F-MeYjwLT6fuqasacNNPv%2Fimage.png?alt=media\&token=d72e1554-fafb-49b1-99ee-9a2edf3dc51d)

* 미디엄 사이즈 일때는 8 : 4, 라지 사이즈 일때는 9 : 3 으로 설정



## Card & Folder

`startbootstrap.com` 에서 `blog home` 이라고 검색하면 나오는 테마를 찾아서 다운할 수 있다.

* 검색은 ctrl + f

![](https://2275555537-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNN4u9o9noCQwX8pO35%2F-MeYZKMrxT0HkZW0irK3%2F-MeYkP-qirb6UTT_BGPf%2Fimage.png?alt=media\&token=4d52dd5b-5193-4dd0-947e-b0861a31ecca)



여기서는, 다운하지 않고 깃허브에 있는 코드를 조금 복붙한다.

```markup
<!-- Blog post-->
<div class="card mb-4">
    <a href="#!"><img class="card-img-top" src="https://dummyimage.com/700x350/dee2e6/6c757d.jpg" alt="..." /></a>
    <div class="card-body">
        <div class="small text-muted">January 1, 2021</div>
        <h2 class="card-title h4">Post Title</h2>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla.</p>
        <a class="btn btn-primary" href="#!">Read more →</a>
    </div>
</div>
```

`dummyimage.com` 이나 `placehold.it` 에서는 이미지 크기에 해당하는 빈 이미지를 제공한다

* 강의에서는 placehold.it 을 참조했지만 이후에 코드가 변경되어서 dummyimage.com 을 참조

![](https://2275555537-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNN4u9o9noCQwX8pO35%2F-MeYZKMrxT0HkZW0irK3%2F-MeYmYc8QlzAWQrMG8Ff%2Fimage.png?alt=media\&token=569394c2-2338-4ca0-b96e-ea1a1cd45c3b)



```markup
<!-- Search widget-->
<div class="card mb-4">
    <div class="card-header">Search</div>
    <div class="card-body">
        <div class="input-group">
            <input class="form-control" type="text" placeholder="Enter search term..." aria-label="Enter search term..." aria-describedby="button-search" />
            <button class="btn btn-primary" id="button-search" type="button">Go!</button>
        </div>
    </div>
</div>

<!-- Categories widget-->
<div class="card mb-4">
    <div class="card-header">Categories</div>
    <div class="card-body">
        <div class="row">
            <div class="col-sm-6">
                <ul class="list-unstyled mb-0">
                    <li><a href="#!">Web Design</a></li>
                    <li><a href="#!">HTML</a></li>
                    <li><a href="#!">Freebies</a></li>
                </ul>
            </div>
            <div class="col-sm-6">
                <ul class="list-unstyled mb-0">
                    <li><a href="#!">JavaScript</a></li>
                    <li><a href="#!">CSS</a></li>
                    <li><a href="#!">Tutorials</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Side widget-->
<div class="card mb-4">
    <div class="card-header">Side Widget</div>
    <div class="card-body">You can put anything you want inside of these side widgets. They are easy to use, and feature the Bootstrap 5 card component!</div>
</div>

<!-- Footer-->
<footer class="py-5 bg-dark">
    <div class="container"><p class="m-0 text-center text-white">Copyright &copy; Your Website 2021</p></div>
</footer>

<!-- Pagination-->
<nav aria-label="Pagination">
    <hr class="my-0" />
    <ul class="pagination justify-content-center my-4">
        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">Newer</a></li>
        <li class="page-item active" aria-current="page"><a class="page-link" href="#!">1</a></li>
        <li class="page-item"><a class="page-link" href="#!">2</a></li>
        <li class="page-item"><a class="page-link" href="#!">3</a></li>
        <li class="page-item disabled"><a class="page-link" href="#!">...</a></li>
        <li class="page-item"><a class="page-link" href="#!">15</a></li>
        <li class="page-item"><a class="page-link" href="#!">Older</a></li>
    </ul>
</nav>
```

![](https://2275555537-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNN4u9o9noCQwX8pO35%2F-MeYZKMrxT0HkZW0irK3%2F-MeYoSkByb2-H0aUfRpY%2Fimage.png?alt=media\&token=36deedb4-07a0-424c-b712-25e91dc9f446)

1\) Card

* 가장 큰 컨텐츠 현재는 Card와 Side를 lg-9:3, md-8:4 로 나누었다

2\) Search Widget

3\) Categories Widget

* lg 기준 9 : 3으로 나뉘어있는 위젯 안에서도 또 6:6으로 나뉘어져 있는 모습

4\) Side Widget

5\) Pagination

* 페이지네이션이라고 하며, 페이지의 목차를 정의해주는 부분

6\) Footer

* 하단에 페이지에 대한 마감을 할 수 있다.



## Modal & Fontawesome

로그인 할 때 창이 나오는 것을 Model(모달) 이라고 한다.

```markup
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <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">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
```

`<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">`

* `btn btn-primary` : 버튼 색깔이라는 뜻
* `data-toggle="modal"` : 버튼을 누르면 모달을 호출
* `data-target="#exampleModel"` : id가 exampleModal 인 태그와 연결. 이 태그는 아래에 있음. 여기서 `#` 은 ID 를 의미한다.

```markup
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Log In</a>
            </li>
        </ul>

    </div>
</nav>

<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <h5 class="modal-title" id="loginModalLabel"><i class="fas fa-sign-in-alt"></i>Log In</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-md-6 col-sm-12">
                    <button type="button" class="btn btn-outline-dark btn-block btn-sm"><i class="fab fa-google"></i> Log in with Google</button>
                    <button type="button" class="btn btn-outline-dark btn-block btn-sm"><i class="far fa-user"></i> Log in with username</button>
                </div>
                <div class="col-md-6 col-sm-12">
                    <button type="button" class="btn btn-outline-dark btn-block btn-sm"><i class="far fa-envelope"></i> Sign up with E-mail</button>
                </div>
            </div>
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
    </div>
    </div>
</div>
```

![](https://2275555537-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNN4u9o9noCQwX8pO35%2F-MeYrb6I4mBo_4ZIVhxg%2F-MeYudFJ6zgbby_k3Tcn%2Fimage.png?alt=media\&token=44dd2be2-0f54-4b5d-9220-eda2ca1157eb)

1\)

```markup
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Log In</a>
```

* Login을 누르면 모달이 뜰 수 있도록 했다

2, 3)

```markup
<script src="https://kit.fontawesome.com/--------.js" crossorigin="anonymous"></script>

<div class="col-md-6 col-sm-12">
    <button type="button" class="btn btn-outline-dark btn-block btn-sm"><i class="fab fa-google"></i> Log in with Google</button>
    <button type="button" class="btn btn-outline-dark btn-block btn-sm"><i class="far fa-user"></i> Log in with username</button>
</div>
<div class="col-md-6 col-sm-12">
    <button type="button" class="btn btn-outline-dark btn-block btn-sm"><i class="far fa-envelope"></i> Sign up with E-mail</button>
</div>
```

* 버튼 디자인을 바꾸기 위해 `btn-block` 과 `btn-sm` 을 추가했다.
* 아이콘을 가져오기 위해 fontawesome에서 js 코드를 추가했다
* 그리고 \<i> 를 사용해서 아이콘을 불러왔다.

4\)

```markup
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
```

* footer에서 Save Changes를 제거했다.

