2. Container 활용 - 반응형 웹, Grid로 쉽게 정렬하기

1. 반응형 웹

 

class에 container 속성을 주게 되면,

Bootstrap을 이용해서 반응형 웹을 표현할 수 있게 된다.

 

Bootstrap 공식 문서에는 총 3가지의 container를 설명하고 있다.

• 각 반응형 중단점에 max-width를 설정하는 .container
• 모든 중단점에 width: 100%를 설정하는 .container-fluid
• 정의된 중단점까지 width: 100%를 설정하는 .container-{breakpoint}

여기서 중단점(break-point)란, 화면의 크기가 작아지면 

내용들이 다시 화면을 채우기 시작하는 시점이라고 생각하면 될 것 같다.

 

아래 표를 참고해보자.

 

 

예를 들어, 태그에 클래스로 container-md 를 준다면,

사용자가 현재 보는 화면의 가로 길이가 576px 보다 작아지는 경우에 

태그 안의 내용물들의 width 값을 100%로 조정하겠다는 소리이다.

즉, 화면이 다 채워진다는 소리이다. 이 부분을 중단점이라고 보면 될 것 같다.

좀 더 응용하자면, 화면의 가로 길이가 만약 576px 보다 커진다면

container-md를 클래스로 준 태그들은 화면의 크기가 768px이 될 때까지 720px의 width를 유지하겠다는 소리이다.

이렇게 계속 이어나가면 결국에는, 사용자의 화면 크기에 따라서 내용물들의 width값이 바뀌게 된다.

이것을 반응형 웹이라고 한다.

 

예를들면, 우리들이 사용하는 컴퓨터, 휴대전화의 화면들은 각각 크기가 다르다.

즉, 우리가 보는 화면마다 내용물들이 각각 다르게 보여야 한다는 소리이다.

화면의 크기에 반응해서 내용물들의 크기가 바뀌는 것, 이것이 반응형 웹이라고 생각하면 될 것 같다.

 

---

2. Grid 시스템

 

Bootstrap의 경우에는 위와 같이 sm, md, lg ... xxl 총 6개의 기본 반응형 계층을 제공하고 있다.

추가로 Bootstrap은 기본적으로 12개의 열(column) 시스템을 제공하고 있다.

이 12개의 열을 통해 그리드 시스템을 구현할 수 있다.

그리드 시스템이란, 쉽게 말하면 div태그를 가로로 배치할 수 있게 해주는 시스템이다.

 

container안에, row, col 속성을 지정하면, 우리가 flex를 사용하듯이 가로로 나눌 수 있다.

공식 문서에서도 "flexbox로 빌드되었으며 완전한 반응형입니다." 라고 소개하고 있다.

한번 공식 문서의 예시를 보자

 

 

container로 지정한 클래스 안에 row를 class로 주고, col을 class로 주면

container가 위와 같은 구성이 된다.

총 1행 3열이기 때문에, 3개의 div태그들이 공간을 각각 3등분씩 나누어서 들어가 있는 셈이다.

이게 정확하게 계산하자면, Grid 시스템은 총 12개의 열을 제공하고 있기 때문에

첫번째 div태그는 4개의 열을 차지하고 있는 셈이고, 2번째 열도 4개, 3번째 열도 4개를 차지하고 있는 셈이다.

 

자, 근데 만약에 나는 첫번째 column은 총 6칸을 차지하고, 나머지 두개는 3칸씩을 차지하고 싶다면 어떻게 하면 될까?

 

    <div class="container">
        <div class="row">
          <div class="col col-6">
            Column1
          </div>
          <div class="col">
            Column2
          </div>
          <div class="col">
            Column3
          </div>
        </div>
    </div>

 

위와 같이 작성해주면 된다.

Grid 시스템에서 종단 포인트(Break Point)는 

화면이 기준보다 작아질 경우에 Grid 시스템을 깨겠다는 것으로 해석하면 될 것 같다.

 

더 많은 사용법은 

https://getbootstrap.com/docs/5.1/layout/grid/

Grid system

 

위의 공식 사이트에서 추가적으로 필요할 때 확인해보면 될 것 같다.