Bootstrap에서의 화면 크기 구분

Bootstrap은 동적 화면 구성을 위해 Breakpoint를 사용합니다. Breakpoint는 어떻게 반응형 화면에서 레이아웃이 어떻게 동작할지를 효과적으로 구성하기 위해 사용되는 bootstrap 만의 화면 크기 정의 방식입니다.

우선 부트스트랩이 제공하는 breakpoint를 크기별로 구분해 보면 다음과 같습니다.

예를 들어 현재 브라우저의 너비가 1024px 라면 1200px 미만의 Large이고 표기는 lg 입니다.

이와 같이 각 너비에 따른 표기를 기억하고 해상도에 따라 반응형 화면을 구성하면 됩니다.

Bootstrap에서 화면 크기에 따라 요소 보이기/감추기

가장 대표적인 요수인 div태그를 기준으로 화면 크기에 따라 요소를 보이거나 감추는 방법에 대해 알아보겠습니다.

다음의 예제는 div 태그 3개(1st, 2nd, 3rd) 요소가 순서대로 모든 화면 크기에서 동일하게 표시됩니다.

<div class="row">
  <div class="bg-primary">
    1st
  </div>
  <div class="bg-warning">
    2nd
  </div>
  <div class="bg-info">
    3rd
  </div>
</div>

화면에 출력된 결과는 다음과 같습니다. 각 div에 너비를 따로 지정하지 않았기 때문에 각각 1줄씩을 차지하여 3개의 div가 3줄에 걸쳐서 표시됩니다.

아래 결과는 화면 크기가 어떻든 상관 없이 배치가 동일합니다.

다음은 첫 번째 div 요소를 표시하지 않는 예시입니다.

class에 d-none 속성을 첫 번째 div에 추가하였습니다.

<div class="row">
  <div class="bg-primary d-none">
    1st
  </div>
  <div class="bg-warning">
    2nd
  </div>
  <div class="bg-info">
    3rd
  </div>
</div>

화면 출력 결과는 다음과 같습니다. 첫 번째 div 요소는 화면 크기가 크던 작던 항상 화면에 표시되지 않는습니다.

md 크기 이상에서만 div 표시하기

이번에는 특정 화면 크기 이상에서만 첫 번째 div를 보이게 해보겠습니다.

<div class="row">
  <div class="bg-primary d-none d-md-block">
    1st
  </div>
  <div class="bg-warning">
    2nd
  </div>
  <div class="bg-info">
    3rd
  </div>
</div>

출력 결과를 확인해보면 xs, sm 일 때는 다음과 같이 첫 번째 div가 표시되지 않습니다.

하지만 md이상(md, lg, xl, xxl) 에서는 아래와 같이 첫 번째 div가 표시됩니다.

이와 같이 좁은 화면에서 특정 tag 요소를 보이지 않게 하고, 보다 넓은 화면에서만 해당 요소를 보이게 하는 방법을 breakpoint 옵션으로 쉽게 구현할 수 있습니다.

1st div 태그는 화면 크기에 따라 다음과 같이 표시됩니다.

옵션을 해석해보면,

먼저 d-none은 모든 화면 크기에서 요소를 보이지 않게 합니다.

다음 d-md-block은 md 이후에 화면에서 요소를 보이게 block 합니다.

따라서, 두 옵션을 포함하는 함께 사용하면 md 이상에서 화면에 표시됩니다.

md 크기 이하에서만 div 표시하기

이번에는 반대로 특정 크기 이하에서만 div 태그를 화면에 표시해보겠습니다.

이번에는 1st div 태그에 d-block과 d-md-none 옵션을 사용합니다.

<div class="row">
  <div class="bg-primary d-block d-md-none">
    1st
  </div>
  <div class="bg-warning">
    2nd
  </div>
  <div class="bg-info">
    3rd
  </div>
</div>

화면에 출력된 결과는 xs, sm에서는 다음과 같이 첫 번째(1st) div tag가 화면에 표시됩니다.

반면 md, lg, xl, xxl에서는 다음과 같이 첫 번째 div가 표시되지 않습니다.

1st div 태그는 화면 크기에 따라 다음과 같이 표시됩니다.

옵션을 해석해보면,

먼저 d-block은 모든 화면 크기에서 요소를 보이게 합니다.

다음 d-md-none은 md 이후에 화면을 보이지 않게 합니다.

따라서, 두 옵션을 포함하는 함께 사용하면 md 이하에서만 화면에 표시됩니다.

Bootstrap에서 컬럼으로 요소 크기 지정하기

bootstrap은 요소를 비율에 따라 동적으로 조정하기 위해 컬럼 개념을 사용합니다.

모든 화면에서 전체 너비를 12개의 컬럼으로 구성합니다.

따라서 한 줄에 총 12개의 컬럼을 차지하는 요소가 배치되고, 만일 12개를 초과한다면 다음줄에 배치시킵니다.

다음 그림과 같이 화면 전체 너비는 12개의 컬럼으로 구성되고, 원하는 경우 1개 컬럼짜리 12개, 2개 컬럼짜리 6개 등 12개 컬럼 내에서 자유롭게 크기를 나누어 구성할 수 있습니다.

컬럼 형식의 너비를 지정하려면 col-#과 같이 col- 뒤에 차지할 컬럼의 크기를 숫자적어서 col-1, col-2, ... col-12와 같이 class 속성으로 추가하면 됩니다.

다음은 다양한 크기의 div 요소를 12 컬럼 기준에 맞게 구성한 예제입니다.

<div class="row">
  <div class="bg-primary col-2">
    1st
  </div>
  <div class="bg-warning col-8">
    2nd
  </div>
  <div class="bg-info col-2">
    3rd
  </div>
</div>
<div class="row">
  <div class="bg-primary col-4">
    1st
  </div>
  <div class="bg-warning col-5">
    2nd
  </div>
  <div class="bg-info& col-3#34;>
    3rd
  </div>
</div>

12 컬럼을 넘게 배치하면...

만일 한 줄에 12개 컬럼을 넘게 배치하면 어떻게 될까요?

컬럼 형식에서는 각 요소는 하나의 그룹으로 동작하고, bootstrap에서 자동으로 그룹이 잘리지 않도록 줄바꿈을 해줍니다.

다시 말해 12개가 넘지 않으면서도 그룹이 잘리 않도록 요소를 매치하고 12 컬럼이 넘게되는 요소를 다음줄에 표시한다는 뜻입니다.

만일 col-5의 속성을 갖는 div 요소 3개를 사용하면 화면에서는 어떻게 배치가 될까요?

<div class="row">
  <div class="bg-primary col-5">
    1st
  </div>
  <div class="bg-warning col-5">
    2nd
  </div>
  <div class="bg-info col-5">
    3rd
  </div>
</div>

화면 출력 결과는 다음 그림과 같습니다. 1st, 2nd에 해당하는 div 요소의 너비를 더하면 10 column이므로 첫 줄에 표시되고 3rd가 추가되면 15 column이 되므로 12-column을 넘어서서 한 줄에 표시하지 못하고 다음줄러 밀려서 배치됩니다.

물론 col-숫자 방식은 화면 크기와 상관 없이 모든 화면에서 동일하게 동작합니다.

화면 크기에 따라 div 요소 너비를 다르게

화면의 크기에 따라 요소의 컬럼 너비를 다르게 하려면 col-{breakpoint)-# 형식으로 입력하면 된다. breakpoint는 화면 크기에 따른 표기를 의미합니다.

만일 sm 화면에서 2컬럼 너비를 갖는다면 col-sm-2 와 같이 입력하면 됩니다.

물론 너비 별로 따로 따로 여러개를 지정하는 것도 가능합니다.

다음 예제를 살펴보면,

sm에서 각 요소는 4, 4, 4의 동일한 컬럼 너비를 갖습니다.

하지만 md부터는 2, 5, 5의 컬럼 너비로 변경됩니다.

<div class="row">
  <div class="bg-primary col-sm-4 col-md-2">
    1st
  </div>
  <div class="bg-warning col-sm-4 col-md-5">
    2nd
  </div>
  <div class="bg-info col-sm-4 col-md-5">
    3rd
  </div>
</div>

다음은 위의 예제를 실행한 결과입니다.

sm, md만 설정했으므로 sm 이하에서는 지정하지 않은것과 같으므로 1 줄씩 표시되고, md이상에서는 md 의 설정이 적용됩니다.

지금까지 읽어 주셔서 감사합니다.