Media query (미디어 쿼리)

 

🟢 Media query (미디어 쿼리)

화면 크기, 해상도, 기기 특성 상태 조건에 따라 CSS를 다르게 적용하는 기술.

 

◼ 문법

@media (조건) {
  /* 조건이 맞을 때 적용할 CSS */
  selector {
    property: value;
  }
}

• @media (미디어 유형) and (조건) { }

 

1️⃣ media type (미디어 유형)

어떤 장치에서 스타일을 적용할지 결정하는 조건.

🔹 all

모든 미디어 장치.

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

• 기본값으로 생략 가능.

 

🔹 screen

컴퓨터, 태블릿, 스마트폰 등 화면이 있는 기기.

@media screen and (max-width: 768px) {
  body {
    background: lightblue;
  }
}

 

🔹 print

인쇄 결과물이나 인쇄 미리보기 화면.

@media print {
  body {
    background: white;
    color: black;
  }
}

 

---

 

2️⃣ 조건

🔹 and

@media (min-width: 768px) and (max-width: 1024px) {
}

• 모든 조건이 만족될 때만 적용. (AND 조건)

 

🔹 not

@media not (max-width: 768px) {
}

• 전체 미디어 쿼리를 반대로 해석. (반대 조건)

 

🔹 , (쉼표)

@media (max-width: 768px), (orientation: portrait) {
}

• 여러 조건 중 하나만 참이어도 적용. (OR 연산)

 

---

 

3️⃣ 가로/세로 및 회전 속성

반응형에서 가장 많이 사용하는 기준으로, 화면의 크기와 방향에 따른 세밀한 조정.

🔹Width (가로) 중심설계

/* 화면 가로가 정확히 600px일 때 배경색 변경 */
@media (width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* 화면 가로가 800px 이상일 때 배경색 변경 */
@media (min-width: 800px) {
  body {
    background-color: lightgreen;
  }
}

/* 화면 가로가 500px 이하일 때 배경색 변경 */
@media (max-width: 500px) {
  body {
    background-color: lightcoral;
  }
}

• width: 뷰포트(viewport, 화면) 가로 길이
• min-width: 최소 가로 길이. (큰 화면 대응)
• max-width: 최대 가로 길이. (작은 화면 대응)

 

🔹 Height (세로)

/* 화면 세로가 정확히 600px일 때 배경색 변경 */
@media (height: 600px) {
  body {
    background-color: lightblue;
  }
}

/* 화면 세로가 800px 이상일 때 배경색 변경 */
@media (min-height: 800px) {
  body {
    background-color: lightgreen;
  }
}

/* 화면 세로가 500px 이하일 때 배경색 변경 */
@media (max-height: 500px) {
  body {
    background-color: lightcoral;
  }
}

• height: 뷰포트(viewport, 화면) 세로 길이
• min-height: 최소 세로 길이. (큰 화면 대응)
• max-height: 최대 세로 길이. (작은 화면 대응)

 

🔹 Orientation (회전) 기기의 방향 상태 감지.

/* 세로 모드일 때 */
@media (orientation: portrait) {
  body {
    font-size: 14px;
  }
}

/* 가로 모드일 때 */
@media (orientation: landscape) {
  body {
    font-size: 16px;
  }
}

• portrait: 세로 모드. (높이 > 너비)
• landscape: 가로 모드. (너비 > 높이)

 

---

 

◼ Breakpoints (미디어 쿼리 중단점)

화면 크기에 따라 레이아웃이 변경되는 기준 지점.

/* 모바일 (기본) */
.container {
  display: block;
}

/* 태블릿 */
@media (min-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* 데스크탑 */
@media (min-width: 1024px) {
  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

 

• 모바일: 기본적으로 블록 단일 열 레이아웃
• 태블릿: 화면 768px 이상 → 2열 그리드
• 데스크톱: 화면 1024px 이상 → 3열 그리드

 

 

📊 기본 기준 (가장 많이 쓰는 구조) 📊

기기 구분	중단점 (Breakpoints)
모바일	~ 767px
태블릿	768px ~ 1023px
데스크탑	1024px ~

 

---

 

◼ 미디어 쿼리 적용 방법

1️⃣ 외부 CSS 파일로 분리

HTML의 <link> 태그를 사용하여 조건에 맞는 해당 CSS 파일을 로드.

<link rel="stylesheet" media="screen and (min-width: 768px)" href="tablet.css">

• 장점: 파일을 기능/디바이스별로 분리 가능, 구조가 명확함.
• 단점: HTTP 요청 증가 → 성능 저하 가능, 관리 파일 많아짐, 요즘은 번들링 환경에서 비효율적.

👉 아주 큰 프로젝트에서 분리 필요할 때, 프린트 전용 CSS (print.css) 같은 특수한 경우만 사용.

 

2️⃣ CSS 내부에서 직접 작성 (표준 방식)

CSS 파일 내부에서 직접 분기 처리를 합니다.

/* 기본 스타일 (모바일 우선) */
body { font-size: 14px; }

/* 1024px 이상의 화면 (PC) */
@media screen and (min-width: 1024px) {
  body { font-size: 18px; }
}

• 장점: 한 파일에서 관리 → 유지보수 쉬움, 코드 흐름 이해 쉬움, 성능상 유리. (요청 감소)

 

 

📍  POINT 📍 

✔️ 미디어 쿼리는 콘텐츠가 깨지기 시작하는 지점을 중단점(Breakpoint)으로 잡는 것이 가장 좋다. ✔️

 

---

 

📌 웹 개발자 도구 창에서 미디어 쿼리 표시하기

1. 개발자 도구 열기
   • Chrome 기준: F12 또는 Ctrl + Shift + I (Mac: Cmd + Option + I)
   • Firefox, Edge 등도 유사하게 열 수 있다.
2. 기기 툴바 활성화
   • 개발자 도구 상단의 휴대폰/태블릿 아이콘 클릭
   • 단축키: Ctrl + Shift + M (Mac: Cmd + Shift + M)
3. 미디어 쿼리 표시
   • 기기 툴바가 켜진 상태에서 화면 상단 눈금자 근처에 있는 “Show media queries” 옵션 체크
   • 화면 폭에 따라 색상 막대로 각 미디어 쿼리의 적용 구간이 표시됨
   • 이렇게 하면 특정 화면 너비에서 레이아웃이 어떻게 바뀌는지 바로 확인 가능

💡 추가 팁:

• 눈금자를 드래그해서 브라우저 너비를 변경하면 미디어 쿼리가 적용되는 순간 색상이 변해, 실시간으로 반응형 변화를 관찰할 수 있다.
• Chrome DevTools에서 Responsive 모드 외에도 다양한 장치 프리셋을 선택하면 실제 스마트폰/태블릿 환경에서 테스트 가능.