한 줄 정답 — 미디어쿼리는 @media (min-width: 768px) { ... } 형태로, 괄호 안 조건이 참일 때만 중괄호 안 스타일을 추가로 켜는 조건문이다. 작은 화면을 기본값으로 깔고 min-width로 넓어질 때만 스타일을 얹는 모바일 퍼스트가 가장 손이 덜 가며, breakpoint는 기기 픽셀이 아니라 레이아웃이 깨지는 폭에서 정한다.

핵심 요약#

  • 문법: @media (조건) { 규칙 }. 괄호 밖 스타일은 항상 적용, 안쪽은 조건이 참일 때만 추가.
  • min-width는 "그 폭 이상에서 켜라", max-width는 "그 폭 이하에서 켜라". 둘은 방향이 반대다.
  • 모바일 퍼스트: 폰 화면을 기본으로 두고 min-width로 넓어질 때 덧붙인다. 한 방향이라 코드가 단순하다.
  • breakpoint는 600px·768px·1024px 언저리를 출발점으로 삼되, 숫자보다 "여기서 디자인이 깨지나"가 기준.
  • <meta name="viewport"> 한 줄이 없으면 폰에서 미디어쿼리가 아예 안 먹는다.

CSS 미디어쿼리 사용법 — 문법부터 보기#

미디어쿼리는 "화면이 이런 상태일 때만 이 스타일을 켜라"는 조건문이다. @media로 시작하고, 괄호 안에 조건을, 중괄호 안에 그 조건일 때 켤 규칙을 적는다. 가장 많이 쓰는 조건이 화면 폭이다.

/* 기본값 — 폭과 상관없이 항상 적용 */
.container {
  display: block;
}

/* 화면 폭이 768px 이상일 때만 추가로 켜진다 */
@media (min-width: 768px) {
  .container {
    display: flex;
  }
}

괄호 밖 규칙은 늘 적용되는 바탕이고, 조건이 참인 동안만 안쪽 규칙이 그 위에 덮인다. 조건이 거짓이 되면 안쪽만 꺼지고 다시 바탕으로 돌아간다. 이 "기본값 + 조건부 추가" 구조가 반응형의 전부다.

먼저 viewport 메타 태그부터#

미디어쿼리를 아무리 잘 짜도 폰에서 안 먹는다면, 십중팔구 viewport 메타 태그가 빠진 것이다. 모바일 브라우저는 기본적으로 자기 폭을 980px쯤으로 속여 데스크톱 화면을 욱여넣어 보여 주기 때문에, 좁은 폭 조건이 영영 켜지지 않는다. <head> 안에 이 한 줄을 넣어 "화면 실제 폭을 그대로 쓰라"고 알려 줘야 한다.

<meta name="viewport" content="width=device-width, initial-scale=1" />

min-width와 max-width 차이#

이름은 비슷하지만 방향이 정반대다. min-width는 "최소 이 폭부터(이상)", max-width는 "최대 이 폭까지(이하)" 조건이 켜진다.

구분min-width: 768pxmax-width: 768px
켜지는 시점폭이 768px 이상일 때폭이 768px 이하일 때
어울리는 방식모바일 퍼스트(넓어질 때 덧댐)데스크톱 퍼스트(좁아질 때 깎음)
스타일이 쌓이는 방향작은 화면 → 큰 화면큰 화면 → 작은 화면
기본값으로 두는 것가장 좁은 폰 레이아웃가장 넓은 데스크톱 레이아웃

한 프로젝트 안에서는 둘을 섞지 말고 한 방향으로 통일하는 편이 덜 헷갈린다. 입문 단계에서는 아래 설명하는 min-width 기반 모바일 퍼스트를 권한다.

모바일 퍼스트로 쌓기#

작은 화면용 스타일을 기본값으로 깔고, min-width로 넓어질 때만 규칙을 더하는 방식이다. 예외가 "넓어지면 늘린다" 한 방향으로만 쌓여 읽기 쉽다.

.card { width: 100%; }            /* 기본: 폰 — 한 장이 가로를 꽉 채움 */

@media (min-width: 600px) {       /* 태블릿부터 두 칸 */
  .card { width: 50%; }
}
@media (min-width: 900px) {       /* 데스크톱부터 세 칸 */
  .card { width: 33.33%; }
}

조건을 작은 값부터 큰 값 순으로 적으면, 폭이 넓어질수록 뒤 규칙이 앞 규칙을 자연스럽게 덮는다.

단계별로 따라하기#

같은 카드 목록을 폰 1열 → 태블릿 2열 → 데스크톱 3열로 만드는, 반응형에서 가장 흔한 패턴이다.

  1. <head>에 viewport 메타 태그를 넣는다(위 코드 참고).
  2. 모바일 기준 레이아웃을 미디어쿼리 밖에 기본값으로 짠다.
  3. min-width 미디어쿼리를 작은 값부터 더해 넓은 화면을 덧댄다.
<section class="cards">
  <article class="card">카드 1</article>
  <article class="card">카드 2</article>
  <article class="card">카드 3</article>
</section>

.cards {
  display: grid;
  grid-template-columns: 1fr;   /* 기본: 폰 — 1열 */
  gap: 16px;
}

@media (min-width: 600px) {
  .cards { grid-template-columns: 1fr 1fr; }       /* 태블릿 — 2열 */
}
@media (min-width: 900px) {
  .cards { grid-template-columns: 1fr 1fr 1fr; }   /* 데스크톱 — 3열 */
}

저장하고 브라우저 창을 좁은 폭에서 넓게 끌어 보면, 카드가 한 줄에 한 장 → 두 장 → 세 장으로 단을 늘린다. 같은 마크업이 창 너비에 맞춰 다시 배치되는 것이다.

자주 쓰는 breakpoint는 어떻게 잡나#

흔히 출발점으로 삼는 폭은 다음과 같다. 다만 이건 정답표가 아니라 관례일 뿐이다.

  • 600px 안팎 — 폰 세로 → 태블릿/가로 전환
  • 768px 안팎 — 태블릿
  • 1024px 안팎 — 데스크톱 진입

"아이폰은 390px, 갤럭시는 412px" 하고 특정 기기 폭에 맞추면 새 기기가 나올 때마다 어긋난다. breakpoint는 레이아웃이 어색해지는 폭에서 잡는다. 글줄이 너무 길어지거나 카드가 찌그러지기 시작하는 지점에서 한 단계 늘리면, 기기가 무엇이든 자연스럽게 맞는다. 위 숫자는 거기서 출발해 직접 보며 조정하는 기준점으로만 쓴다.

미디어쿼리가 안 먹을 때 체크리스트#

  • viewport 메타 태그를 넣었는가(폰에서 안 먹는 1순위 원인).
  • 미디어쿼리 안 셀렉터가 밖 셀렉터보다 명시도가 낮지 않은가. .cards .card가 밖에 있고 @media 안이 .card뿐이면, 조건이 켜져도 명시도에서 져 안 덮인다. 안팎 셀렉터를 같은 굵기로 맞춘다.
  • min-width와 max-width를 섞어 조건이 서로 잡아먹고 있지는 않은가.

자주 묻는 질문#

Q. CSS 미디어쿼리는 어떻게 작성하나요?

A. @media 뒤 괄호에 조건을 적고, 중괄호 안에 그 조건일 때 켤 규칙을 넣습니다. 화면 폭 조건이 가장 흔해 @media (min-width: 768px) { ... }처럼 씁니다. 괄호 밖 스타일은 항상 적용되는 기본값이고, 조건이 참일 때만 안쪽 규칙이 추가로 덮입니다.

Q. max-width랑 min-width 미디어쿼리는 뭐가 다른가요?

A. min-width: 600px는 폭이 600px 이상일 때, max-width: 600px는 600px 이하일 때 켜집니다. 작은 화면을 기본으로 두고 넓어질 때 더하는 모바일 퍼스트에서는 min-width를, 큰 화면을 기본으로 두고 좁아질 때 깎는 방식에서는 max-width를 씁니다. 한 프로젝트에선 한 방향으로 통일하는 게 덜 헷갈립니다.

Q. 반응형 breakpoint는 몇 px로 잡는 게 좋나요?

A. 특정 기기 폭을 외워 맞추기보다 레이아웃이 어색해지는 지점에서 끊는 게 좋습니다. 600px·768px·1024px 언저리를 출발점으로 두고, 카드가 찌그러지거나 글줄이 너무 길어지는 폭을 직접 보며 조정하세요. 숫자 자체보다 "여기서 디자인이 깨지나"가 기준입니다.

Q. 모바일 반응형 CSS는 어디서부터 시작하나요?

A. 폰 화면용 스타일을 미디어쿼리 밖 기본값으로 먼저 완성한 뒤, min-width 미디어쿼리를 작은 값부터 더해 넓은 화면을 덧대세요. viewport 메타 태그를 빠뜨리지 않는 것이 첫걸음입니다.

관련 글#

미디어쿼리는 "이미 짜 둔 레이아웃을 화면 폭에 맞춰 다시 배치"하는 도구다. 그 바탕이 되는 박스와 배치 개념을 먼저 잡으면 반응형이 훨씬 쉬워진다.

더 알아보기#