[CSS] Bootstrap Layout (부트스트랩 레이아웃)

레이아웃은 기본적으로 12개의 열로 이루어져 있습니다.
컨테이너를 생성하게 되면 해당 컨테이너 내부에도 기본적으로 보이진 않지만 12개의 열로 구분되어져있습니다.

 

 

Bootstrap을 사용하게 되면 각 열 컨텐츠들을 col 이라고 칭합니다.

 

 

기본적으로 각 컨텐츠들에게 너비를 정해주지 않으면 전부 동일한 크기를 가지게 됩니다.

 

 

 

Bootstrap Container

Bootstrap을 사용하여 컨테이너를 만들게 될 때 컨테이너 클래스 속성 명과 값이 정해져있습니다.

 

각 container 클래스 속성명에 따라 부여된 반응형 크기가 존재합니다.

- container : 가장 작은 컨테이너로서 가장 작은 화면에 한해서만 전체 크기를 가집니다.
- container-sm : container와 유사합니다. 가장 작은 컨테이너로서 가장 작은 화면들에 한해서만 전체 크기를 가집니다. 일반적으로 모바일과 같은 작은 크기의 화면에 적용됩니다.
- container-md : container-sm 보다 한 단계 큰 컨테이너로서 최대 576px 의 크기까지 100% 전체 크기를 가집니다. 태블릿이나 아이패드와 같은 화면에 주로 적용됩니다.
- container-lg : container-md 보다 한 단계 큰 컨테이너로서 최대 768px 의 크기까지 100% 전체 크기를 가집니다. 노트북 사양에 주로 사용되는 컨테이너입니다.
- container-xl : container-lg 보다 한 단계 큰 컨테이너 입니다. 최대 992px 크기까지 100% 전체 크기를 가집니다.
- container-xxl : container-xl 보다 한 단계 큰 컨테이너로서 최대 1200px 크기까지 100% 전체 크기를 가집니다.
- container-fluid : 가장 큰 컨테이너로서 PC 환경이나 모든 플랫폼 환경에서 100%의 크기를 가집니다.

 

 

 

Column Sized (열 컨텐츠 크기)

Bootstrap을 사용하게 되면 각 열 컨텐츠들마다 배치되어 차지하는 영역까지 class 속성에 명시해놓습니다.

 

앞서 정리했던 것처럼 열 컨텐츠들은 기본적으로 12개의 열로 이루어져있습니다.
위의 이미지에서 보이듯이 col 과 함께 차지하고자 하는 열의 수를 명시합니다.
즉, 12개의 열 중에서 몇 개의 열을 사용할 것인지 명시하는 것입니다.
col-2는 12개의 열 중에서 2개의 열을 사용, col-4는 12개의 열 중에서 4개의 열을 사용, col-6은 12개의 열 중에서 6개의 열을 사용한다는 뜻입니다.
지정한 열들은 당연히 어떤 container class 속성을 가지냐에 따라 크기 비율을 가집니다.

 

 

컨테이너에도 sm, md, lg 와 같이 컨테이너의 크기가 정해져있듯이 컨텐츠에도 키워드가 존재합니다.

 

 

 

컨텐츠 크기 키워드를 추가해서 명시하면 해당 컨텐츠에 호환되는 크기가 주어지고 뒤의 명시한 컨텐츠 개수만큼 영역을 차지하게 됩니다.
위의 이미지를 보면, col-sm-2 라고 명시한 부분은, 열 컨텐츠는 sm 사이즈의 컨텐츠이며 12개의 열 중 2개를 차지하겠다는 의미입니다.
col-sm-4, col-sm-6 도 마찬가지입니다.

 

 

만약 뒤의 컨텐츠 차지 수를 명시하지 않으면 컨텐츠들의 개수에 따라 각 컨텐츠들이 동일한 크기를 가지게 되어 12개의 열을 차지하게 됩니다.

 

 

창의 크기를 가장 최소화 시킬 경우 모든 컨텐츠들이 각각 전체의 크기를 가지는 것처럼 배치됩니다.

 

 

또한, 여러 개의 Bootstrap class 속성을 같이 명시해줄 수 있습니다.
위의 이미지를 보면 sm과 md 속성을 같이 명시해주었는데, 창을 줄일 때 각 컨텐츠들의 호환 크기 속성에 따라 컨텐츠들의 크기가 반응하면 주어지게 됩니다.

예를 들어, 위의 이미지에서는, md 호환 크기 범위로 창이 조정될 경우 4개의 열 컨텐츠들을 잡게 됩니다.
sm 호환 크기 범위로 조정되면, 12개의 열 컨텐츠들을 잡게 되는 것입니다.

 

 

 

!! 이처럼 정리한 내용대로 Bootstrap을 사용하게 되면 정해진 class 속성들을 통해 정해진 호환 크기를 적용할 수 있고 여러 class 속성을 넣음으로서 간편하게 반응형으로 레이아웃을 정해줄 수 있습니다.