[CSS] 07. 반응형 웹 기초 (Media Query)

[CSS ] 07. 반응형 웹 기초 (Media Query)

---

1. 반응형 웹이란?

반응형 웹은 화면 크기나 환경에 따라 웹 페이지의 레이아웃과 스타일이 자연스럽게 변경되도록 만드는 방식이다.

하나의 HTML 문서로 다양한 화면 크기에 대응한다.

---

2. 반응형 웹이 필요한 이유

• 화면 크기가 서로 다른 기기 존재
• 가로·세로 해상도 차이
• 한 화면에서 보기 편한 구조 필요

---

3. Media Query란?

Media Query는 화면 조건에 따라 CSS를 다르게 적용할 수 있는 문법이다.

---

4. Media Query 기본 문법

@media (조건) {
    선택자 {
        속성: 값;
    }
}

예시:

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

---

5. 화면 너비 기준 조건

• max-width : 최대 너비
• min-width : 최소 너비

@media (max-width: 1024px) {
    /* 화면이 1024px 이하일 때 */
}

@media (min-width: 768px) {
    /* 화면이 768px 이상일 때 */
}

---

6. 모바일 기준 작성 방식

작은 화면을 기본으로 작성한 뒤, 큰 화면에서 스타일을 확장하는 방식이다.

/* 기본 스타일 (작은 화면) */
.box {
    width: 100%;
}

@media (min-width: 768px) {
    .box {
        width: 50%;
    }
}

---

7. 자주 사용되는 분기 기준

• 480px 이하
• 768px 이하
• 1024px 이하
• 1200px 이상

---

8. 정리

• 반응형 웹은 화면 크기에 따라 스타일을 조절한다
• Media Query를 사용하여 조건별 CSS를 적용한다
• min-width와 max-width가 핵심이다