브레이크포인트

브레이크포인트 (Breakpoints)

디바이스나 뷰포트 크기에 따라 반응형 레이아웃이 어떻게 동작할지 결정하는, 커스터마이즈 가능한 너비 값이에요.

출처: 문서

본문

핵심 개념 (Core concepts)

브레이크포인트는 반응형 디자인의 기본 블록이에요. 브레이크포인트로 특정 뷰포트나 디바이스 크기에서 레이아웃을 언제 조정할지 제어할 수 있어요.
미디어 쿼리로 브레이크포인트별로 CSS를 구성해요. 미디어 쿼리는 브라우저와 운영체제 파라미터 집합을 기준으로 스타일을 조건부로 적용할 수 있게 해 주는 CSS 기능이에요. 우리는 주로 미디어 쿼리에서 min-width를 사용해요.
모바일 우선(mobile first) 반응형 디자인이 목표예요. Bootstrap의 CSS는 가장 작은 브레이크포인트에서 레이아웃이 동작하도록 최소한의 스타일을 적용하고, 더 큰 디바이스에 맞춰 설계를 조정하는 스타일을 층층이 쌓아요. 이렇게 하면 CSS가 최적화되고 렌더링 시간이 빨라지며 방문자에게 훌륭한 경험을 제공해요.

사용 가능한 브레이크포인트 (Available breakpoints)

Bootstrap은 반응형 구축을 위해 때로 grid tier라고 부르는 6개의 기본 브레이크포인트를 포함해요. 소스 Sass 파일을 사용한다면 이 브레이크포인트들을 커스터마이즈할 수 있어요.

Breakpoint	Class infix	Dimensions
Extra small	없음(None)	<576px
Small	`sm`	≥576px
Medium	`md`	≥768px
Large	`lg`	≥992px
Extra large	`xl`	≥1200px
Extra extra large	`xxl`	≥1400px

각 브레이크포인트는 너비가 12의 배수인 컨테이너를 편안하게 담을 수 있도록 선택됐어요. 브레이크포인트는 또한 흔한 디바이스 크기와 뷰포트 차원의 부분 집합을 대표해요. 모든 사용 사례나 디바이스를 정확히 겨냥하지는 않아요. 대신 이 범위들은 거의 모든 디바이스에 구축할 수 있는 강력하고 일관된 기반을 제공해요.

이 브레이크포인트들은 Sass로 커스터마이즈할 수 있어요. _variables.scss 스타일시트의 Sass 맵에서 찾을 수 있어요.

scss/_variables.scss

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Sass 맵과 변수 수정 방법에 대한 자세한 정보와 예시는 Grid 문서의 CSS 섹션을 참조하세요.

미디어 쿼리 (Media queries)

Bootstrap은 모바일 우선으로 개발되므로, 레이아웃과 인터페이스에 적절한 브레이크포인트를 만들기 위해 몇 가지 미디어 쿼리를 사용해요. 이 브레이크포인트들은 대부분 최소 뷰포트 너비를 기준으로 하며, 뷰포트가 바뀜에 따라 요소를 확장할 수 있게 해 줘요.

Min-width

Bootstrap은 레이아웃, 그리드 시스템, 컴포넌트를 위해 주로 다음 미디어 쿼리 범위(브레이크포인트)를 소스 Sass 파일에서 사용해요.

// Source mixins

// No media query necessary for xs breakpoint as it’s effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

이 Sass mixin들은 Sass 변수에 선언된 값을 사용해 컴파일된 CSS로 변환돼요. 예를 들어:

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Max-width

가끔은 반대 방향(주어진 화면 크기 이하)으로 가는 미디어 쿼리도 사용해요:

// No media query necessary for xs breakpoint as it’s effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

이 mixin들은 선언된 브레이크포인트에서 .02px를 빼서 max-width 값으로 사용해요. 예를 들어:

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

왜 .02px를 뺄까요? 브라우저가 아직 범위 컨텍스트 쿼리(range context queries)를 지원하지 않으므로, min-과 max- 접두어의 한계와 소수점 너비를 가진 뷰포트(예: 고해상도 디바이스에서 특정 조건에서 생길 수 있음)를 더 높은 정밀도의 값으로 해결하는 거예요.

단일 브레이크포인트 (Single breakpoint)

최소·최대 브레이크포인트 너비를 사용해 특정 화면 크기 구간만 겨냥하는 미디어 쿼리와 mixin도 있어요.

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }

예를 들어 @include media-breakpoint-only(md) { ... }는 다음과 같이 변환돼요:

@media (min-width: 768px) and (max-width: 991.98px) { ... }

브레이크포인트 사이 (Between breakpoints)

마찬가지로 미디어 쿼리는 여러 브레이크포인트 너비에 걸칠 수 있어요:

@include media-breakpoint-between(md, xl) { ... }

결과는 다음과 같아요:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

더 알아보기 (Learn more)

Bootstrap 문서