CSS(MediaQuery)

seokhyeon_k·2025년 2월 27일

CSS 반응형 미디어쿼리 정리

1. 반응형 웹이란?

반응형 웹(Responsive Web Design, RWD)은 다양한 화면 크기와 디바이스에 따라 자동으로 레이아웃이 조정되는 웹 디자인 기법입니다. 이를 구현하는 핵심 기술 중 하나가 미디어쿼리(Media Queries) 입니다.

2. 미디어쿼리란?

미디어쿼리는 CSS에서 특정 조건(뷰포트 너비, 해상도 등)에 따라 스타일을 변경할 수 있도록 해주는 기능입니다. 다양한 디바이스 환경에서 최적화된 디자인을 제공하는 데 필수적인 역할을 합니다.

3. 미디어쿼리 기본 문법

미디어쿼리는 @media 규칙을 사용하여 작성합니다.

@media (조건) {
  /* 조건이 충족될 때 적용될 스타일 */
}

예제:

@media (max-width: 768px) {
  body {
    background-color: lightgray;
  }
}

위 코드에서는 화면 너비가 768px 이하일 때 body 배경색을 회색으로 변경합니다.

4. 미디어쿼리 주요 속성

속성	설명
`max-width`	지정한 너비 이하일 때 스타일 적용
`min-width`	지정한 너비 이상일 때 스타일 적용
`max-height`	지정한 높이 이하일 때 스타일 적용
`min-height`	지정한 높이 이상일 때 스타일 적용
`orientation`	`portrait`(세로) 또는 `landscape`(가로) 구분
`resolution`	디바이스 해상도 기준으로 스타일 변경

5. 미디어쿼리 실전 예제

5.1 기본적인 모바일 대응

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

위 코드는 화면 너비가 600px 이하일 때 .container의 flex-direction을 column으로 변경하여 모바일에서 세로 정렬이 되도록 합니다.

5.2 다양한 디바이스 대응 (반응형 웹 필수 코드)

/* 모바일 (최대 600px) */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

/* 태블릿 (601px ~ 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
  body {
    font-size: 16px;
  }
}

/* 데스크톱 (1025px 이상) */
@media (min-width: 1025px) {
  body {
    font-size: 18px;
  }
}

이렇게 하면 모바일, 태블릿, 데스크톱 환경에서 각각 다른 폰트 크기가 적용됩니다.

5.3 다크 모드 대응

@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
}

사용자가 다크 모드를 설정한 경우 자동으로 어두운 테마가 적용됩니다.

6. 반응형 디자인 개발 팁

✔ 유연한 단위 사용: px보다는 em, rem, % 또는 vw, vh를 활용하면 좋다.
✔ 플렉스박스(Flexbox)와 그리드(Grid) 적극 활용: 미디어쿼리와 함께 사용하면 더욱 효율적입니다.
✔ 테스트 필수: 크롬 개발자 도구(F12)에서 다양한 디바이스 해상도를 테스트.