[ Bootstrap 5 ] 컨테이너 / 중단점 / 그리드 / 행과 열 / 거터

w3school 부트스트랩 튜토리얼, freecodecamp 부트스트랩 튜토리얼을 기반으로 작성되었습니다.

개인 저장 필기용이나, 잘못된 내용에 대한 지적 환영합니다. 필자는 개발 이야기를 좋아하므로 더더욱 환영합니다.

컨테이너

부트스트랩은 기본적으로 .container 와 .container-fluid 태그에 의존하여 만들어진다. 반응형 웹에 있어서 컨테이너는 이를 지원할 수 있도록 해주는 것들이므로 중요하다.

컨테이너는 내용물 컨텐츠를 중앙에 놓고 가로로 펼치는 방식으로 생성된다.

이때 .container 는 폭이 고정된 div를 생성하고, .container-fluid는 해당 브라우저(디바이스)에 맞춰서 조정된 폭을 갖는 div를 생성한다. 창의 크기에 맞춰서 생성되는 영역은 두개 모두 달라지지만, fluid 의 경우는 유연하게 크기 전체에 대해 생성되고, 일반 컨테이너는 영역별로 나뉘어져 고정된 폭을 가지고 있다 특정 크기 이상이 되면 다시 넓게 생성되는 방식이다.

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

중단점

부트스트랩의 중단점이란, 특정 width 이하로 떨어지게 되면 full-width 로 변경되게 하는 기준점을 이야기한다.

이게 무슨 뜻이냐면, 만약 컨테이너의 중단점을 small로 정한다고 하자. 그러면, 부트스트랩에 정해져있는 small의 기준 점 (예를들어 400px) 전까지는 컨테이너에 마진을 주고, 만약 기준점보다 작아지게된다면, 해당 컨테이너의 마진을 없애고 fluid 속성을 가진 것처럼 행동하게 된다.

위와같은 속성을 구별할 수 있는 기준점이 기본적으로 sm, md, lg, xl, xxl 로 총 5개가 있으며,

Breakpoint	Class infix	Dimensions
Extra small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

위의 표에서 정확하게 참고할 수 있을 것이다.

그리드

그리드는 반응형 웹 디자인을 가능하게하고 컨테이너를 나눌 수 있게 만들어준다.

그리드는 사용하기 위해서는 row 클래스가 필요하다. 이후 아래 코드 처럼 col 에 해당하는 div를 넣어주면 알아서 맞게 생성시켜준다.

이때 중요한 점은 row 안의 col의 최대 개수는 12개로 최대 12등분을 시킬 수 있다.
또한, col 뒤에 오는 숫자는 12 등분 중에 몇 분량까지 쓸 수 있는지를 보여준다.

아래의 예시에서 col-5는 최상위 컨테이너 기준으로 가로폭의 5/12 만큼 span 시켜준다.

또한 일반 col 클래스를 마지막에 붙이게된다면 남아있는 가로폭만큼을 전부 채워준다.

<div class="container-sm border">
      <div class="row">
        <div class="col-5">col1</div>
        <div class="col-5">col2</div>
      </div>
    </div>

열 Columns

col 속성의 경우 위에 언급된 중단점의 속성으로 인해 각 뷰포트의 넓이의 기준에 따라 여러가지의 속성을 주기도 한다.

해당 속성을 적용하기 위해선 container > row > col 식의 html class 관계가 있어야한다
(> 는 부모-자식 관계)

예를들어, 내가 sm 컨테이너 환경에서 col1의 폭을 3으로 설정하고싶고, 그 이상의 환경에서는 폭의 비율을 5로 바꾸고싶다고하면, 클래스를 col-sm-3 col-5 로 col-sm 속성을 오버라이딩 해주면 된다는 뜻이다. col-5 를 col-md-5로 해도 된다. (그 이상의 환경은 md 기준으로 오버라이딩되기 때문)

물론 sm 이하의 환경에서는 1열로 세로 정렬된다.

<div class="container-sm border">
      <div class="row">
        <div class="col-sm-3 col-md-5">col1</div>
        <div class="col">col1</div>
      </div>
    </div>

해당 특징을 이용하여 특정 뷰포트 이하에서는 다수의 컨테이너를 2줄 또는 3줄 , 4줄 등으로 구성할 수 있다는 뜻이다. 예를들어 12개의 col div들을 정렬할 때, 클래스로 col-xxl-1 col-lg-2 col-md-3 col-sm-4 클래스들을 오버라이딩 시킨다면 xxl 환경에서는 1줄, lg 환경에서는 2줄(2x12 = 24) , md 환경에서는 3줄, sm 환경에서는 4줄로 정렬이 되는 것을 확인할 수 있을 것이다.

이러한 환경을 잘 이해하면 다양한 use-case에서 도움이 될 수 있을 것이다.

열의 정렬 기준도 바꿀 수 있다.

열의 수직 정렬

아래의 경우 여러개의 row 들이 있을 때 수직정렬하는 방법이다. 이의 경우, row의 높이가 col 내부의 컨텐츠들보다 클 경우, 또는 col 내부의 컨텐츠들 중 높이가 큰 컨텐츠가 있는 경우, 그만큼의 공백 부분을 수직으로 어떻게 정렬할지 정한다.

align-items-start / align-items-center / align-items-end

row 내부에 클래스를 적용시키면 된다.

<div class="container text-center">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

특정 단일 Column 하나를 기준으로 정렬 법칙을 바꿀 수도 있다.

col 에 class로 algin-self-start/end/center 를 적용할 수도 있다.

열의 수평 정렬

수평정렬의 경우, flexbox 에서의 수평정렬 방식과 비슷하다. (justify-content 속성)

justify-content-start / justify-content-end / justify-content-center
justify-content-around / justify-content-between / justify-content-evenly

start , end , center : 각각 시작, 끝 중앙 으로 모음
evenly : 양 끝점과 아이템들 간 간격을 동일하게 조절
around : evenly와 동일하나, 양끝 아이템과 양 끝 점의 간격은 item 간격의 절반
between : evenly와 동일하나 양 끝 아이템은 각각의 양 끝점에 붙어있다.

열의 줄바꿈

단일 행에 12개 초과 되는 열들이 있을 경우, 초과되는 열은 다음 행으로 강제로 넘어가게 된다.

의도적으로 row 요소 없이 열을 바꾸고자하는 경우 width:100% 요소를 넣어주면 된다.

bootstrap 에서는 해당 요소를 클래스 w-100 으로 지원하고있다.

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

거터

거터는 열 사이의 일종의 패딩이다. 그리드 시스템에서 컨텐츠 사이의 간격을 맞추는데 사용된다.

거터는 각 열 사이에 padding-left,right 를 설정하고 음수 margin값을 이용하여 행의 시작과 끝에서 이를 오프셋하여 정렬합니다.

참고로 부트스트랩에서 마진은 m-, 패딩은 p- 클래스 와 숫자의 조합을 구성가능합니다.

하지만 왜 거터를 사용할까요? 또는 왜 따로 거터를 만들어서 사용하는 것일까요?

거터는 반응형으로 공간을 두고 마진을 설정하는 기능이 있습니다. 단순히 padding, margin 을 숫자로 설정해두면 작은 모바일 디바이스 환경에서는 이런 크기가 일정하다면 해당 디바이스에서 좋게 보일 수 없기 때문입니다.

수평 거터 설정하기

gx- 클래스를 이용하여 설정합니다.

이때 수평 거터는 row 요소 에 클래스로 오버라이딩하여 설정합니다.

gx- 옆에 오는 숫자의 값이 클 수록, 해당 요소가 생성하는 양 끝의 패딩 값이 커집니다.

row 요소 내에서 설정할 경우, 양 끝점과 해당 행 간의 간격을 조정하게 되므로 숫자가 커질 수록 행과 양 끝점간의 실질적인 간격은 작아집니다.

수직 거터 설정하기

수직 거터는 수평과 마찬가지로 gy- 클래스를 이용하여 숫자와 조합하여 설정할 수 있습니다.

이때, 해당 거터는 숫자가 커질 수록 각 행 간의 간격이 조절됩니다. col 요소 내에 설정하게되면 해당 행 내의 col 간의 간격이 커집니다.