미디어쿼리 + Flexbox 완전 정리 — 반응형 핵심 두 축

 

 

Web Development · Media Query · Flexbox

미디어쿼리 + Flexbox 완전 정리
반응형의 두 핵심 축

화면 크기로 분기하는 @media · 한 줄로 가운데 정렬되는 flex

시작 두 도구가 함께 있어야 반응형이 완성된다

앞에서 본 가변 단위(%, em)만으로는 부족하다. "PC에서는 3단, 모바일에서는 1단"처럼 화면별로 레이아웃 자체를 바꿔야 할 때가 많다. 이때 두 도구를 같이 쓴다.

• @media — 화면 크기·방향에 따라 다른 CSS를 적용
• display: flex — 한 줄로 정렬·정중앙·역순 배치를 쉽게

---

용어 핵심 키워드

@media화면 조건별 CSS 분기

screen모니터 출력 (vs print)

max-width~px 이하일 때

min-width~px 이상일 때

orientation가로(landscape) / 세로(portrait)

display: flex자식을 한 줄로 배치

flex-directionrow / column / 역방향

flex-wrap한 줄 넘으면 다음 줄로

align-content여러 줄의 교차축 정렬

align-self개별 아이템만 정렬 다르게

orderHTML 순서 무시하고 시각 재배치

---

1 @media — 화면 크기로 분기하기

가장 자주 쓰는 패턴. 사용자 화면 폭에 따라 다른 배경 이미지를 깔거나, 다른 레이아웃을 적용한다.

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

화면 크기 → 어떤 이미지가 뜨나

~320

bg3.jpg

bg2 (~768)

bg1 (~1024) / bg0 (그 외)

⚠ 순서가 중요하다 — max-width 방식은 큰 값부터 작은 값으로 작성해야 한다. 작은 값이 위에 있으면 큰 값에 의해 덮어써져버린다. (CSS는 위에서 아래로 적용)

@media 문법 해부

구성	의미
@media	미디어 쿼리 시작 키워드
screen	출력 매체 — 모니터(vs print=인쇄, all=모두)
and	모든 조건을 만족할 때
(max-width: 1024px)	화면 폭이 1024px 이하일 때
{ ... }	그 조건일 때 적용할 CSS

---

 

2 orientation — 가로 / 세로 화면 구분

스마트폰을 가로로 눕히거나 세로로 세우는 것에 따라 다른 스타일을 줄 수 있다. landscape(풍경화 = 가로)와 portrait(초상화 = 세로) 두 가지다.

@media screen and (orientation: landscape) { body { background-color: orange; } /* 가로 — 풍경화 */ } @media screen and (orientation: portrait) { body { background-color: yellow; } /* 세로 — 초상화 */ }

landscape
가로 = orange

portrait
세로 = yellow

📱 판정 기준 — 화면 폭이 높이보다 크면 landscape, 아니면 portrait. 폰을 회전시킬 때 동적으로 바뀐다.

---

3 실전 — 카드 레이아웃 3단계 분기

명언 카드를 화면 크기에 따라 다르게 보여주는 패턴. 모바일은 1단, 태블릿/PC는 2단(이미지+텍스트), 와이드 모니터는 가로 배치.

/* 기본 — 모바일 (320px 기준) */ #container { width: 320px; margin: 50px auto; } .card { width: 300px; height: 500px; } /* 세로형 */ /* 태블릿 ~ 일반 PC */ @media screen and (min-width: 768px) and (max-width: 1719px) { #container { width: 570px; } .card { width: 550px; height: 250px; } /* 가로형 */ .words { left: 310px; top: 50px; } } /* 와이드 모니터 — 카드 가로 나열 */ @media screen and (min-width: 1720px) { #container { width: 1710px; } .card { float: left; width: 550px; margin: 10px; } }

※ min-width vs max-width 선택법

• 모바일 우선(권장) — 기본은 모바일, min-width로 큰 화면 추가
• 데스크톱 우선 — 기본은 PC, max-width로 작은 화면 줄여나감
• 요즘은 모바일 우선이 표준 — 모바일이 더 흔하고, 기본 스타일이 가벼워서 성능에 유리

---

4 Flexbox — display: flex 한 줄의 마법

예전에는 가로 정렬을 위해 float을 쓰면서 clear까지 해줘야 했다. display: flex 한 줄이면 부모의 자식들이 자동으로 가로로 배치된다.

#container { width: 500px; height: 300px; display: flex; /* 자식이 한 줄로 정렬 */ border: 2px solid black; } #container div { width: 200px; }

display: flex (기본 = row)

1

2

3

📌 합쳐 봤을 때 폭이 600px(200×3)인데 부모는 500px이다. 보통이면 넘쳐야 하지만 flex가 자동으로 줄여서 한 줄에 끼워 넣는다.

---

반응형

5 flex-direction — 가로 / 세로 / 역방향

#container { display: flex; flex-direction: column; /* 세로로 쌓이게 */ }

값	의미	주축 방향
row (기본)	왼쪽 → 오른쪽	가로
row-reverse	오른쪽 → 왼쪽	가로 (역)
column	위 → 아래	세로
column-reverse	아래 → 위	세로 (역)

flex-direction: column

1

2

3

---

6 flex-wrap — 넘치면 다음 줄로

기본 flex는 한 줄에 다 끼워넣으려고 자식 크기를 강제로 줄인다. 줄어들지 않게 하려면 flex-wrap: wrap으로 다음 줄로 넘기게 만든다.

#container { display: flex; flex-wrap: wrap; /* 줄 바꿈 허용 */ }

flex-wrap: wrap (3개 × 200px = 600px → 부모 500px → 줄 바꿈)

1

2

3

값	동작
nowrap (기본)	한 줄에 욱여넣음 — 자식이 강제 축소됨
wrap	넘치면 다음 줄로 — 위에서 아래 순서
wrap-reverse	넘치면 다음 줄로 — 아래에서 위 순서 (역)

---

7 align-content — 여러 줄의 세로 정렬

align-content는 flex-wrap: wrap으로 줄이 여러 개일 때만 의미가 있다. 여러 줄을 컨테이너 안에서 어떻게 분포시킬지 결정한다.

값	의미
flex-start (기본)	위쪽으로 몰아서
flex-end	아래쪽으로 몰아서
center	가운데로
space-between	양 끝에 붙이고 사이는 균등하게
space-around	각 줄 위아래 같은 여백

flex-start (기본값)

1

2

3

center

1

2

3

space-around

1

2

3

---

8 align-items vs align-self

align-items

• 부모(컨테이너)에 적용
• 모든 자식의 교차축 정렬
• 예: align-items: center

align-self

• 자식 개별에 적용
• 그 자식만 교차축 정렬 다르게
• 예: align-self: flex-start

#container { display: flex; align-items: center; /* 모두 가운데 */ } #box1 { align-self: flex-start; /* 1번만 위로 */ }

align-items: center · #box1만 align-self: flex-start

1
flex-start

2

3

---

9 order — HTML 순서 무시하고 시각 재배치

order는 화면에 보이는 순서만 바꾼다. HTML 코드 순서는 그대로다(검색엔진/스크린리더는 원래 순서로 읽는다).

#box1 { order: 2; } /* 2번째에 표시 */ #box2 { order: 3; } /* 3번째에 표시 */ #box3 { order: 1; } /* 1번째에 표시 */

HTML 순서: box1, box2, box3 → 시각 순서: box3, box1, box2

box1
order:2

box2
order:3

box3
order:1

💡 실전 활용 — 모바일에서는 광고를 마지막에, 데스크톱에서는 가운데에 배치하는 식으로 미디어쿼리와 함께 자주 쓰인다.

---

10 자주 하는 실수

증상	원인	해결
@media가 안 먹힘	viewport 메타 누락	<meta name="viewport" ...> 추가
큰 화면용 미디어쿼리만 적용됨	max-width 순서가 작은 값부터	큰 값 → 작은 값 순으로 정렬
flex 자식이 강제로 작아짐	flex-wrap 미설정	flex-wrap: wrap 추가
align-content가 안 먹힘	줄이 1개라서 (wrap이 없거나 자식 적음)	여러 줄이 만들어지는지 확인
가운데 정렬이 안 됨	align-items와 align-content 헷갈림	한 줄 = align-items, 여러 줄 = align-content
order로 바꿨는데 접근성 문제	스크린리더는 원래 HTML 순서로 읽음	핵심 정보는 HTML 순서도 의미있게

---

11 핵심 한 줄 요약

MEDIA QUERY · FLEXBOX — KEY POINTS

@media 기본형@media screen and (max-width: 768px) { ... }

orientationlandscape(가로) / portrait(세로)

flex 시작부모에 display: flex — 자식 자동 가로 정렬

방향flex-direction: row / column / -reverse

줄 바꿈flex-wrap: wrap / wrap-reverse

한 줄 정렬align-items + justify-content

여러 줄 정렬align-content

개별 정렬align-self

시각 순서order: 숫자 (작을수록 앞)

Tags

#미디어쿼리 #mediaquery #flexbox #flexdirection #flexwrap #aligncontent #alignself #order #orientation #반응형 #CSS3 #티스토리

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

미디어쿼리, mediaquery, flexbox, flexdirection, flexwrap, aligncontent, alignself, order, orientation, 반응형, CSS3, 티스토리