부트스트랩, 변화된 container

부트스트랩 버전 3의 container에 대한 내용은 특별히 배울 필요없이 단순하다. 콘텐츠를 포함하는 container와 container 가로 폭이 100%인 container-fluid 뿐이었다. 

 

하지만 버전 4를 배울 때 container의 중첩점에 대해 변하는 것이 추가됐는데 버전 3처럼 단순할 것이라 생각하고 그냥 지나쳤다. 그래서 버전 5에서 1버전 4 이상부터 변한 container가 어떻게 변했는지 아래에서 적으려 한다.  

---

 

버전 3에서 가로 폭이 100%되게 하려면 container-fluid를 한다고 알고 있다. 버전 4와 5를 여기에서 확장하여 container-중첩점(Breakpoints)을 사용하여 다양하게 설정할 수 있다. 특정 기기나 해상도에 도달하면 가로 폭을 100% 되게 할 수 있다. 전에 이것을 넘어갔다.

 

 

버전 4에서 중첩점인 sm, md, lg, xl을 추가할 수 있다는 것을 알았고 버전 5는 xxl이 추가됐으니 container-xxl도 될 것이다. 이것은 해당 중첩점에 도달하여 그 이상이면 가로 폭이 100% 된다는 것을 알았다. 만약 container-xxl이라면 1400 픽셀이고 그 이상에서는  가로폭이 100%가 될 것이다. 다른 예로 container-lg를 한 후 768 픽셀 이상이라면 가로폭이 100% 될 것이다.  

 

해상도가 높다면 container를 사용하고 만약 해상도가 낮다면 container-중접점을 사용하면 될 것이다. 스마트폰, 태블릿, 노트북 등과 같은 기기는 container-sm, container-md, container-lg를 사용하면 될 것이다.

 

container-중첩점은 중첩점에서 가로폭 100% 여부 설정

---

아래와 같이 디폴트 컨포넌트로 container만 하면 된다.  위와 같이 중첩점(Breakpoints)에서 가로 폭을 100%로 하고 싶다면 sm, md, lg 등을 사용하면 될 것이다. 

 

<div class="container">
  <!-- Content here -->
</div>

 

만약 중첩점(Breakpoints)을 사용하지 않고 모든 기기나 해상도에서 가로 폭을 100% 하고 싶다면 아래 그림처럼 container-fluid라고 하면 된다. 

 

<div class="container-fluid">
  ...
</div>

내가 버전 3을 사용하고 있는데 버전 5에서 중첩점을 추가됐다는 사항만 알면 될 것이다. 참고로 버전 4에서는 xxl이 없다. 왜냐하면 xxl은 버전 5에서 추가됐기 때문이다.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

---

버전 3에서는 불가능했지만 버전 4 이상 부터는 콘텐츠를 감싸는 container도 기기에 따라 변경할 수 있었다. 맞는 예인지 모르나 특정 동물이 좁은 틈을 지나갈 때 몸을 축소하는 것과 비슷할 것이다. 만약 container 안에 포함된 것은 축소할 수 있고 container는 축소할 수 없다면 좁은 틈을 지나갈 수 없을 것이다.