부트스트랩의 그리드
1. 부트스트랩의 그리드
웹에서는 레이아웃을 설정하는 것이 어렵다고 한다. 부트스트랩은 반응형 웹을 만들기 위해 그리드 시스템을 활용하고 있다. 부트스트랩에서는 row 클래스와 col 클래스를 통해 레이아웃을 구성할 수 있다.
2. 눈으로 확인하기
부트스트랩과 부트스트랩의 컴포넌트들을 이용하기 위해 CDN을 통해 부트스트랩의 CSS 링크와 JS 플러그인을 적용시
킨다. 그리고 나서 부트스트랩의 그리드를 확인하기 위해 다음과 같은 코드를 <body> 태그에 추가해준다.
<div class="container">
<div class="row">
<div class="col col-sm-12">
1 fo 3
</div>
<div class="col col-sm-6">
2 of 3
</div>
<div class="col col-sm-3">
3 of 3
</div>
</div>
</div>
그리고 .css 파일을 만들고 다음과 같이 입력한 뒤, HTML 파일과 연결시킨다.
.col{
background-color:yellow;
border: 2px solid black;
}
그러면 다음과 같은 화면이 나오는데, 부트스트랩은 col을 12등분하여 그리드를 통해 사용할 수 있게 했다. 그렇기 때문에 1 fo 3은 col의 12칸을 모두 사용한 상태이고, 2 of 3, 3 of 3은 각각 6칸과 3칸을 사용했기 때문에 남은 3칸이 빈공간으로 나타나게 된다.
부트스트랩의 그리드는 웹이 표현되는 스크린의 사이즈에 따라 그 크기를 설정할 수 있는 옵션들이 있다. Extra small - Small - Medium - Large - Extra large의 순서대로 너비(width)에 따라 그리드를 설정하면 된다. 스크린 사이즈에 따른 변화를 복비 위해 위의 코드에서 col-sm-12를 col-xl-12로 바꾸면 다음과 같은 현상이 일어난다.
1 fo 3은 xl 일 때만 12칸을 차지하기 때문에 sm 사이즈 이상부터 6칸을 차지하는 2 of 3과 3칸을 차지하는 3 of 3이 먼저 공간을 차지하고 1 fo 3은 남은 공간 3을 차지한다. 하지만 너비를 더 확장시켜 xl의 조건을 만족시켜준다면 다음과 같은 현상이 발생한다.
xl 이상의 사이즈가 되자 1 fo 3은 할당받은 12칸의 col을 모두 차지하고, 그 다음 2 of 3과 3 of 3이 6칸과 3칸을 차지한 것을 볼 수 있다.