동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
부트스트랩4 그리드시스템은 CSS Flexbox로 제작되었으며 페이지 전체에 최대 12개의 열을 허용합니다.
12개의 열을 모두 개별적으로 사용하지 않으려면 열을 더 넓게 사용하기 위해 그룹화할 수 있습니다.
그리드시스템은 화면 크기에 따라 반응하여 자동으로 다시 배열됩니다.
부트스트랩4 그리드 클래스
부트스트랩4 그리드 시스템은 5개의 클래스를 포함합니다.
이 클래스를 조합하여 보다 동적이고 유연한 레이아웃을 만들 수 있습니다.
** 각 클래스의 너비가 커집니다. sm과 md에 동일한 너비를 설정하려면 sm만 지정하면 됩니다.
부트스트랩4 그리드의 기본구조
아래 코드는 부트스트랩4의 기본 구조입니다.
<!-- 다른 장치에 나타나는 열너비를 직접 설정합니다 -->
<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>
<!-- 아래는 부트스트랩이 자동으로 레이아웃을 설정합니다. -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
첫번째 예 설명:
행을 만듭니다(<div class="row">). 그 다음 원하는 수의 열을 추가합니다(.col-*-* 클래스). 첫번째 *는 장치의 응답성을 표시: sm, md, lg, xl. 두번째 *은 숫자를 나타내며 각 행에 대해 최대 12개 추가해야 합니다.
두번째 예 설명:
각 열에 숫자를 추가하는 대신 부트스트랩이 레이아웃을 자동으로 처리하여 같은 너비열을 만듭니다. 두 개의 "col"요소를 쓸 경우, 각 열 너비는 50%입니다. 세 개의 열을 쓸 경우 33.33%너비. 네 개의 열을 쓸 경우 각각의 너비는 25%.
.col-sm|md|lg|xl을 사용하여 열을 반응적으로 만들 수도 있습니다.
동일한 3개 열(Columns)인 경우
모든 장치와 화면 너비에 동일한 세 개의 너비 열을 만듭니다.
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
반응형 열(Columns)
테블릿에서 시작하여 초대형 PC로 확장하는 4개의 동일한 너비를 만드는 방법 예입니다.
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>
두 개의 너비가 동일하지 않은 반응형 열(Columns)
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
등록된 댓글이 없습니다.