미디어쿼리 — 해상도에 따라 다른 배경 이미지 보내기 완전 정리

 

 

Web Development · Media Queries

미디어쿼리 — 해상도에 따라 다른 배경 이미지

@media · max-width 단계별 분기 · 우선순위 · 모바일 퍼스트의 반대

시작 오늘 분석할 코드

화면 너비에 따라 배경 이미지를 4단계로 바꾸는 코드다. 기본은 bg0, 1024px 이하면 bg1, 768px 이하면 bg2, 320px 이하면 bg3. 같은 페이지지만 모니터·태블릿·모바일에 다른 그림을 보여줄 수 있다.

body { background: url(images/bg0.jpg) no-repeat fixed; background-size: cover; } @media screen and (max-width:1024px) { body { background: url(images/bg1.jpg) no-repeat fixed; background-size: cover; } } @media screen and (max-width:768px) { body { background: url(images/bg2.jpg) no-repeat fixed; background-size: cover; } } @media screen and (max-width:320px) { body { background: url(images/bg3.jpg) no-repeat fixed; background-size: cover; } }

실제 출력 미리보기 — 창 너비를 늘렸다 줄여 보세요

화면 폭에 따라 배경이 4단계로 바뀜

용어 용어 정리

@media조건부 CSS — 미디어쿼리 시작

screen모니터·모바일 화면 매체

print인쇄물 매체 (인쇄 전용 스타일)

max-width이 너비 이하일 때 적용

min-width이 너비 이상일 때 적용

brakepoint스타일이 바뀌는 너비 기준점

background-size:cover화면 꽉 채우기 (잘림 가능)

background-attachment:fixed스크롤해도 배경 고정

---

1 미디어쿼리의 기본 문법

@media [매체] [and] (조건) { /* 조건이 만족될 때만 적용되는 CSS */ } [매체] = screen | print | speech | all [조건] = (max-width: 768px), (orientation: landscape) 등

이번 코드는 @media screen and (max-width:1024px)처럼 두 조건을 and로 묶었다. "모니터 등 일반 화면이면서 동시에 너비가 1024px 이하일 때"만 적용된다.

---

2 max-width 단계별 분기 — 작성 순서가 중요

이번 코드는 큰 너비부터 작은 너비로 내려가며 규칙을 쓴다. CSS는 위에서 아래로 적용되므로, 같은 우선순위의 규칙은 나중에 쓴 게 이긴다. 화면이 280px이면:

[화면 너비 280px일 때 검사 흐름] body 기본 → bg0.jpg 적용 max-width:1024px? ✓ → bg1.jpg로 덮어씀 max-width:768px? ✓ → bg2.jpg로 덮어씀 max-width:320px? ✓ → bg3.jpg로 덮어씀 ← 최종 결과

※ 만약 320px 규칙이 1024px보다 위에 있다면? 320px 규칙이 바뀐 다음 1024px 규칙이 또 덮어쓰므로 항상 bg1만 보인다. 큰 max-width를 위에, 작은 max-width를 아래에 두는 게 정석.

---

3 max-width vs min-width 패턴

데스크톱 퍼스트 (max-width)

• 큰 화면 기본 + 작아질수록 덮어씀
• 전통적 방식 (이번 코드)
• 모바일에서도 큰 CSS 다 받음

모바일 퍼스트 (min-width)

• 작은 화면 기본 + 커질수록 덮어씀
• 현대 권장 방식
• 모바일은 추가 CSS 안 받음 → 빠름

/* 모바일 퍼스트 버전 */ body { background: url(bg-small.jpg) ...; } /* 작은 화면 기본 */ @media (min-width: 768px) { body { background: url(bg-medium.jpg) ...; } } @media (min-width: 1024px){ body { background: url(bg-large.jpg) ...; } }

---

 

반응형

 

4 background-size: cover의 의미

cover는 "이미지가 영역을 완전히 덮도록 비율을 유지하며 확대/축소"한다. 이미지가 영역보다 비율이 안 맞으면 일부가 잘린다. 페이지 전체 배경처럼 빈틈없이 채워야 할 때 쓴다.

값	의미	잘림	여백
cover	영역 꽉 채움	비율 안 맞으면 일부 잘림	여백 없음
contain	영역 안에 다 보이게	잘림 없음	비율 안 맞으면 여백 발생
100% 100%	영역에 강제로 맞춤	잘림 없음	여백 없음 (대신 늘어남/찌그러짐)

---

5 background 단축 표기

이번 코드의 background: url(...) no-repeat fixed는 단축 표기다. 풀어 쓰면 다음과 같다.

background: url(bg.jpg) no-repeat fixed; ↓ 풀어 쓰기 background-image: url(bg.jpg); background-repeat: no-repeat; background-attachment: fixed;

---

6 자주 하는 실수

실수	증상	해결
max-width 규칙 순서 바뀜	작은 규칙이 큰 규칙에 덮여 무시됨	큰 max-width → 작은 max-width 순으로 작성
viewport meta 누락	모바일에서 PC 보기로 보임 → 미디어쿼리 작동 안 함	<meta name="viewport"> 필수
and 빠뜨림	조건이 동작 안 함	screen and (조건)
매체 생략	인쇄·점자에서도 적용	screen 명시 또는 only screen
cover와 비율 안 맞춤	중요한 부분이 잘림	대표 위치 background-position: center
같은 이미지 여러 해상도	모바일이 큰 파일 받음	해상도별로 다른 파일 + 미디어쿼리

---

핵심 한 줄 요약

@media조건부 CSS — 화면별 분기

screen and ()매체 + 조건 결합

max-width"이 폭 이하일 때" — 데스크톱 퍼스트

min-width"이 폭 이상일 때" — 모바일 퍼스트

규칙 순서큰 폭부터 작은 폭으로 (max-width)

cover영역 꽉 채움 — 일부 잘림 허용

viewport meta모바일에서 미디어쿼리 작동 필수

Tags

#media-query #미디어쿼리 #max-width #min-width #screen #반응형 #데스크톱퍼스트 #모바일퍼스트 #viewport #해상도분기 #background #cover #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

media-query, 미디어쿼리, max-width, min-width, screen, 반응형, 데스크톱퍼스트, 모바일퍼스트, viewport, 해상도분기, background, cover, CSS, HTML, 웹개발, 티스토리