미디어 쿼리 🌱

반응형 웹을 반영하기 위해서 미디어 쿼리를 적용해야 합니다.

 

아래는 미디어 쿼리의 실사용 예시 입니다.

@media screen and (min-width: 200px) {
    .media-query-div {
      background-color: black;
    }
  }
  @media screen and (min-width: 400px) {
    .media-query-div {
      background-color: green;
    }
  }
  @media screen and (min-width: 600px) {
    .media-query-div {
      background-color: blue;
    }
  }
  @media screen and (min-width: 800px) {
    .media-query-div {
      background-color: orange;
    }
  }

 

 

미디어 쿼리에는 논리연산자를 이용해 미디어 기기, 미디어 특성 등을 설정할 수 있습니다.

위의 예시중 screen은 미디어 기기, 조건은 min-width 입니다.

 

미디어 쿼리에 사용할 수 있는 논리연산자는 다음과 같습니다.

• and -> 모든 조건이 참일때 쿼리 내용을 수행합니다. 주로 미디어 기기와 특성을 조합할때 사용합니다.
• not -> 쿼리가 거짓일때만 내용을 반영합니다. (미디어 쿼리 전체의 내용을 부정합니다)
• only
• ,  -> or의 역할을 대신해 줍니다.

 

미디어 기기에는 다음과 같은 종류가 있습니다.

• all  -> 모든 장치에 적합합니다.
• screen -> 화면이 대상입니다.
• print -> 인쇄 결과물 및 출력 미리보기 화면에 나오는 문서입니다.
• speech -> 음성 합성장치 대상입니다.

복잡한 미디어 쿼리의 예시를 살펴보겠습니다.

@media (min-width: 30em) and (orientation: landscape) {...}

최소 width가 30em 이고 미디어 기기가 가로모드일때만 쿼리를 실행합니다.

@media screen and (min-width: 3em) and (orientation: landscape) {...}

화면이 달린 기기여야 하고 최소 width가 3em 이고 미디어 기기가 가로모드일때만 쿼리를 실행합니다.

 

이때 미디어 특성의 width는 viewport를 기준으로 입니다.

 

 

 

 

 

출처: https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries

미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN