[Front-end] Responsive Web

Bootstrap Grid system

Bootstrap Grid system

• 웹 페이지의 레이아웃을 조정하는 데 사용되는 12개의 칼럼으로 구성된 시스템

Grid system 목적

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

Responsive Web Design

• 디바이스 종류나 화면 크기에 상관없이, 어디서든 일관된 레이아웃 및 사용자 경험을 제공하는 디자인 기술

Grid system 기본 요소

• Container
  • Column들을 담고 있는 공간
• Column
  • 실제 컨텐츠를 포함하는 공간
• Gutter
  • 컬럼과 컬럼 사이의 여백 영역

<div class="container">
    <div class="row">
       <div class="col-sm-4">col-sm-4</div>
       <div class="col-sm-4">col-sm-4</div>
       <div class="col-sm-4">col-sm-4</div>
    </div>
    <div class="row">
       <div class="col-sm-2">col-sm-2</div>
       <div class="col-sm-4">col-sm-4</div>
       <div class="col-sm-6">col-sm-6</div>
    </div>
    <div class="row">
       <div class="col-sm-2">col-sm-2</div>
       <div class="col-sm-5">col-sm-5</div>
       <div class="col-sm-5">col-sm-5</div>
    </div>
</div>

출처

Gutters

• Grid system에서 column 사이에 여백 영역
• x축은 padding, y축은 margin으로 여백생성

  gx : padding
  gy : margin
  g : padding & margin

Grid system for responsive web

Responsive Web Design

• 디바이스 종류나 화면 크기에 상관없이, 어디서든 일관된 레이아웃 및 사용자 경험을 제공하는 디자인 기술
• Boot strap grid system에서는 12개 column과 6개 breakpoints를 사용하여 반응형 웹 디자인을 구현

Grid system breakpoints

• 웹 페이지를 다양한 화면 크기에서 적절하게 배치하기 위한 분기점
• 화면 너비에 따라 6개의 분기점 제공(xs, sm, md, lg, xl, xxl)