6. 📱 반응형 웹 디자인 완벽 가이드 — 미디어쿼리부터 실전 예제까지
스마트폰, 태블릿, 데스크톱…
모든 디바이스에서 자연스럽게 보이는 웹을 만드는 기술,
그게 바로 반응형 웹 디자인(Responsive Web Design) 이다.
이번 글에서는 CSS 미디어쿼리(Media Query) 의 핵심 개념부터
그리드(Grid)와 플렉스(Flex)를 활용한 실전 반응형 설계법까지
단계별로 완전히 정리했다.
💡 1. 반응형 웹 디자인이란?
“하나의 웹페이지가 다양한 화면 크기에 맞춰 자동으로 레이아웃을 바꾸는 기술”
예전에는 모바일용, PC용 페이지를 따로 만들었다.
하지만 지금은 하나의 HTML로 다양한 기기를 대응하는 시대다.
✅ 반응형의 핵심 요소
- 유연한 레이아웃 (Flexible Layout)
- 유동적인 이미지 (Fluid Images)
- 미디어쿼리 (Media Query)
🧩 2. 뷰포트(Viewport) 설정 — 첫 단계
HTML <head>에 반드시 포함해야 하는 태그 👇
<meta name="viewport" content="width=device-width, initial-scale=1.0">
💬 역할:
- 기기 화면 폭을 기준으로 레이아웃 계산
- 확대/축소 없이 실제 크기로 표시
✅ 없으면 모바일에서 깨진 레이아웃이 보일 수 있다.
⚙️ 3. 미디어쿼리(Media Query) 기본 문법
@media (조건) {
/* 조건이 참일 때 적용할 CSS */
}
예시 👇
/* 768px 이하(태블릿, 모바일) */
@media (max-width: 768px) {
body {
background: lightgray;
}
}
✅ max-width는 “해당 크기 이하”
✅ min-width는 “해당 크기 이상”
💡 즉, max-width: 768px → 모바일용,
min-width: 1024px → 데스크톱용으로 자주 사용된다.
🧮 4. 주요 화면 크기 기준 (Breakpoint)
구분 기준 폭(px) 기기 예시
| 모바일 | max-width: 480px | 아이폰, 갤럭시 세로 |
| 태블릿 | max-width: 768px | 아이패드, 갤럭시탭 |
| 노트북 | max-width: 1024px | 13~14인치 화면 |
| 데스크톱 | min-width: 1280px | 일반 PC, 대형 모니터 |
💡 실무에서는 디자인 시안 기준으로 커스텀 브레이크포인트를 지정하기도 한다.
🧱 5. 레이아웃별 반응형 설계 예시
✅ 데스크톱
@media (min-width: 1024px) {
.container {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
}
}
✅ 태블릿
@media (max-width: 1024px) {
.container {
display: flex;
flex-direction: column;
}
}
✅ 모바일
@media (max-width: 768px) {
.container {
padding: 10px;
}
}
💬 Grid와 Flex를 조합하면 완벽한 반응형 구조를 구현할 수 있다.
🎯 6. 이미지 반응형 처리
img {
max-width: 100%;
height: auto;
}
✅ 부모 크기에 맞춰 자동으로 축소
✅ 이미지 깨짐 방지
💡 object-fit을 함께 사용하면 더 유연한 이미지 제어가 가능하다.
img.cover {
object-fit: cover;
}
img.contain {
object-fit: contain;
}
🧩 7. 폰트 사이즈 반응형 — rem, vw 단위 활용
단위 설명 예시
| px | 고정 크기 | font-size: 16px |
| rem | 루트(html) 기준 배수 | font-size: 1.2rem |
| vw | 화면 너비 기준 비율 | font-size: 2vw |
💬 rem은 일관성 있는 폰트 스케일링에 좋고,
vw는 반응형 폰트에 최적화되어 있다.
예시 👇
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}
✅ clamp(최소, 중간, 최대)로 폰트 크기를 유연하게 제한 가능.
⚡ 8. 네비게이션 반응형 예시
<nav class="nav">
<div class="logo">MySite</div>
<ul class="menu">
<li>Home</li><li>About</li><li>Contact</li>
</ul>
</nav>
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.menu {
display: flex;
gap: 20px;
}
/* 모바일 */
@media (max-width: 768px) {
.menu {
flex-direction: column;
display: none;
}
.menu.active {
display: flex;
}
}
✅ 화면이 작아지면 메뉴가 숨겨지고,
햄버거 버튼 클릭 시 .active로 토글되도록 구성 가능.
🧮 9. 반응형 카드 레이아웃
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}
✅ 화면이 줄어들면 자동으로 카드 개수가 줄어든다.
✅ auto-fill + minmax() 조합은 가장 강력한 반응형 패턴이다.
🎨 10. CSS 변수와 미디어쿼리 결합
“색상, 폰트, 여백 등 스타일을 미디어쿼리로 변수화할 수 있다.”
:root {
--font-size: 16px;
}
@media (max-width: 768px) {
:root {
--font-size: 14px;
}
}
body {
font-size: var(--font-size);
}
✅ 한 번만 선언해두면 모든 폰트 크기를 자동 조정할 수 있다.
🧠 11. 실무에서 자주 쓰는 반응형 패턴 3가지
패턴 설명 예시
| 모바일 퍼스트 | 기본 CSS는 모바일, 큰 화면일수록 보강 | @media (min-width: ...) |
| 데스크톱 퍼스트 | 기본은 PC, 작은 화면일수록 축소 | @media (max-width: ...) |
| Hybrid 방식 | 섹션별로 다르게 적용 | 대시보드, 랜딩페이지 |
💬 요즘은 모바일 퍼스트(Mobile First) 접근이 표준이다.
즉, 기본은 모바일 → 점진적으로 확장하는 형태.
⚙️ 12. 반응형 테스트 꿀팁
✅ 크롬 개발자도구 (Ctrl+Shift+I → "Toggle device toolbar")
✅ 단축키 Ctrl + Shift + M 으로 기기 전환
✅ 다양한 화면폭 (iPhone, iPad, Galaxy 등) 테스트 가능
💡 Safari, Edge 등에서도 테스트 권장 (기기별 렌더링 미묘하게 다름)
🧩 13. 실전 예제 — 반응형 페이지 구조
<header>Header</header>
<main>Main Content</main>
<aside>Sidebar</aside>
<footer>Footer</footer>
body {
display: grid;
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
grid-template-columns: 2fr 1fr;
gap: 10px;
}
/* 모바일 대응 */
@media (max-width: 768px) {
body {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
}
✅ 화면 폭이 줄어들면 자동으로 1열 구조로 변환된다.
🏁 14. 마무리 — “반응형은 선택이 아니라 기본이다”
지금의 웹은 “어떤 화면에서도 어색하지 않아야 한다.”
Flexbox와 Grid, 미디어쿼리를 조합하면
하나의 코드로 모든 화면 크기를 대응할 수 있다.
💬 “PC용 사이트를 따로 만드는 시대는 끝났다.”
다음 편에서는
✅ 7. CSS 애니메이션과 트랜지션 완벽 가이드 — 인터랙션으로 살아있는 웹 만들기
를 통해 웹을 생동감 있게 만드는 동적 CSS 기술을 다뤄보자.
#반응형웹 #미디어쿼리 #CSSResponsive