1) 사용법
2) layout
3) img
4) table
5) form
6) card
Bootstrap
🕵️♀️Bootstrap이란?
웹 프레임워크 중 하나이다. 손쉽게 웹 스타일링이 가능하고 jQuery 플러그인 사용이 가능하다는 게 장점이다.
Bootstrap 사용법에는 크게 두 가지가 있다.
- Download
https://getbootstrap.com/ 접속 후 다운 받아 사용 가능하다.- CDN
https://getbootstrap.com/ getStarted 를 눌러 link와 script를 html 문서에 추가하여 사용 가능하다.
부트스트랩은 웹을 12개의 열으로 나눠 배치하고 정렬한다.
<div class="container"> <div class="row"> <div class="col-md-4">hello</div> <div class="col-md-4">hello</div> <div class="col-md-4">hello</div> </div> <div class="row"> <div class="col-md-4 offset-md-4">hello</div> </div> </div>
container
는 행과 열을 감싸는 역할을 한다.
row
는 하나의 행을 뜻 한다. 위 예제에서는 행이 두 개이다.
col-md-4
는 12개의 열에서 4개의 열 너비만큼 차지한다는 의미다.
공식 사이트에서 확인 가능하니 외울 필요는 없다.md
의미는 반응형시 뷰포트 사이즈가 768px 미만이면 container 최대 사이즈가 720px 이라는 의미다.
col-md-4
가 3개 있으니 한 행에서 12개의 열을 모두 차지하게 된다.
두 번째 행을 보면offset-md-4
를 사용해서 여백(마진)을 줄 수 있다. 값을 안 주면 좌측 정렬이고 숫자가 커질수록 우측으로 움직인다.
<div class="container-fluid"> <div class="row"> <div class="col-md-4">hello</div> <div class="col-md-4">hello</div> <div class="col-md-4">hello</div> </div> </div>
바로 이전 예제와 다른점은
fluid
이다.
fluid는 마진을 없애고 화면 너비를 100% 가득채운다.
<div class="container"> <div class="row"> <div class="col-md-4">hello</div> <img src="./unknown.png" class="col-md-4 img-fluid" /> <div class="col-md-4">hello</div> </div> <div class="row"> <div class="col-md-6">hello</div> <img src="./unknown.png" class="col-md-6 img-fluid" /> </div> </div>
위에 설명했던 내용이다.
fluid
를 통해 img도 반응형으로 만들 수 있다. 이미지에 max-width: 100%; 및 height: auto; 가 적용된 것과 같다.
<div class="container"> <div class="row"> <div class="col-md-12"> <table class="table table-hover"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div>
위에 소스코드의 결과물이다. 일반 html table 작성 마크업에서 다른 부분은
table-hover
다 추가적인 css 스타일 없이 각 행에 마우스를 위치시키면 색상이 변경된다.
<div class="mb-3"> <label for="email" class="form-label">Email address</label> <input type="email" class="form-control" id="email" placeholder="name@example.com"> </div> <div class="mb-3"> <label for="text" class="form-label">Example textarea</label> <textarea class="form-control" id="text" rows="3"></textarea> </div>
위와 같이
form-label
과form-control
로 form input 스타일링이 가능하다.
<div id="carouselControl" class="carousel" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="./unknown.png" class="d-block w-100" alt="..." /> </div> <div class="carousel-item"> <img src="./unknown.png" class="d-block w-100" alt="..." /> </div> <div class="carousel-item"> <img src="./unknown.png" class="d-block w-100" alt="..." /> </div> </div>
위 소스 코드로 이미지가 자동으로 옆으로 슬라이드 되는 carousel 효과를 만들 수 있다. 다른 것보다
carousel
클래스 작성과 button 등록시 필요한data-bs-ride
속성을 집중해서 보면 좋을 것 같다.<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="./unknown.png" class="d-block w-100" alt="..." /> </div> <div class="carousel-item"> <img src="./unknown.png" class="d-block w-100" alt="..." /> </div> <div class="carousel-item"> <img src="./unknown.png" class="d-block w-100" alt="..." /> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev" <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next" <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div>
위 소스코드는 버튼을 포함한 전체 소스코드로 전체 소스코드를 해석하기보다는 필요시 복사하여 사용하는 것도 좋은 방법이다.