반응형 웹이란? CSS 미디어쿼리로 모바일 대응하기

오늘날 대부분의 웹사이트는 데스크탑뿐만 아니라 모바일, 태블릿 등 다양한 화면 크기에서 동작해야 합니다.
이러한 요구를 충족시키기 위해 사용되는 기술이 바로 **“반응형 웹 디자인(Responsive Web Design)”**이며,
그 핵심 도구가 바로 **CSS의 미디어쿼리(Media Query)**입니다.

이번 글에서는 비전공자와 입문자도 쉽게 이해할 수 있도록 반응형 웹의 개념과 미디어쿼리의 활용 방법을 예제와 함께 정리해드립니다.

✅ 반응형 웹이란?

사용자의 화면 크기에 따라 콘텐츠의 레이아웃이 유연하게 변경되는 웹 디자인 방식

즉, 하나의 HTML 코드로 다양한 디바이스에서 적절한 화면을 보여주는 방식입니다.

기기 종류화면 폭 예시

데스크탑	1024px 이상
태블릿	약 768px~1023px
스마트폰	767px 이하

반응형 웹은 하나의 웹사이트로 모든 환경에 대응할 수 있어 **관리 효율과 사용자 경험(UX)**을 동시에 개선합니다.

✅ CSS 미디어쿼리란?

**미디어쿼리(Media Query)**는 화면의 너비, 높이, 해상도, 방향 등 기기의 특성에 따라 CSS를 다르게 적용할 수 있게 해주는 기능입니다.

기본 문법:

@media (조건) { /* 해당 조건일 때 적용할 스타일 */ }

예시:

@media (max-width: 768px) { body { background-color: lightblue; } }

화면의 너비가 768px 이하일 때, 배경색을 연한 파란색으로 적용

✅ 실습: 반응형 프로필 카드 만들기

아래는 간단한 프로필 카드에 미디어쿼리를 적용하여
모바일에서는 세로 정렬, 데스크탑에서는 가로 정렬로 보여지도록 만든 예제입니다.

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>반응형 프로필 카드</title> <style> body { font-family: Arial, sans-serif; background: #f5f5f5; padding: 40px; } .card { display: flex; flex-direction: row; align-items: center; background: white; border-radius: 10px; padding: 20px; max-width: 600px; margin: auto; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .card img { width: 150px; border-radius: 50%; margin-right: 20px; } .card-content { flex: 1; } /* 반응형 적용 */ @media (max-width: 768px) { .card { flex-direction: column; text-align: center; } .card img { margin: 0 0 15px 0; } } </style> </head> <body> <div class="card"> <img src="https://via.placeholder.com/150" alt="프로필 이미지"> <div class="card-content"> <h2>홍길동</h2> <p>웹 개발을 배우는 중입니다. 반응형 웹으로 어디서든 잘 보이는 사이트를 만들고 싶어요.</p> </div> </div> </body> </html>

✅ 코드 설명

.card: 기본적으로 가로 정렬 (flex-direction: row)
@media (max-width: 768px):
- 화면 너비가 768px 이하일 때 세로 정렬로 변경 (flex-direction: column)
- 이미지의 마진 변경으로 여백 조정

이처럼 단 한 줄의 미디어쿼리만으로도 모바일 사용자에게 적합한 레이아웃을 제공할 수 있습니다.

✅ 자주 사용하는 미디어쿼리 예시 모음

/* 모바일 (최대 480px) */ @media (max-width: 480px) { } /* 태블릿 (최대 768px) */ @media (max-width: 768px) { } /* 데스크탑 (최소 1024px) */ @media (min-width: 1024px) { }

상황에 따라 min-width 또는 max-width를 선택적으로 사용합니다.

✅ 실전 팁: 반응형 웹 구축 전략

📱 모바일 우선(Mobile First) 접근
→ 기본 스타일은 모바일 기준으로 작성하고, 미디어쿼리로 넓은 화면에 스타일을 추가
🧩 flex, grid 레이아웃과 함께 사용하면 효과적
→ 반응형 레이아웃 구현에 최적화된 CSS 레이아웃 기술과 함께 사용
⚠ 너비 단위는 % 또는 vw 등 상대 단위 사용 권장
→ 고정된 px보다 유연한 레이아웃 구현 가능

마무리: 반응형 웹은 현대 웹의 기본입니다

이제는 데스크탑만 고려하는 시대는 지났습니다.
모바일 사용자 비중이 절반 이상을 차지하는 시대에, 반응형 웹은 더 이상 옵션이 아니라 필수입니다.

미디어쿼리는 복잡한 자바스크립트 없이도
화면 크기만으로도 똑똑하게 스타일을 조정할 수 있는 매우 강력한 CSS 기능입니다.

오늘 실습한 예제를 시작으로,
자신만의 웹페이지에 반응형 레이아웃을 적용해보세요.
모든 기기에서 잘 보이는 웹페이지를 만드는 개발자의 첫 걸음을 떼게 될 것입니다.

저작자표시 비영리 변경금지 (새창열림)

info521 님의 블로그

반응형 웹이란? CSS 미디어쿼리로 모바일 대응하기