본문으로 건너뛰기
실습하기

Breakpoint 기반 미디어 쿼리

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

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


주요 Breakpoint 값​

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

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

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

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

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

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


Breakpoint 미디어 쿼리를 어떻게 사용하나요?​

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

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에 따라 어떻게 적용되는지 확인해보세요.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!