중단점(Breakpoint)

중단점이 무엇인지?

다양한 기기나 뷰 포인트에 대한 반응형 레이아웃을 위한 변경 가능한 너비를 의미한다.

중심 개념

1. Breakpoints are the building blocks of responsive design.
   • 중단점은 반응형 설계의 구성요소이다.
   • 특정 뷰포트 또는 장치 크기에서 레이아웃을 조절하는 시기를 제어한다.
2. Use media queries to architect your CSS by breakpoint.
   • 미디어 쿼리를 사용해서 중단점별로 CSS를 설계한다.
3. Mobile first, responsive design is the goal.
   • 모바일을 우선하고, 반응형 디자인을 목표로 잡는다.
   • 가장 작은 스타일부터 더 큰 장치를 위해 디자인을 조정하는 것을 목표로 한다.

가능한 중단점

Breakpoint	Class infix	Dimensions
Extra small	xs	<576px
Small	sm	>=576px
Medium	md	>= 768px
Large	lg	>= 992px
Extra large	xl	>= 1200px
Extra extra large	xxl	>= 1400px

• 각각의 중단점은 container들을 편안하게 잡기 위해서 12의 배수로 설정되었다.

Reference

위의 내용은 부트스트랩 문서를 정리한 것으로 더 자세한 내용을 원하면 위의 페이지에서 확인할 수 있다.