[튜토리얼] 그리드[grid]

그리드[grid]

그리드: 

화면크기 변화에 맞춰 컴포넌트의 비율이 그대로 유지되게 보여주는 기능을 합니다. 그리고 화면크기의 기준을 정한것에 따라 자동으로 세로배열이 되도록 해주는 기능을 제공합니다.

사용방법:

● div container class:

   container는 화면크기에 따라 div 가로길이를 자동으로 지정해주는 기능을 가지고 있습니다

   container가 없으면 div의 가로길이가 정해지지 않았기 때문에 그리드기능이 적용이 안됩니다.

● div "row" class :

   row는 열을 의미합니다 row 하나당 1줄입니다. 여러개의 row를 사용하면 여러줄을 만들 수 있습니다.

 <div class="container">
  <div class="row">
    ...
  </div>
</div>

■ 그리드 옵션: 
디바이스 화면 크기에 맞게 그리드의 크기가 자동으로 조절 되면서 세로배열이 자동으로 됩니다.
옵션은 xs sm md lg 4가지가 있습니다.
각 옵션은 화면의 가로길이가 일정 px 미만/이하일때 그리드를 세로배열을 해줍니다.

■ 그리드 생성: 

그리드는 한 줄을  12등분하여 사용합니다. 따라서 col -1은 1/12 크기의 그리드를 의미하며 col-6은 6/12 크기의 그리드를 의미합니다.

** 단 col-1이 12개가 되면 를 넘어 갈경우 자동 줄바꿈이 됩니다 **

<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>

결과: 

<div class="row"> <div class="col-xs-6">style="background-color: yellow;">잘가</div> <div class="col-xs-6">style="background-color: yellow;">그래</div>  </div>

화면의 크기가 변했을 때의 레이아웃:

XS 옵션을 사용하면 아래의 그리드와 같이(노란색) 화면의 크기가 변해도 세로배열이 되지 않습니다.

응용예시: 

4가지 옵션중 여러개를 중복해서 사용이 가능합니다.

<div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- 컬럼들은 모바일에서 50% 너비로 시작하고 데스크탑에서는 33.3% 너비가 됩니다 --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- 컬럼들은 모바일과 데스크탑에서 항상 50% 너비가 됩니다 --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div>  </div>

■ 그리드 개행:

한 그리드 내에서 길이가 12를 넘어가면 자동 줄바꿈이 됩니다.

■ 반응형 컬럼 초기화:   

Q: 반응형 칼럼이란?

A: 화면크기에 따라 그리드가 세로 배열될때 그리드의 크기에 맞춰서 배열되는 것

<div class="clearfix visible-xs-block"></div>

(왼쪽 그림에서 1시 칼럼과 7시 칼럼 사이에 위의 코드를 삽입하면 오른쪽 처럼 배열된다)

그리드가 한줄에 2개씩 배열 되어야하지만 그리드의 크기가 작아 바로 아래에 다음 그리드가 오는 현상이 생김!! (노랑)

반응형 칼럼 초기화를 해서 수정된 결과 (초록)

    

                                                          

■ 미디어 쿼리:

화면크기에 따라 컴포넌트의 크기를 제한하고 조절 할수 있게 도와준다.

min-width / max-width 를 지정하고 그 범위 내에서 css를 적용하면 된다.