04.그리드 시스템(Grid System)

미분류

ppt%ec%82%ac%ec%a7%84%ec%ba%a1%ec%b3%90_%ea%b7%b8%eb%a6%ac%eb%93%9c2

매우 작은 기기 모바일폰 (<768px) 작은 기기 태블릿 (≥768px) 중간 기기 데스크탑 (≥992px) 큰 기기 데스크탑 (≥1200px)
그리드 적용 항상 분기점보다 크면 적용
콘테이너 너비 없음 (auto) 750px 970px 1170px
클래스 접두사 .col-xs- .col-sm- .col-md- .col-lg-
컬럼 수 12
컬럼 너비 Auto ~62px ~81px ~97px
사이 너비 30px (컬럼의 양쪽에 15px 씩)
중첩 예
오프셋 예
컬럼 순서정하기 예

그리드 클래스

  • XS (휴대폰 용)
  • SM (태블릿)
  • MD (데스크톱)
  • LG  (큰 데스크톱)

그리드 시스템 규칙

  • .container(고정 폭) 또는 .container-fluid적절한 정렬과 패딩 (전체 폭)  선택자 안에서 만들어져야한다.
  • .row (열 수평 그룹)을 만들어 행으로 사용한다.
  • 그리드 컬럼은  12개 열을 지정하여 생성된다.
  • 기본구조 살펴보기
  • <div class="container">
  <div class="row">
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

예제를 통해 그리드 시스템 살펴보기

  • 동등한 크기의 칼럼 나열하기
  • <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-3">.col-sm-3</div>
  <div class="col-sm-6">.col-sm-6</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>
  • 모바일, 데스크탑 해상도에 맞게 그리드 만들기
  • <div class="row">
  <div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
  <div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>

<div class="row">
  <div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
  <div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>

<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>
  • 모바일,태블릿,데스크탑 해상도에 맞게 그리드 만들기  –  [테스트]
  • <div class="row">
  <div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
  <div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>

<div class="row">
  <div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
  <div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
  • 칼럼 네스팅  –  [테스트]
  • <div class="row">
  <div class="col-sm-8">.col-sm-8
    <div class="row">
      <div class="col-sm-6">.col-sm-6</div>
      <div class="col-sm-6">.col-sm-6</div>
    </div>
  </div>
  <div class="col-sm-4">.col-sm-4</div>
</div>
  • 칼럼리셋(.clearfix) – [테스트]
  • <div class="row">
  <div class="col-xs-6 col-sm-3">
    Column 1
    <br>
    Resize the browser window to see the effect.
  </div>
  <div class="col-xs-6 col-sm-3">Column 2</div>
  <!-- Add clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-3">Column 3</div>
  <div class="col-xs-6 col-sm-3">Column 4</div>
</div>
  • 칼럼 오프셋(.col-md-offset-*) – [테스트]
  • <div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
  .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
  • 칼럼 순서  변경(.col-md-push-*, .col-md-pull-*) – [테스트]
  • <div class="row">
  <div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
  <div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>