Grid System

Grid System : 페이지 전체를 설계하는 방법 중 하나

---

디자이너가 디자인한 페이지를 코드로 구현해야 하는 프론트엔드 개발자는

디자인을 이해해야할 필요가 있다.

 

디자이너들은 그리드 시스템을 이용해서 작업한다.

 

 

container : 그리드 시스템이 적용되는 전체범위

 

column : 나눠져 있는 칸 (기본은 12칸)

 

gutter : 간격, 여백

 

 

 

그리드 시스템과 반응형 웹을 구현하기 위해서 CSS 프레임 워크인 부트스트랩을 이용한다.

 

부트스트랩

★

container의 자식은 반드시 row,

row의 자식은 반드시 col로 시작하는 녀석들이 와야한다.

내가 진정으로 만들고 싶은 요소는 col 안에 자식요소로 넣어준다.

 

<div class="container">

      <div class="row">

        <div class="col-1">

          <p>col-1</p>

        </div>

      </div>

</div>

 

 

설정한 칸이 12칸을 넘어버리면 다음 줄로 밀려난다.

 

 

 

 

 

반응형 웹

: 화면 사이즈가 부트스트랩에서 설정한 브레이크 포인트가 되면 요소 사이즈가 줄어든다.

 

 

class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2"

위와 같을 때,

브레이크 포인트가 되면 column이 클래스에 설정한 값대로 줄어든다.

 

col-sm-6 : min-width가 576px일 때(576px 이상) column이 6칸으로 줄어든다. ex.모바일

col-md-4 : min-width가 768px일 때(768px 이상) column이 4칸으로 줄어든다.  ex.태블릿

col-lg-3 : min-width가 992px일 때(992px 이상) column이 3칸으로 줄어든다.   ex.데스크탑

col-xl-2 : min-width가 1200px일 때(1200px 이상) column이 2칸으로 줄어든다. 

(bootstrap 홈페이지 - 레이아웃 - 그리드에서 자세히 확인가능)

 

 

★처음에는 모바일 사이즈로 시작해서 점점 큰 화면으로 대응하며 진행하는게 좋다.