Bootstrap) 그리드 시스템(grid system)

참고 : https://getbootstrap.com/docs/3.3/css/#grid

그리드 시스템은 부트스트랩을 사용하는 큰 이유 중의 하나이다. 전체 레이아웃을 그리드 시스템을 통해 잡아줄 수 있기 때문에 페이지의 전체 레이아웃을 컨트롤 할 수 있다. 말 그대로 그리드(격자) 형식으로 페이지 레이아웃을 나누는 것이고 전체를 12로 잡고 원하는 그리드를 1/12 * n 단위로 형성한다.(최소단위는 1)

샘플코드 1) 전체 12에서의 공간 할당

<div class="container">

  <div class="row">

    <div class="col-lg-2 pink">col lg 2</div>

    <div class="col-lg-8 pink">col lg 8</div>

    <div class="col-lg-2 pink">col lg 2</div>

  </div>

</div>

위 코드는 하나의 row를 2/ 8/ 2 로 나눈 것이다. 핵심은 col-lg-n 클래스이다. col은 column을 의미하고 lg는 크게 봤을 때를 의미하며(sm은 줄였을 때를 나타낸다) 맨 뒤 숫자는 전체를 12로 했을 때 이 column의 비율을 몇으로 할지를 정하는 것이다. 전체 12를 초과하게 되면 자연스럽게 row가 바뀌면서 뒤로 밀려나게 된다.

container는 전체에 여백과 패딩을 자동 설정하기위해 걸어준 것이고 없어도 무관하다. 심지어 row클래스 조차 없어도 그리드 시스템이 작동하는데 약간의 변화가 있긴 했다. 이것은 나중에 코드를 작업하면서 다시 확인할 것인데 아무래도 row 단위로 확실히 코드에서 구분해주는 것이 좋긴 한 것 같다.(정리 : row는 권장 혹은 필수, container는 옵셔널)

샘플코드 2) 사이즈별 비율 조정

<div class="container">

  <div class="row">

    <div class="col-lg-1 col-md-2 pink">col lg 2</div>

    <div class="col-lg-1 col-md-2 pink">col lg 2</div>

    <div class="col-lg-1 col-md-2 pink">col lg 2</div>

    <div class="col-lg-1 col-md-2 pink">col lg 2</div>

    <div class="col-lg-1 col-md-2 pink">col lg 2</div>

    <div class="col-lg-1 col-md-2 pink">col lg 2</div>

    <div class="col-lg-1 col-md-2 pink">col lg 2</div>

    <div class="col-lg-1 col-md-2 pink">col lg 2</div>

    <div class="col-lg-1 col-md-2 pink">col lg 2</div>

    <div class="col-lg-1 col-md-2 pink">col lg 2</div>

    <div class="col-lg-1 col-md-2 pink">col lg 2</div>

    <div class="col-lg-1 col-md-2 pink">col lg 2</div>

  </div>

</div>

lg에 이어 md를 쓴 예시 코드이다. 전체 창을 lg로 보다가 md로 보게 되면(창의 크기가 줄어들어서 px이 md가 되면) col의 비중을 2로 쓰겠다는 것이다. 아래 표는 그리드 시스템에서의 각 사이즈에 대한 정보이다.

<div class="col-lg-3 col-md-3 col-sm-6 pink">col</div>

이런 식으로도 활용이 가능하지만 lg와 md를 굳이 두번 써줄 필요는 없다. lg에 대한 언급이 없이 md만 사용할 경우 이를 알아서 lg에도 적용하기 때문이다. 따라서 화면 사이즈를 고려하여 단계별로 클래스를 씌워주되 큰 단위와 그 아래 단계가 같을 경우 아래 단계만 입력해도 된다.

샘플코드 3) col 하나의 내부 공간 활용

<div class="container">

  <div class="row">

    <div class="col-lg-3 col-md-3 col-sm-6 pink">

      <div class="row">

        <div class="col-lg-6 orange">inner col</div>

        <div class="col-lg-6 orange">inner col</div>

      </div>

    </div>

    <div class="col-lg-3 col-md-3 col-sm-6 pink">col</div>

    <div class="col-lg-3 col-md-3 col-sm-6 pink">col</div>

    <div class="col-lg-3 col-md-3 col-sm-6 pink">col</div>

  </div>

</div>