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

미디어 쿼리 응용

미디어 쿼리는 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 스타일을 정의할 수 있습니다.

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

미디어 쿼리 관련 팁​

  1. Mobile First: 작은 화면 크기를 기본으로 스타일을 지정하고, 더 큰 화면 크기를 위한 스타일을 추가합니다.

  2. 가변적인 단위 사용: 가능한 한 고정된 단위(px)보다는 가변적인 단위(em, rem, %)를 사용하여 유연성을 높입니다.

다음 내용이 궁금하다면?

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