Bootstrap 5 그리드
Bootstrap 5 그리드 시스템
Bootstrap의 그리드 시스템은 flexbox로 구성되어 있으며, 페이지에 최대 12개의 열을 허용합니다。
모든 12개의 열을 단독으로 사용하지 않고 싶다면, 이러한 열을 조합하여 더 넓은 열을 생성할 수 있습니다：
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
그리드 시스템은 신속하게 응답하며, 열은 스크린 크기에 따라 자동으로 재정렬됩니다。
총 합이 12(모든 12개의 사용 가능한 열을 사용하지 않는 경우) 이상이거나 적지 않도록 확인하십시오。
그리드 클래스
Bootstrap 5 그리드 시스템은 여섯 가지 클래스를 가집니다：
.col-(극소형 장치 - 스크린 너비가 576px 미만).col-sm-(소형 장치 - 스크린 너비가 576px 이상).col-md-(중형 장치 - 스크린 너비가 768픽셀 이상).col-lg-(대형 장치 - 스크린 너비가 992픽셀 이상).col-xl-(xlarge 장치 - 스크린 너비가 1200px 이상).col-xxl-(xxlarge 장치 - 스크린 너비가 1400px 이상)
이러한 클래스를 조합하여 더 동적이고 유연한 레이아웃을 생성할 수 있습니다。
힌트:각 클래스는 비율로 확대됩니다، 따라서 모든 12개의 열을 단독으로 사용하지 않고 싶다면 sm 및 md 동일한 너비를 설정하려면 간단히 지정하면 됩니다 sm。
Bootstrap 5 그리드의 기본 구조
이제 Bootstrap 5 그리드의 기본 구조는 다음과 같습니다：
<!-- 열 너비 제어 및 다른 장치에서의 표시 방식 --> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <!-- 또는 Bootstrap가 자동으로 레이아웃을 처리 --> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>
첫 번째 예제: 한 행을 생성하려면(<div class="row">). 필요한 수의 열을 추가합니다(적절한 .col-*-* 클래스 태그에 대한). 첫 번째 별 (*)는 반응성을 나타내며 sm, md, lg, xl 또는 xxl을 의미하며, 두 번째 별은 숫자를 의미하며, 각 행의 총 합이 12가 되어야 합니다.
두 번째 예제: 각각의 col 숫자를 추가하는 대신 bootstrap가 레이아웃을 처리하여 동일한 너비의 열을 생성할 수 있습니다: 두 개 "col" 요소 = 각 col이 50% 너비이고, 세 개의 cols는 각 col이 33.33% 너비입니다. 네 개의 열은 25% 너비입니다. 이렇게 계속해서 사용할 수 있으며, 또한 다음과 같이 사용할 수 있습니다: .col-sm|md|lg|xl|xxl 열의 반응성을 제공합니다.
아래에서는 기본적인 Bootstrap 5 그리드 레이아웃 예제를 정리했습니다.
삼분열 열
아래 예제에서는 모든 장치와 화면 너비에서 세 개의 동일한 너비의 열을 만드는 방법을 보여줍니다:
예제
<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div>
반응형 열
아래 예제에서는 태블릿에서 네 개의 동일한 너비의 열을 만들고 대형 데스크톱으로 확장하는 방법을 보여줍니다.너비가 576px 미만인 휴대폰이나 화면에서 열은 자동으로 쌓입니다:
예제
<div class="row"> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> </div>
불일치하는 반응형 열
아래 예제에서는 태블릿에서 두 개의 다른 너비의 열을 얻고 대형 데스크톱으로 확장하는 방법을 보여줍니다:
예제
<div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-8">.col-sm-8</div> </div>
힌트:본 튜토리얼의 후반부에서 배울 것입니다. 그리드 시스템 의 더 많은 내용.
