20211119 부트스트랩 - 그리드 시스템
그리드 시스템, 반응형 유틸리티
- 부트스트랩 그리드 시스템과 반응형 유틸리티를 활용하여 반응형 웹사이트 제작을 할 수 있다.
그리드 시스템
- 특정 대상의 상위(부모)요소의 크기를 12열로 나누어 정렬시키는 방식
- 크게 디바이스 크기 4가지로 구분하여 정렬 가능
- 디바이스 크기 분류 : 큰 데스크탑 (lg) > 작은 데스크탑(테이블) (md) > 태블릿 (sm) > 스마트폰 (xs)
- 그리드 시스템은 접두사 col-디바이스 크기(lg, md, sm, sx)-*(12칸 기준으로 차지할 영역)
ex) col-log-6
- 디바이스 크기 4가지를 부트스트랩에서 정의를 해놓고 디바이스 크기가 정해놓은 범위에 접근시 각각의 lg, md, sm, xs 접두사들이 반응을 한다.
- .container, .container-fluid 클래스 내에서 주로 사용된다.
container : 반응형 고정폭 콘테이너
container-fluid : 전체폭까지 늘어나는 최대폭 콘테이너
<div class="container bg-danger">container</div>
<div class="container-fluid bg-info">container-fluid</div>
- *** 한 행을 표기할 때 .row클래스를 선언하고 그 내부에 그리드 시스템을 적용시킨다.
- 디바이스 크기 4가지 기준으로 설정해놓은 접두사 lg, md, sm, xs로 활용하여 정렬 했을 경우 정렬해놓은 사이즈 이하 범위로 디바이스 크기가 내려갈 경우 12칸으로 인식하여 가로 100%를 차지하게 된다.
(예: col-md-6 -> md 범위 이하로 내려갈 경우 > 12칸으로 인식하도록 바뀜)
.row
- 기본적으로 가로 margin 가로 -값을 가지고 있다.
<div class="row">
<div class="alert alert-danger">row 기본 성격 알아보기</div>
</div>
<div class="alert alert-danger">row 기본 성격 알아보기</div>
col-*-*
- col - 디바이스 크기 - 숫자
- 각각의 디바이스 크기별로 적용되도록 클래스를 중첩시킬 수 있다.
- col-xs-3 을 세번 했을 경우 -> 총 12중 3이 빈다.
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-4 col-xs-3">
<div class="alert alert-info">col-lg-4</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-4 col-xs-3">
<div class="alert alert-info">col-lg-4</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-4 col-xs-3">
<div class="alert alert-info">col-lg-4</div>
</div>
</div>1) lg크기 ( 4 + 4 + 4)
2) md ( 6 + 6 ) ( 6 )
3) sm (4 + 4 + 4 )
4) xs (3 + 3 + 3 ) (3 공백)
- 적용된 클래스가 col-md-* 만 적용되었을 경우 lg 크기도 같이 적용되며,
md 이하에서는 12기준으로 크기를 잡는다. 즉 적용된 대상의 크기는 그 이상의 크기에도 동일하게 적용이 된다.
적용된 대상의 크기 이하는 12으로 재정렬된다.
<div class="row">
<div class="col-sm-6">
<div class="alert alert-info">col-sm-6</div>
</div>
<div class="col-sm-6">
<div class="alert alert-info">col-sm-6</div>
</div>
</div>col-sm-* 만 있을 경우, md 와 lg 에도 동일하게 적용된다.
sm 미만(xs)에서는 12기준으로 잡는다.
반응형 유틸리티
- 크게 디바이스 크기 4자리를 구분하여 디바이스별로 특정 대상을 보이거나 안보이게 할 수 있다.
- .visible-*(디바이스 크기)-*(block, inline, inline-block)
- visible : 적용된 대상이 보이게 한다. 해당 디바이스 크기에서만 보인다.
- .hidden-*(디바이스 크기)
- hidden : 적용된 대상을 감춘다.
<div class="row">
<div class="col-sm-12 visible-lg-block">
<div class="alert alert-success">col-sm-4</div>
</div>
<div class="col-sm-4">
<div class="alert alert-success">col-sm-4</div>
</div>
<div class="col-sm-4 hidden-xs">
<div class="alert alert-success">col-sm-4</div>
</div>
<div class="col-sm-4 hidden-xs">
<div class="alert alert-success">col-sm-4</div>
</div>
</div>1) lg 일 경우 : ( 12 ) + ( 4 + 4 + 4)
2) md 일 경우 : (4 + 4 + 4)
3) xs 일 경우 :
( lg 에서만 보임) + ( 4 ) + ( xs에서 히든 + xs에서 히든)
offset
- 12 기준으로 나누어진 상황에서 왼쪽의 빈 공간을 차지하도록 만들 수 있는 방법
- .col-*(디바이스크기)-offset-*(12기준)
- col-sm-offset-4 -> 왼쪽에 4칸을 차지하도록 한다.
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="alert alert-warning">col-sm-4</div>
</div>
</div>1) sm 일 경우 왼쪽에 offset 4 가 적용되어 가운데 정렬이 되었다.
sm 이상 (md, lg) 일경우에도 offset 4가 적용된다.
2) xs 의 경우
부트스트랩 실습.
1. 실습. 아래의 대상이 예시대로 정렬될 수 있도록 그리드 시스템을 적용시켜라.
lg, md, sm 일때 : 행 한줄
xs : 행 2줄
<div class="row">
<div class="col-sm-3 col-xs-6">
<div class="alert alert-danger">1번째 블럭</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="alert alert-info">2번째 블럭</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="alert alert-danger">3번째 블럭</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="alert alert-info">4번째 블럭</div>
</div>
</div>
2. 부트스트랩 그리드 시스템 실습
실습. 화면에 제시된 이미지를 보고 구성하도록 하여라.
<div class="row">
<div class="col-sm-6">
<table class="table table-striped table-bordered table-hover">
<tr>
<td>공지사항</td>
</tr>
<tr>
<td>내용</td>
</tr>
<tr>
<td>내용</td>
</tr>
</table>
</div>
<div class="col-sm-6 hidden-xs">
<table class="table table-striped table-bordered table-hover">
<tr>
<td>자유게시판</td>
</tr>
<tr>
<td>내용</td>
</tr>
<tr>
<td>내용</td>
</tr>
</table>
</div>
<div class="col-sm-12">
<table class="table table-striped table-bordered table-hover">
<tr>
<td>뉴스</td>
</tr>
<tr>
<td>내용</td>
</tr>
<tr>
<td>내용</td>
</tr>
</table>
</div>
</div>