Media query

반응형 웹 디자인의 핵심이자, 접속하는 기기의 환경에 따라 스타일을 다르게 적용할 수 있게 해주는 **미디어 쿼리(Media Query)**에 대해 핵심 키워드별로 정리해 드리겠습니다.

---

1. 정의 (Definition)

미디어 쿼리는 단말기의 유형(출력 장치)이나 화면 해상도, 뷰포트 너비 같은 **특성(Capability)**에 따라 서로 다른 CSS 스타일을 적용하도록 도와주는 CSS3 기술입니다.

---

2. 미디어 쿼리 구문

미디어 쿼리는 보통 @media 규칙으로 시작하며, 다음과 같은 기본 구조를 가집니다.

CSS

 

@media [미디어 유형] and ([조건/특성]) {
  /* 조건이 맞을 때 적용할 CSS 코드 */
}

• and: 모든 조건이 참일 때 스타일을 적용합니다.
• not: 전체 미디어 쿼리를 반대로 해석합니다.
• , (쉼표): 여러 조건 중 하나만 참이어도 스타일을 적용합니다 (OR 연산).

---

3. 미디어 유형의 종류

어떤 장치를 타겟으로 할지 결정합니다.

• all: 모든 미디어 장치 (기본값).
• print: 인쇄 결과물이나 인쇄 미리보기 화면.
• screen: 컴퓨터, 태블릿, 스마트폰 등 화면이 있는 장치.

---

4. 가로세로 및 회전 속성

화면의 크기와 방향에 따라 세밀한 조정이 가능합니다.

• 가로세로 (Width / Height): min-width나 max-width를 가장 많이 사용합니다.
• 회전 (Orientation): 기기의 방향을 감지합니다.
  • portrait: 세로 모드 (높이가 너비보다 큼).
  • landscape: 가로 모드 (너비가 높이보다 큼).

CSS

 

/* 가로 모드인 스마트폰에서만 배경색 변경 */
@media screen and (orientation: landscape) {
  body { background-color: lightblue; }
}

---

5. 미디어 쿼리 중단점 (Breakpoints)

화면 크기가 변할 때 레이아웃이 바뀌는 기준점을 말합니다.

일반적으로 다음 기기별 해상도를 기준으로 설정합니다.

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

---

6. 미디어 쿼리 적용 방법

1) 외부 CSS 파일 연결하기

HTML의 <link> 태그를 사용하여 조건에 맞는 CSS 파일만 불러옵니다.

HTML

 

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

2) 웹 문서에 직접 정의하기

CSS 파일 내부에서 직접 분기 처리를 합니다. 가장 많이 쓰이는 방식입니다.

CSS

 

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

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

---

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

브라우저(Chrome 등)의 개발자 도구를 활용하면 반응형 테스트가 매우 쉬워집니다.

1. F12를 눌러 개발자 도구를 엽니다.
2. 상단의 기기 툴바 아이콘 (Device Toolbar, 휴대폰/태블릿 모양)을 클릭합니다.
3. 화면 상단 눈금자 근처에서 '미디어 쿼리 표시(Show media queries)' 옵션을 활성화하면, 설정된 중단점들이 색상 막대 형태로 표시되어 레이아웃 변화를 실시간으로 확인할 수 있습니다.

---

학습 정리

• 미디어 쿼리는 콘텐츠가 깨지기 시작하는 지점을 중단점으로 잡는 것이 가장 좋습니다.
• 모바일 우선(Mobile First) 방식은 기본 CSS를 모바일용으로 작성하고, @media (min-width: ...)를 써서 확장해 나가는 효율적인 전략입니다.

---

반응형 웹의 핵심 도구인 미디어 쿼리를 완벽히 정리하셨습니다!