부트스트랩 설치
전문가들이 미리 만들어 놓은 CSS 양식
getbootstrap.com 으로 부트스트랩을 설치할 수 있고 startbootstrap.com 에서 여러가지 탬플릿 양식을 다운받을 수 있다.
버전은 베타버젼 5 보다는 4버전을 사용하면 좋다. (둘의 문법이 조금 다름)
부트스트랩 사용은 두 가지로 할 수 있는데, 첫번째는 코드를 html 파일에 직접 붙이고 참조를 인터넷 링크로 설정하는 방법이다.
Copy <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"> 두번째는, 같은 폴더에 다운받은 코드를 참조하는 방식이다.
Copy <link href="./bootstrap4/css/bootstrap.min.css" rel="stylesheet" type="text/css">
Navigation Bar
getbootstrap.com 에서 Layout에 있는 NavBar를 보면 아래와 같은 코드를 얻을 수 있다.
Copy <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" 를 이용해서 여백을 만들 수 있다
Copy <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
그리드는 부트스트랩에서 화면을 관리하는 방식이다.
화면에 있는 컨텐츠들을 모두 가로로 놓고 싶으면 다음과 같이 정의하면 된다
Copy <div class="row"></div> 이 때, 가로로 놓여진 컨텐츠들 사이에도 비율을 할당하고 싶을 때는
Copy <div class="col-9"></div>
<div class="col-3"></div> 처럼 하면 9 : 3의 비율로 컨텐츠가 배치되게 된다.
Copy <div class='col-sm'></div> 이는 총 갯수만큼 동일한 비율로 배치되게 하겠다는 뜻.
만약 div 개수가 4개이면 1 : 1 : 1 : 1로 배치된다.
여기서, sm은 small 이라는 뜻이다. small의 정의는 다음과 같다
Copy <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 라는 클래스로 정의해줘야 한다
Copy <img src="images/photo2.jpg" width="400px">
<img src="images/photo2.jpg" class="img-fluid">
또한, 배경색을 지정해줄 수도 있다.
Copy <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
컨텐츠를 위쪽 네비게이션 바와 여백을 주고 싶다. 이 때 알아두어야 할 용어 두가지.
Copy <div class="row my-5">
또 위처럼 로그인을 오른쪽으로 보내고 싶을 때는 Log In 왼쪽으로 마진을 줘야 한다
Copy <ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Log In</a>
</li>
</ul> 또한, auto 라는 것은 상대적인 개념이기 때문에 다른 navbar에서 mr-auto를 주고 여기서는 마진을 설정하지 않아도 동일하다.
그리고, 부트스트랩은 총 12칸으로 나뉘어져 있다고 생각하면 된다. 그래서 8 : 4 나 9 : 3 처럼 나누는 것
블로그 리스트 페이지 만들기
이제 blog_list.html 도 수정할 것이다. 양식은 about_me.html 과 동일하게 하기 위해 CSS와 JS를 똑같이 작성해준다.
Copy <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 이라고 검색하면 나오는 테마를 찾아서 다운할 수 있다.
여기서는, 다운하지 않고 깃허브에 있는 코드를 조금 복붙한다.
Copy <!-- 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 을 참조
Copy <!-- 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 © 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(모달) 이라고 한다.
Copy <!-- 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">×</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 를 의미한다.
Copy <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">×</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)
Copy <a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Log In</a> Login을 누르면 모달이 뜰 수 있도록 했다
2, 3)
Copy <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)
Copy <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div> footer에서 Save Changes를 제거했다.
