@media 란?

• 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용할 수 있다.
• @media를 사용하여 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 css 블록을 적용할 수 있다.
  • 미디어 쿼리란? 미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용하다.

사용법

/* 최상위 코드 레벨 */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* 다른 조건부 @규칙 내에 중첩 */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

prefers-reduced-motion: no-preference

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 5s linear;
  }
}

• 사용자가 시스템에서 사용하는 불필요한 모션의 양을 최소화하도록 요청했는지 여부를 감지하는 데 사용된다.
  • no-preference : 사용자가 시스템에 기본 설정을 알리지 않았음을 나타낸다.
  • reduce : 사용자가 전정 운동 장애를 가진 사람들에게 불편을 유발하는 동작 기반 애니메이션 유형을 제거하거나 대체하는 인터페이스를 선호함을 시스템에 알렸음을 나타낸다.

https://developer.mozilla.org/ko/docs/Web/CSS/@media
https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion