목차
- BS4 Grid 기본 구조 (너비 12등분 후 배분)
- BS4 Grid 분기점
- BS4 Grid 예제
BS4 Grid 기본 구조 (너비 12등분 후 배분)
| 1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
| 4 |
4 |
4 |
| 4 |
8 |
| 6 |
6 |
| 12 |
PS1. 반응형이며, 열은 화면크기 따라 자동 재정렬 됨.
PS2. 사용 가능한 열 12개를 모두 사용할 필요는 없음.
BS4 Grid 분기점
1. 화면너비 구분: 5개
- .col (576px 미만 화면너비 - 초소형장치 (Extra Small Device)
- .col-sm-○ : 576px 이상 화면너비 - 소형장치 (Small Device)
- .col-md-○ : 768px 이상 화면너비 - 중형장치 (Middle Divice)
- .col-lg-○ : 992px 이상 화면너비 - 대형장치 (Large Device)
- .col-xl-○ : 1200px 이상 화면너비 - 대형장치 (Extra Large Device)
2.
각 클래스는 결합해서 보다 역동적이고 유연한 레이아웃 가능.
3.
sm과 md에 대해 동일 너비 설정하려면 sm만 지정하면 됨. (∵ BS는 모바일 우선 접근 정책에 따라, 적은 기기 지정하면 큰 기기는 자동 적용됨.)
BS4 Grid 예제
[예제1] - 모든 화면너비에서 가로 동일 3등분 나열.
(단, 화면 너비가 너무 작으면 밑으로 하나씩 밀림)
<div class="row">
<div class="col">홈짱닷컴 Homzzang.com</div>
<div class="col">홈짱닷컴 Homzzang.com</div>
<div class="col">홈짱닷컴 Homzzang.com</div>
</div>
결과보기
[예제2] - 576px 이상 화면에서 가로 4등분 나열.
※ 576px 미만 경우 세로 1열로 쌓임.
★ 보다 큰 화면 정의가 별도로 없으면, 해당 화면 너비 이상엔 전부 적용.
<div class="row">
<div class="col-sm-3">홈짱닷컴 Homzzang.com</div>
<div class="col-sm-3">홈짱닷컴 Homzzang.com</div>
<div class="col-sm-3">홈짱닷컴 Homzzang.com</div>
<div class="col-sm-3">홈짱닷컴 Homzzang.com</div>
</div>
결과보기
[예제3] - 576px 이상 화면에서 가로 2등분 나열.
※ 576px 미만 경우 세로 1열로 쌓임.
★ 보다 큰 화면 정의가 별도로 없으면, 해당 화면 너비 이상엔 전부 적용.
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
결과보기
