미디어 쿼리 응용

미디어 쿼리는 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;
  }
}

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

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