직무교육 19일차(Bootstrap)

Bootstrap

1. 구글에서 개발 -> free

2. 반응형 웹 제작 프레임워크이다.

3. ui -> 가장 많이 활용되는 색상이나 어울리는 색상으로 ui 디자인 되어있다.

참고 사이트 : https://www.w3schools.com/bootstrap/

CDN 방식

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bootstrap Grid System

- colum들의 합이 12가 되어야한다.

Grid Classes

- xs(for phones)

- sm(for tablets)

- md(for desktops)

- lg(for larger desktops)

<div class="container">   <div class="row">     <div class="col-*-*"></div>//"col-xs-12"   </div>   <div class="row">     <div class="col-*-*"></div>//"col-xs-3"     <div class="col-*-*"></div>//"col-xs-3"     <div class="col-*-*"></div>//"col-xs-6"   </div>   <div class="row">     ...   </div> </div>

<div class="container-fluid">

- layout을 화면에 꽉차게 보여준다.(margin:0)

[Medium Devices]

<div class="container">     <h1>Medium Grid</h1>     <!--993까지 md, 992이하로는 sm 적용-->     <div class="row">         <div class="col-sm-3 col-md-6" style="background-color:yellow;">             korea         </div>         <div class="col-sm-9 col-md-6" style="background-color:pink;">             hello         </div>     </div> </div>

- xs로 설정해주면 아무리 화면크기가 작아져도 끝까지 설정이 유지된다.

<img src="image/sea.jpg" class="img-responsive">

- class 속성 설정해주면 창크기가 줄어들면 이미지 사이즈도 같이 줄어든다.