Bootstrap Grid system

: 웹 페이지의 레이아웃(각 요소의 위치와 크기를 조정하여 웹 페이지의 디자인을 결정하는 것)을 조정하는데 사용되는 12개의 칼럼으로 구성된 시스템

• 반응형 디자인을 지원해 웹 페이지를 모바일, 태블릿, 데스크탑 등 다양한 기기에서 적절하게 표시할 수 있도록 도와줌

반응형 웹 디자인 (Responsive Web Design)

• 디바이스 종류나 화면 크기에 상관없이, 어디서든 일관된 레이아웃 및 사용자 경험을 제공하는 디자인 기술
• 12개의 칼럼 사용 → 12칸 중 크기에 따라 필요한 만큼의 칼럼을 차지하게 요소를 배치
• bootstrap grid system에서는 12개의 column과 6개의 breakpoints를 사용하여 반응형 웹 디자인을 구현

Grid system 구조

• Grid System 기본 요소

  • Container

    • Column들을 담고 있는 공간

    

  • Column

    • 실제 컨텐츠를 포함하는 부분

    

  • Gutter

    • 칼럼과 칼럼 사이의 여백 영역 (상하좌우)
    • x축은 padding, y축은 margin으로 여백 생성

    

    

  • 1개의 row 안에 12개의 column 영역이 구성

    • 각 요소는 12개 중 몇 개를 차지할 것인지 지정됨

    

• Grid System 실습 - 기본

  • 다음과 같이 12칸을 분배해 보자

    

    

    • 첫번째 줄

      

      <div class="container">
        <div class="row">
          <div class="col">
            <div class="box">col</div>
          </div>
          <div class="col">
            <div class="box">col</div>
          </div>
          <div class="col">
            <div class="box">col</div>
          </div>
        </div>
      </div>
      

    • 두번째 줄

      <div class="container">
        <div class="row">
          <div class="col-4">
            <div class="box">col-4</div>
          </div>
          <div class="col-4">
            <div class="box">col-4</div>
          </div>
          <div class="col-4">
            <div class="box">col-4</div>
          </div>
        </div>
      </div>
      

    • 세번째 줄

      <div class="container">
        <div class="row">
          <div class="col-2">
            <div class="box">col-2</div>
          </div>
          <div class="col-8">
            <div class="box">col-8</div>
          </div>
          <div class="col-2">
            <div class="box">col-2</div>
          </div>
        </div>
      </div>
      

• Grid System 실습 - 중첩(Nesting)

  • 하나의 column에 또 다른 Row를 넣어보자

    

    

    

• Grid System 실습 - 상쇄 (Offset)

  • Offset으로 Column을 생략해보자

    

    

    

• Grid System 실습 - gutters

  • Gutter를 이용해 간격을 조정해보자 1

    • gx-0 → col 사이 여백 제거

    

    

  • Gutter를 이용해 간격을 조정해보자 2

    • gy-5 → row 사이 여백 증가

    

    

  • Gutter를 이용해 간격을 조정해보자 3

    • g-5

    

    

Grid system for responsive web

Grid system Breakpoints

: 웹 페이지를 다양한 화면 크기에서 적절하게 배치하기 위한 분기점이다

화면 너비에 따라 6개의 분기점 제공(xs, sm, md, lg, xl, xxl)

• 각 breakpoints 마다 설정된 최대 너비 값 “이상으로” 화면이 커지면 grid system 동작이 변경됨