Bootstrap 반응형 Container & Grid

부트스트랩의 가장 큰 장점은 반응형 사이트를 만들기 쉽다는 것이다.

그리고 반응형 사이트의 핵심에 대해 알아보려고 한다.

 

 

 

 

Container는 무언가를 담기 위해 사용하는 가장 기본적인 layout element이다. 공간이라고 생각하면 될 것 같다.

Container 안의 물건들이 어떻게 배치될 지 여러 가지 설정을 넣어줄 수 있다.

 

가장 기본적으로, Container 자체의 크기가 화면의 크기에 따라 바뀌도록 할 수 있는데 반응형 웹 사이트의 근본이 된다.

 

위 사진이 그 설명인데, 예를 들어 container-lg class로 생성하면 Large (992 px) 미만일 때에는 픽셀 크기 자체가 되고, 이상일 때에는 960px 크기의 Container가 된다.

 

https://getbootstrap.com/docs/4.4/layout/overview/

Overview

자세한 설명은 위 링크에서 확인할 수 있다.

 

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

Grid system

위 링크와 사진은 또 다른 기본 시스템인 Grid System에 관한 설명이다.

 

기본적으로 각각의 Container는 12개의 Columns으로 이루어져 있다. 그런데 항상 4개의 Column (좌우의 1/3)을 이용하여 어떠한 요소 (예를 들면 이미지)를 구성한다면, 모바일의 경우 너무 작고 데스크탑의 경우 너무 크게 보일 것이다. 따라서 픽셀 수에 따라 Column의 개수를 조절할 수 있다. 그 외에도 여러 가지 반응형 + 배치하는 테크닉들이 링크에 설명되어 있으니 읽어보면 좋을 것 같다.