미디어 쿼리(Media Query)

주히 🌼·2021년 1월 25일
0

미디어 쿼리(Media Query)는 반응형 웹 디자인의 핵심 부분이다.
뷰포트의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문이다.

예를 들어 뷰 포트가 480px보다 넓다라고 내가 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 어떠한 CSS를 적용할 수 있다.

🎈 미디어 쿼리의 기본

가장 간단한 미디어 쿼리 구문은 다음과 같다.

@media media-type and (media-feature-rule) {
  /*CSS CODE */
}

미디어 쿼리 구문의 구성요소

① 코드가 어떤 미디어를 위한 것인지 브라우저에 알려주는 미디어 유형
② 괄호로 묶은 CSS 규칙이 적용되기 위해 전달되어야하는 규칙 또는 조건문 격인 미디어 표현식
③ 조건문을 통과하고 미디어 유형이 올바른 경우 적용되는 CSS 규칙 집합

① 미디어 유형

지정할 수 있는 미디어 유형은 아래와 같다.

  • all
  • print
  • screen
  • speech
@media print {
    body {
        font-size: 12pt;
    }
}

위의 코드는 페이지가 인쇄된 경우에만 본문을 12pt로 설정한다는 뜻이다.

② 미디어 기능 규칙

미디어 유형을 지정한 뒤에 적용할 미디어 기능을 선정할 수 있다.

너비와 높이

반응형 디자인을 만들기 위해 가장 자주 사용되는 기능이다.
min-widthmax-width,width 등의 미디어 기능을 활용하여 뷰포트가 특정 너비 이상 또는 이하인 경우 CSS를 적용할 수 있다.

@media screen and (width: 300px) {
  body {
    color: skyblue;
  }
}

위의 코드는 뷰포트가 정확이 300px인 경우 본문 색을 skyblue로 변경시킨다는 뜻이다.

widthheight 미디어 기능은 범위 지정에 사용될 수도 있는데, min- 또는 max- 접두사를 붙이게 되면 최소값인지 최대값인지 표시할 수 있다.

@media screen and (max-width: 700px) {
    body {
        color: pink;
    }
}

위의 코드는 뷰포트가 700px보다 좁은 경우 본문 색이 pink라는 뜻이다.

실제로 최소값 또는 최대값을 주로 사용해 반응형 디자인을 만든다.

③ 방향성

orientation 으로 세로 모드인지 가로 모드인지를 검사할 수 있도록 해준다.

@media (orientation: landscape) {
    body {
        color: rebeccapurple;
    }
}

위의 코드는 장치가 가로 방향에 있는 경우 본문 텍스트 생상을 변경하는 코드이다.

** 참고로 세로는 orientation: portrait 이다.

🧨 복잡한 미디어 쿼리

미디어 쿼리를 가지고 그것들을 결합하거나 쿼리 목록을 만들 수 있다.

① 논리곱 미디어 쿼리

and를 이용해 미디어 기능을 결합한다.

@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue;
    }
}

위 코드는 뷰포트의 너비가 최소 400px 이상이고, 장치가 가로 모드인 경우에만 HTML 본문 텍스트 색상이 blue라는 뜻이다.

② 논리합 미디어 쿼리

@media screen and (min-width: 400px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}

위 코드는 뷰포트가 400px 이상이거나 장치가 가로모드면 HTML 본문 텍스트 색상이 blue라는 뜻이다.

③ 부정논리 미디어 쿼리

not 연산자를 사용하여 전체 미디어 쿼리를 부정할 수 있다.

@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}

위의 코드는 가로 모드가 아닐 때, 즉 세로 모드일 때 THML 본문 텍스트 색상이 blue 라는 뜻이 된다.

출처
https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/%EB%AF%B8%EB%94%94%EC%96%B4_%EC%BF%BC%EB%A6%AC_%EC%B4%88%EB%B3%B4%EC%9E%90_%EC%95%88%EB%82%B4%EC%84%9C

https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries

profile
하면 된다! 프론트앤드 공부 중 입니당 🙆‍♀️

0개의 댓글