부트스트랩

210712, 210714

부트스트랩 설치

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

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

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

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

<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">

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

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

Navigation Bar

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

<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 에 붙이면,

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

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

Container

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

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

<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>

양 옆으로 여백이 생긴 모습

Grid

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

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

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

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

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

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

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

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

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

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

<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 비율로 배치되게 된다.

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

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

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

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

<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>

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

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

Spacing

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

• 마진 : 경계 바깥쪽 간격 설정

• 패딩 : 경계 안쪽 간격 설정

<div class="row my-5">

• m : margin

• y : y축으로

• 5 : 5칸 만큼

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

<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를 똑같이 작성해준다.

<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>

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

Card & Folder

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

• 검색은 ctrl + f

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

<!-- 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 을 참조

<!-- 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>

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(모달) 이라고 한다.

<!-- 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 를 의미한다.

        <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>

1)

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

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

2, 3)

<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)

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

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