부트스트랩 그리드 (Bootstrap Grid System)
부트스트랩은 그리드 시스템을 제공하여 웹 페이지의 레이아웃을 구성하는 도움을 줍니다.
그리드 시스템은 웹 펭지를 일정한 열과 행으로 분할하여 콘텐츠를 배치하는 방법을 제공합니다.
이를 통해 반응형 웹 디자인을 구현하고 다양한 디바이스에 대응할 수 있습니다.
그리드 시스템의 구성 요소
1. 컨테이너(Container) : 그리드 시스템을 감싸는 가장 바깥쪽 요소입니다. .container 클래스를 사용하여 컨테이너를 생성할 수 있습니다.
2. 행(Row) : 컨테이너 내부에서 그리드 행을 생성합니다. .row 클래스를 사용하여 행을 생성할 수 있습니다.
3. 열(Column) : 행 안에 열을 생성합니다. .col 클래스를 사용하여 열을 생성할 수 있으며, 열의 너비를 조정할 수 있습니다. 열은 12개의 컬럼으로 구성됩니다.
<div class="cantainer">
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
</div>작은 화면에서 사라지는 Column 만들기
부트스트랩에서는 디스플레이의 크기별로 요소를 표시하거나 숨길 수 있다.
요소를 숨길때에는 .d-none 클래스 또는 .d-(중단점)-none 중 하나를 선택한다.
부트스트랩에서는 6개의 중단점이 있다.
중단점은 Sass 맵에서 재정의할 수 있다.
| 중단점 | 클래스 | 크기 |
| 매우 작은 | 없음 | <576px |
| 작은 | sm | >=576px |
| 중간 | md | >=768px |
| 큰 | lg | >=992px |
| 특대 | xl | >=1200px |
| 초대형 | xxl | >=1400px |
중단점을 이해하면 요소를 표시하거나 숨기는데 도움이 된다.
d-none d-block 사용 예제
예시로 큰 크기인 ld(>=992px) 이상에서만 요소를 표시하고 그 이하(992px 미만)부터 요소를 숨기고 싶다면
요소의 클래스가 "d-none d-lg-block"으로 정의하면 된다.
<div class="container">
<div class="row">
<div class="col d-none d-lg-block">
col 1 d-none d-lg-block
</div>
<div class="col">
col 2
</div>
<div class="col">
col 3
</div>
<div class="col">
col 4
</div>
</div>
</div>디스플레이의 크기가 992px에서는 아래의 사진처럼 col 1이 표시가 되지만 992px 미만인 경우에는 요소가 숨겨진다.
