Breakpoint 기반 미디어 쿼리

미디어 쿼리는 Breakpoint를 기준으로 화면 크기에 따라 다른 스타일을 적용합니다.

Breakpoint는 반응형 웹 디자인에서 사용되는 용어로, 웹 페이지 레이아웃이 변경되어야 하는 화면 크기의 변곡점을 의미합니다.

프로젝트마다 breakpoint를 자유롭게 설정할 수 있지만, 일반적으로 사용되는 breakpoint 값은 다음과 같습니다.

• Extra small devices : < 576px (휴대폰)

• Small devices : ≥ 576px (휴대폰 - 가로 모드, 태블릿 - 세로 모드)

• Medium devices : ≥ 768px (태블릿 - 가로 모드)

• Large devices : ≥ 992px (데스크톱)

• Extra large devices: ≥ 1200px (대형 데스크톱)

CSS의 @media 규칙과 min-width, max-width를 활용해 breakpoint를 지정하고, 특정 화면 조건에만 적용되는 CSS 스타일을 정의할 수 있습니다.

복사
/* 기본 스타일 */
.container {
  width: 100%;
}

/* 화면 너비가 768px 이상일 때의 스타일 */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

/* 화면 너비가 992px 이하일 때의 스타일 */
@media (max-width: 992px) {
  .container {
    width: 970px;
  }
}

/* 화면 너비가 1200px 이상, 1920px 이하일 때의 스타일 */
@media (min-width: 1200px) and (max-width: 1920px) {
  .container {
    width: 1170px;
  }
}

오른쪽 A, B, C 상자를 표시하는 코드 실행 결과 화면의 너비를 조절하고, Media Query가 Breakpoint에 따라 어떻게 적용되는지 확인해보세요.