[HTML/CSS 기초] 반응형 웹이란? 미디어쿼리(Media Query)로 모바일에도 잘 보이게 만들기!

 

반응형 웹이란?

 

👀 이런 경험, 있지 않으셨나요?

데스크톱에서는 완벽하던 웹페이지가 모바일에서는 글씨가 넘치고, 버튼이 겹치고, 이미지가 너무 작게 나오는 상황!
그럴 때 필요한 것이 바로 ‘반응형 웹’과 ‘미디어쿼리(Media Query)’ 입니다.

---

✅ 반응형 웹이란?

반응형 웹(Responsive Web) 은 화면 크기나 디바이스 종류에 따라 웹사이트의 레이아웃, 글꼴, 이미지 크기 등이 유연하게 조정되는 웹 디자인 기법이에요.

📱 PC, 태블릿, 스마트폰 등 어떤 환경에서도 웹페이지가 잘 보이도록 만드는 것이 목표!

---

🧠 왜 필요할까?

• 사용자 디바이스가 다양해짐 (예: 4.7인치 스마트폰 ~ 27인치 모니터까지!)
• 화면 크기마다 보여주는 방식이 다르면 더 보기 편하고 터치도 쉬워요
• SEO(검색 최적화)에도 도움됨

---

🎯 핵심 도구: 미디어쿼리(Media Query)

미디어쿼리는 CSS에서 특정 조건에 따라 스타일을 다르게 적용할 수 있게 해주는 기능이에요.

---

💡 기본 문법

@media (조건) {
  /* 조건이 맞을 때 적용할 CSS */
}

 

예시:

/* 화면 너비가 768px 이하일 때 폰트 크기 조정 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

---

🧩 자주 쓰는 조건 예시

조건	설명
max-width	특정 너비 이하일 때 (모바일, 태블릿 대응용)
min-width	특정 너비 이상일 때 (PC 이상 대응용)
orientation	화면 방향 (세로/가로)
max-height, min-height	세로 크기 조건

 

---

🧑‍💻 실전 적용 팁

/* 모바일 우선(Mobile First) 전략으로 작성하는 예시 */
body {
  font-size: 14px;
}

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

👉 이렇게 하면 기본은 모바일, 넓은 화면에서만 스타일을 확장하는 형태가 돼요!

---

🧾 정리하자면

• 반응형 웹은 디바이스 화면 크기에 맞춰 웹 레이아웃을 조정하는 기술
• CSS의 @media 쿼리를 활용해 조건부 스타일 적용
• 모바일 사용자가 많은 요즘은 필수 기술!