또한 grid란 본래 '격자'를 뜻하는 단어인데, 디자인과 코딩을 비롯하여 여러 분야에서 자주 사용되는 용어입니다.
Grid, 격자 구조
본격적으로 부트스트랩의 Grid System에 대해서 이야기 해보겠습니다.
부트스트랩의 grid는 가로로 긴 기둥(column)이 배치가 됩니다. 그리고 12칸을 기준으로 그리드를 나누게 됩니다.
<divclass="container">
<divclass="row">
<divclass="col py-3 bg-success"></div>
<divclass="col py-3 bg-warning"></div>
<divclass="col py-3 bg-info"></div>
<divclass="col py-3 bg-success"></div>
</div>
<br/>
<divclass="row">
<divclass="col-1 py-3 bg-success"></div>
<divclass="col-3 py-3 bg-warning"></div>
<divclass="col-4 py-3 bg-info"></div>
<divclass="col-4 py-3 bg-info"></div>
</div>
<br/>
<divclass="row">
<divclass="col-7 py-3 bg-success"></div>
<divclass="col-3 py-3 bg-warning"></div>
<divclass="col-4 py-3 bg-info"></div>
<divclass="col-4 py-3 bg-info"></div>
<!-- 부트스트랩의 grid 기준은 12 칸이기 때문에 col-x 에서 x 의 합이 12를 넘기면 줄바꿈이 된다 -->
</div>
<br/>
<mainclass="row g-4">
<sectionclass="col-9 py-3 bg-success">
Lorem ipsum dolor ㅣLorem ipsum dolor sit amet consectetur adipisicing
elit. Tenetur doloribus dolores corporis? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Voluptatum saepe, explicabo ad cumque
aliquid quasi molestiae dolorem, commodi quaerat officiis vero
voluptas nemo, quae nostrum vitae nulla voluptatibus dolores laborum?
</section>
<asideclass="col-3 py-3 bg-warning"></aside>
</main>
</div>
위의 코드를 구현해보면 아래와 같습니다.
class container의 첫 div는 위의 첫 column에 구현되어 있습니다. 12칸을 기준으로 col에 아무런 설정도 해주지 않았기에 3칸씩 할당하여 각각의 너비를 차지한 모습입니다.
두번째 div 처럼 col에 각각 col-1, col-3, col-4, col-4를 주게 되면 1 : 3 : 4 : 4 의 비율로 한 줄의 각각의 너비를 차지한 것과 같은 효과를 줄 수 있음을 알 수 있습니다.
세 번째 div는 7 + 3 + 4 + 4 = 18로 12칸이 넘어가게 되는데, 그러면 다음과 같이 줄이 넘어가는 효과가 나타나게 됩니다.
이와 같은 너비 영역의 차지는 네 번째의 section과 aside처럼 활용할 수 있습니다. 웹사이트에서 section과 aside를 이용하면 정돈된 느낌을 줄 수 있기 때문입니다. lorem + 숫자 + tab을 하면 원하는 글자 수 만큼의 임의의 문자열을 줄 수 있습니다. 위와 같이 임의의 lorem으로 글자 수를 많이 차지하게 되더라도 영역의 너비 비율이 변하지 않음을 알 수 있습니다.
