[CSS] 반응형 웹 & 레이아웃 가이드

👩🏼‍💻 Responsive Web, Media Query, Grid Layout, Multi CSS 파일 등을 기반 반응형 웹 디자인 개념 정리

---

1️⃣ 반응형 웹이란?

화면 크기(기기 종류)에 따라 자동으로 레이아웃과 스타일이 변경되는 웹 디자인 기법

핵심 기술 : @media 미디어 쿼리

@media (max-width: 600px) {
  .box { display: none; }
}

• max-width : 브라우저 너비가 지정 값보다 작거나 같을 때 적용
• min-width : 지정 값보다 클 때 적용

📁 예제: ex001_ResponsiveWeb.html, ex002_ResponsiveWeb.html, ex003_ResponsiveWeb.html

---

2️⃣ 뷰포트 설정 (필수)

<meta name="viewport" content="width=device-width, initial-scale=1">

• 모바일에서 화면을 축소/확대 없이 정확히 보여줌

---

3️⃣ Mobile First vs Desktop First

접근 방식	설명	예제
Mobile First	작은 화면부터 시작해 점점 확장	ex003_ResponsiveWeb.html
Desktop First	큰 화면을 기본으로 하고 점점 축소	ex002_ResponsiveWeb.html

---

4️⃣ Grid 기반 반응형 레이아웃

auto-fill + minmax 조합

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

• 여백 없이 반응형 아이템 배치 가능
• 콘텐츠 너비에 따라 동적으로 열 수 조정

📁 예제 : layout_grid.html

---

5️⃣ 멀티 CSS 파일 적용 방식

<link rel="stylesheet" href="web.css">
<link rel="stylesheet" href="mobile.css" media="(max-width:480px)">

• 기본 : web.css
• 화면 폭이 480px 이하일 경우 mobile.css가 덮어씀

📁 예제: layout.html + web.css + mobile.css

---

✅ 주요 미디어쿼리 정리

조건	예시 코드	설명
최대 600px	@media (max-width: 600px)	스마트폰
최대 768px	@media (max-width: 768px)	태블릿
최소 1024px	@media (min-width: 1024px)	데스크탑 이상

---

🧠 대표 패턴 비교

속성	Mobile First	Desktop First
기본 화면	작은 화면 (min-width)	큰 화면 (max-width)
적용 예	min-width: 768px	max-width: 768px