# media()

## 용도 <a href="#use" id="use"></a>

반응형 웹 디자인에 사용되는 미디어 쿼리를 손쉽게 사용하고자 할 때 유용합니다.

{% embed url="<https://youtu.be/SYj2fj55WE0>" %}

## 사용법 <a href="#usage" id="usage"></a>

전달 받은 미디어 쿼리를 분석해 CSS [@media](https://developer.mozilla.org/ko/docs/Web/CSS/@media) 문 코드로 변경 출력합니다.

> media($queries...)

```javascript
.usage {
  color: get-color(gray);
  
  @include media('>=xl', '2x') {
    color: get-color(black);
  }
}
```

| 매개변수(parameter) | 유형(type) | 필수(required) | 기본 값(default) |
| :-------------: | :------: | :----------: | :-----------: |
|   $queries...   |  arglist |      ✔︎      |               |

{% hint style="info" %}
media() 믹스인에 전달 가능한 [중단점](https://yamoo9.gitbook.io/scss-mixins/getting-started/configure#breakpoints), [미디어 표현식](https://yamoo9.gitbook.io/scss-mixins/getting-started/configure#media-expressions)은 [환경 구성 변수](https://yamoo9.gitbook.io/scss-mixins/getting-started/configure)를 통해 설정합니다.
{% endhint %}

위 예시 코드는 아래와 같이 CSS 코드로 출력됩니다.

```css
.usage {
  color: #787878;
}

@media (min-width: 80em) and (-webkit-min-device-pixel-ratio: 2), (min-width: 80em) and (min-resolution: 192dpi), (min-width: 80em) and (min-resolution: 2dppx) {
  .usage {
    color: #010101;
  }
}
```

## 문서 <a href="#logic" id="logic"></a>

자세한 사용법은 [include-media 라이브러리 문서](https://eduardoboucas.github.io/include-media/documentation/)를 참고하세요.

{% embed url="<https://eduardoboucas.github.io/include-media/documentation/>" %}

## 참고 <a href="#reference" id="reference"></a>

media() 믹스인은 [include-media](https://eduardoboucas.github.io/include-media/) 라이브러리를 활용합니다.

{% embed url="<https://eduardoboucas.github.io/include-media/>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yamoo9.gitbook.io/scss-mixins/mixins/responsive-web/media.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.