• 목록

미디어 쿼리 (Media Queries) 정리

미디어 쿼리는 기기의 유형(출력 장치)이나 특정 조건(화면 너비, 해상도 등)에 따라 서로 다른 CSS 스타일을 적용할 수 있도록 하는 CSS3의 핵심 기술입니다. 

반응형 웹 디자인을 구현하는 가장 강력한 도구입니다.

https://www.w3.org/TR/mediaqueries-5/

1. 기본 문법 구조

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

• 미디어 유형: all(모든 장치), screen(컴퓨터/스마트폰 화면), print(인쇄 장치) 등이 있습니다.

• 조건(Feature): width, height, orientation(방향) 등 어떤 조건에서 스타일을 적용할지 정의합니다.

2. 주요 중단점 (Breakpoints)

화면 크기에 따라 레이아웃이 변하는 지점을 '중단점'이라고 합니다. 보통 기기별 표준 해상도를 기준으로 잡습니다.

• 모바일: 0px ~ 480px (또는 767px까지)

• 태블릿: 768px ~ 1024px

• 데스크탑: 1024px 이상

3. 작성 방식 전략

작성하는 순서에 따라 크게 두 가지 전략으로 나뉩니다.

• Mobile First (권장): 작은 화면(모바일) 스타일을 먼저 작성하고, 미디어 쿼리로 큰 화면(min-width) 스타일을 추가합니다. 성능과 사용자 경험 측면에서 유리합니다.

• Desktop First: 큰 화면 스타일을 먼저 작성하고, 작은 화면(max-width)으로 갈수록 스타일을 덮어씁니다.

 

4. 핵심 코드 예시

/* 기본 스타일 (모바일용) */
.content {
  font-size: 14px;
  flex-direction: column;
}

/* 태블릿 이상 (768px 이상일 때) */
@media screen and (min-width: 768px) {
  .content {
    font-size: 16px;
    flex-direction: row;
  }
}

/* 가로/세로 방향 감지 */
@media (orientation: landscape) {
  .body { background: #f0f0f0; }
}

• 목록