BootStrap
- 부트스트랩은 반응형 웹디자인을 쉽게 하기 위해 css의 클래스 선택자별 스타일이 정의되어 있고 동적으로 반응하는 요소들을 위해 자바스크립트 라이브러리를 활용한 코딩이 짜여져 있다.
- 부트스트랩의 구성요소는 CSS, 그리드시스템, 컴포넌트, 자바스크립트 라이브러리이다.
Grid
- 반응형 웹사이트를 위하여 화면을 총 12칸으로 나누어 크기를 구분하여 조정할 수 있음.
- px크기에 따라 lg, md, sm, xs 사용.
px별 사용되는 명령어 종류
column 에 따른 크기 조정
.container .container-fluid
- container : 규정된 크기에서 벗어 났을 때 자동적으로 늘어나지 않음.
- container-fluid : 규정된 크기에서 벗어 났을 때 자동적으로 늘어남.
<div class="container-fluid">
<div class="container">
.row .col
- 구조의 최상위 컨테이너 요소 안쪽에 새로운 가로 한 줄을 넣으려면 div에 row 라는 클래스명을 붙여 행을 만든다.
- div.row 안쪽에 차지하기 원하는 영역 레이아웃 %를 기획하여 col-미디어사이즈-숫자의 클래스명을 지정.
- xs : 항상 적용이됨. (항상 같은 위치로 유지하고 싶으면 사용)
- sm : 가로 해상도 768px 이상에서 적용됨.
- md : 가로 해상도 992px 이상에서 적용됨.
- lg : 가로 해상도 1200px 이상에서 적용됨.
<div class="container">
<div class="row">
<div class="col-sm-6">col-sm-6</div>
<div class="col-sm-6">col-sm-6</div>
</div>
<div class="row">
<div class="col-xs-8">col-xs-8</div>
<div class="col-xs-4">col-xs-4</div>
</div>
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-md-8">div.col-md-8</div>
<div class="col md-4">div.col.md-4</div>
</div>
<div class="row">
<div class="col lg 8">div.col.lg.8</div>
<div class="col lg 4">div.col.lg.4</div>
</div>
</div>
.col-*-* 다중적용
- 여러개의 컬럼을 사용하면 해상도에 따라 열의 가로 크기를 다르게 지정할 수 있음.
- 여러개에 사용되는 웹 어플리케이션에 유용하게 사용됨.
- 아래와 같은 코드를 사용시
- 767px 이하는 xs 크기가 적용
- 768px 이상은 sm크기가 적용
<div class="col-xs-4 col-sm-6"></div>
