[bootstrap] 그리드 방식 레이아웃 구성

과거의 레이아웃 방식

• 과거에는 이런 식으로 <table> 태그를 써서 레이아웃을 짰다고 함

  • 상	단	네	비
    사
    이		내용
    드

• 최근에는 <nav>, <header>, <footer> 등의 semantic 태그와 css를 이용하는 추세

bootstrap을 이용한 방식

• 기본적으로는 위에서 언급한 semantic한 방식을 사용
• 내부 요소들을 테이블처럼 grid에 배열할 필요가 있을 때
  • .col: 테이블의 열(column)에 해당. 다른 옵션이 없으면 .row 클래스 내의 남은 공간을 균등분배 함
    • -xs, -sm, -md, -lg, -xl, -xxl: min-width 지정 옵션
    • -1~12, -auto: 크기 지정 옵션. 숫자로 지정하면 행을 12등분한 부분의 몇 칸을 차지할지를 지정할 수 있고, auto는 내용에 따라서 크기가 가변적으로 변함
    • 한 항목에 여러 클래스를 중첩하여 min-width 상황에 따라 다르게 표현되도록 할 수 있음
  • .row: 테이블의 행에 해당. 아래에 .col 항목들을 포함
    • -cols-*: 하위 .col의 기본 옵션을 지정 가능한 옵션. 중 가능
      • 숫자만 지정할 때는 .col-숫자 와는 동작이 조금 다른 것 같음

<!-- 예시 -->
<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col-md-6">col-md-6</div>
    <div class="col col-sm-3">col, col-sm-3</div>
  </div>
  <div class="row row-cols-2">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

참고한곳

• 그리드 시스템 @ Bootstrap/docs