lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroCssChapter5Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter3Title

webIntroCssChapter4Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
    <title>Media Query 예제</title>
  </head>
  <body>
    <div class="container">
      <h1>미디어 쿼리 활용</h1>
      <p>화면 크기에 따라 배경 및 디자인이 변경됩니다.</p>
    </div>
  </body>
</html>

# 미디어 쿼리(Media Query)

`Media Query`는 웹 페이지의 스타일을 스마트폰, 태블릿, PC 등 다양한 화면 크기에 따라 최적의 레이아웃과 디자인을 보여주기 위해 사용합니다.

<br />

## 기본 구조

Media Query는 `@media`로 시작하며, 그 뒤에 조건을 기술합니다.

해당 조건을 만족하는 경우에 대한 스타일은 중괄호 `{ }` 안에 넣습니다.

<br />

## 예시:

```css title="CSS"
/* 화면 크기가 600px 미만일 때의 스타일 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue; /* 배경색을 lightblue로 설정 */
  }
}
```

여기서는 화면 크기가 600px 미만일 때 `body`의 배경색을 `lightblue`로 설정합니다.