🔮 BootStrap5 반응형 시스템 - 중단점 (미디어 쿼리)

중단점 Breakpoints

Breakpoints는 Bootstrap의 반응형 레이아웃이 뷰포트 크기 또는 기기에서 어떻게 작동 할지 결정하는 사용자가 정의 가능한 넓이입니다.

 

Bootstrap에는 반응형 제작을 위해 grid tiers 라고 하는 6개의 Breakpoints가 포함되어 있습니다.

이러한 breakpoints는 Sass 소스 파일을 사용할 경우 사용자가 지정할 수 있습니다.

Breakpoint	Class infix	Dimensions
X-Small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

 

중단점은 Sass를 통해 사용자 정의 할 수 있습니다. 

_variables.scss 스타일 시트의 Sass 맵에서 찾을 수 있습니다.

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

---

미디어 쿼리

[CSS] 📚 미디어 쿼리 - 반응형 레이아웃

Bootstrap은 모바일 우선으로 개발 되었으므로 몇 가지 미디어 쿼리를 이용하여 레이아웃에 적합한 breakpoints를 만듭니다.

 

Min-width

// 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) { ... }

기존 미디어 쿼리는 이렇게 하나하나 정해서 써줬었습니다.

하지만 부트스트랩에서 이것들을 모듈화하여 지원해줍니다.

/* 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) { ... }


/* 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;
  }
}

 

Max-width

/* 부트스트랩 */
@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) { ... }

@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

/*----------------------------------------*/

/* css */
// X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

 

단일 중단점

/* 부트스트랩 */
@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) { ... }

/*----------------------------------------*/

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

 

중단점 사이

/* 부트스트랩 */
@include media-breakpoint-between(md, xl) { ... }

/*----------------------------------------*/

/* css */
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

---

# Reference

https://getbootstrap.kr/docs/5.0/layout/breakpoints/