부트스트랩 5 시작, 중단점과 컨테이너

이 글에서 부트스트랩 5의 중단점(Breakpoints)과 컨테이너(Containers)에 대해 적으려 한다.

 

들어가기 앞서

 

이 블로그는 부트스트랩으로 만들었다. 세 번째 버전으로 만들었고 상세히 적는다면 3 버전에서 업그레이드된 3.3.6으로 만들었다.

 

처음에 버전 3의 CSS와 자바스크립트를 사용하다가 업그레이드될 때마다 CSS와 자바스크립트를 업그레이드했다. 이 글을 쓰는 지금 3, 4가 아닌 5 베타 1까지 나왔고 부트스트랩 공식 홈페이지에서 아래 그림에 나온 Previous releases를 클릭하면 이전 버전을 확인할 수 있다. 3 버전은 3.3.6까지가 끝인 줄 알았지만 3.4까지 나왔음을 확인할 수 있다. 

 

 

부트스트랩 버전

 

이 블로그는 부트스트랩 3으로 계속 유지하고 다른 티스토리 블로그에 부트스트랩 5를 구축하려고 한다. 부트스트랩 4가 나왔을 때 이 블로그를 4로 변경하려고 했는데 너무 번거롭고 힘들었다. 그리고 부트스트랩 3으로 힘들게 만든 이 블로그가 아까워 그냥 두기로 했다. 참고로 예전에 적었듯 티스토리 블로그는 부트스트랩으로 사용하여 스킨을 만들 수 있다. 

 

티스토리 블로그 스킨을 보면 네이버, 다음 등 블로그 스킨에서 볼 수 없는 다이내믹함을 볼 수 있다. 왜냐하면 네이버, 다음 등과 달리 HTML, CSS, 스크립트를 100% 활용할 수 있기 때문이다.   

 

중단점(Breakpoints)

 

중단점(Breapoints)은 장치 또는 뷰포트 크기에 따라 레이아웃 응답이 어떻게 변경되는지에 대한 부트스트랩의 트리거이다.

• 중단점은 반응형 디자인의 빌딩 블록이고 레이아웃을 특정 뷰포트 또는 장치 크기로 조정할 수 있는 시기를 제어하는 ​​데 사용한다. 
• 미디어쿼리를 사용하여 중단점으로 CSS를 설계한다. 미디어쿼리는 브라우저 및 운영체제 매개변수 세트에 따라 조건부로 스타일을 적용할 수 있는 CSS 기능이다. min-width 미디어 쿼리에서 가장 일반적으로 사용한다.
• 모바일 우선, 반응형 디자인이 목표이다. Bootstrap의 CSS는 최소한의 스타일을 적용하여 가장 작은 중단점에서 레이아웃이 작동하도록 한 다음 스타일에 레이어를 적용하여 더 큰 장치에 맞게 해당 디자인을 조정하는 것을 목표로 한다. 이는 CSS를 최적화하고 렌더링 시간을 개선하며 방문자에게 훌륭한 경험을 제공한다.

부트스트랩에는 반응형 빌드를 위한 6개의 기본 중단점(때때로 그리드 계층이라고도 함)이 포함되어 있다. 소스 Sass 파일을 사용하는 경우 이러한 중단점을 사용자 지정할 수 있다. 3.*에서 사용하던 xs이 사라졌고 4 이상에서 xxl이 생겼다. 위에서 이 블로그는 3.3.6으로 만들었고 레이아웃에서 xs를 사용했다. 

 

부트스트랩에 중단점(Breakpoints)과 관련있는 sm, md, lg, xl, xxl 이라는 Class infix를 많이 접하니 알고 넘어갔으면 한다.

 

중단점

 

부트스트랩 3에서 sm이 태블릿이고 md가 데스크탑인 PC라 알고 있었다. 그런데 5를 포함 4이상부터 small(sm)이 스마트폰, medium(md)가 태블릿, Large(lg)가 태블릿이 됐다.

 

컨테이너(Containers)

컨테이너는 주어진 장치 또는 뷰포트 내에서 콘텐츠를 포함하고, 채우고, 정렬하는 부트스트랩의 기본 빌딩 블록이다. 그 밖의 컨테이너 특징은 아래와 같다.

 

• 컨테이너는 부트스트랩에서 가장 기본적인 레이아웃 요소이며 기본 그리드 시스템을 사용할 때 필요하다.
• 컨테이너는 콘텐츠를 포함하고 채우고 (때로는) 중앙에 배치하는데 사용된다.
• 컨테이너는 중첩될 수 있지만 대부분의 레이아웃에는 중첩된 컨테이너가 필요하지 않다. 

컨테이너에는 .container, .container-fluid, .container-{breakpoint}가 있다. 아래 표는 이 컨테이너의 작업 방식을 보여준다고 하는데 나는 표를 보니 짧은 시간에 파악하기 힘들다.

 

부트스트랩 3을 읽히면서 간단히 container는 고정된 레이아웃이고 containter-fluid는 모든 해상도에서 100%인 유동적 레이아웃이라고 알고 있었다. 그래서 이 블로그에서 레이아웃을 만들 때 containter로 했다. 

 

 

컨테이너

 

기본 컨테이너

 

기본 .container 클래스는 반응형 고정 너비 컨테이너이고 각 중단점에서 최대폭이 변한다. 나는 위 표에 대한 사항을 어느 정도만 파악하고 그냥 이 블로그 레이아웃을 아래처럼 사용했다. 참고로 .container는 부트스트랩의 기본 컨테이너다.   

 

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

 

반응형 컨테이너

.container-{breakpoint}인 반응형 컨테이너를 사용하면 지정된 중단점에 도달할 때까지 100% 너비의 클래스를 지정할 수 있으며, 그 후에는 각 상위 중단점에 최대 너비를 적용할 수 있다. 

 

<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>

 

유체 컨테이너

 

.container-fluid는 뷰포트의 전체 너비에 걸쳐있는 전체 너비 컨테이너에 사용한다. 여백 없이 100% 꽉 찬 레이아웃을 만드는 것이다.

  

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

---

마지막으로

 

크롬과 웨일로 번역한 것을 보고 말이 되게 옮긴 것인데 어색하다. 나도 옮기면서 무슨 말인지 모르는 말이 많다. 그리고 내가 노트북으로 보니 화면을 분리하여 볼 수 없다. 하나는 원본으로 보고 다른 탭에서는 번역본을 본다. 그리고 웨일에서는 어떻게 번역하는지도 본다.

 

Layout을 크롬은 형세라 번역하고 웨일은 그대로 레이아웃이라 번역하고 있다. 웨일이라고 항상 옳게 번역하는 것은 아니다. 반응형을 번역하면 응답이라 할 때가 많다. 

 

크롬(좌)과 웨일(우)의 번역