> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/scss-mixins/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/scss-mixins/mixins/responsive-web/media.md).

# media()

include-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() 믹스인에 전달 가능한 [중단점](/scss-mixins/getting-started/configure.md#breakpoints), [미디어 표현식](/scss-mixins/getting-started/configure.md#media-expressions)은 [환경 구성 변수](/scss-mixins/getting-started/configure.md)를 통해 설정합니다.
{% 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/>" %}