부트스트랩, 콘텐츠를 포함하는 container

 

대부분 클래스(class)나 아이디(id) 이름을 만들 때 container라고 한다. 부트스트랩 3에서도 마찬가지로 container라고 콘텐츠 등을 포함하는 채우는 컨테이너가 있다.  이 컨테이너에 두 가지가 있는데 1200px인 고정과  가로폭이 브라우저 가장자리가 경계인 유동이 있다. 

 

고정은 container라 하고  유동은 fluid를 더 해 contain-fluid라 한다. 이 블로그는 부트스트랩 버전 3으로 만들었는데 처음에 고정인 container를 사용하다가 나중에 fluid로 변경했다.

 

---

 

처음 내가 container-fluid를 사용할 때 아래 그림처럼 경계와  여백이 없어 보기 좋지 않아서 고정인 container를 사용했다. 아래 그림의 회색 경계는 브라우저 가장자리라 생각하면 된다. container는 고정이므로 여백이 있다. 

 

그런데 몇 개월 전 우연히 container를 container-fluid로 변경했는데 container처럼 여백이 나타났다. 처음 내가 부트스트랩 3으로 이 블로그 스킨을 만들었을 때 여백이 없었는데 그동안 이것저것 만지다 보니 우연히 여백이 생긴 모양이다. 전혀 의도하지 않은 것이다. 

 

여백이 생겨 유동인 container-fluid를 계속 사용하다 글에 삽입한 이미지 또한 의도치 않게 커지는 것이 싫었다. 그래서 최근 고정인 containter로 바꿨다. 

---

부트스트랩 5

이 글을 쓰는 시점, 부트스트랩 최신 버전은 5이고 정확히 말하면 버전 5.1.3이다. 버전 3은 2013년에 출시했다. 

 

 

내가 버전 3부터 5까지 조금씩 공부하면서 알았다. 버전 5부터  container에 다양한 가로 폭로 설정할 수 있다는 것도 알았다. 버전 3과 4에서는 container와 container-fluid밖에 없었다. 버전 5에서는 Responsive Container인 반응형 컨테이너라는 것이 추가됐다. 그렇다고 위에 다룬 container가 반응형이 아니라는 말은 아니다. 

 

 

container에 단독으로 container-sm, container-md, container-lg, container-xl, container-xxl처럼 중단점이 추가되니 반응형이라 한 모양이다. 그냥 내 추측이고 부트스트랩3에서는 두 가지만 있었는데 5에서는 일곱 가지나 되니...

 

버전 4에서는 여섯가지이고 5에 없는 중단점인 xxl이 추가됐다. 즉, container-xxl이 없다.

 

나중에 버전 5에 대한 그리드에 대해 더 알아봐야겠다. 버전 5에서도 container 라고 할 것이라 생각했는데 아니었다. 버전 5로 만든 내 티스토리 블로그를 봤는데 container라고만 했는데 그래도 이상이 없었다.