[CSS] 미디어 쿼리(media query)

미디어 쿼리(media query)

---

@media 규칙을 통해 서로 다른 매체 유형(media type)을 위한 맞춤식 스타일 시트(style sheet)를 지원합니다.

 

@media 규칙을 더욱 발전시켜 매체 유형(media type)과 하나 이상의 표현식(expression)으로 구성된 미디어 쿼리(media query)를 사용할 수 있습니다.

 

미디어 쿼리(media query)는 width, height, color 속성과 같은 미디어 관련 속성을 이용한 표현식을 통해 스타일이 적용되는 범위를 조절할 수 있습니다.

 

미디어 쿼리를 사용하면 콘텐츠(content)를 별도로 변경하지 않아도 웹 페이지에 접속하고 있는 기기에 알맞은 형태로 스타일이 조정됩니다.

 

 

미디어 쿼리 문법

 

다음은 같은 파일 내의 <style>태그 안에 미디어 쿼리가 위치할 경우의 문법입니다.

@media only|not 매체유형 and (속성) { CSS스타일코드; }

 

매체 유형(media type)

 

다음은 자주 사용되는 매체 유형(media type)입니다.

 

all	모든 매체에 사용함.
print	프린터 기기에 사용함.
screen	컴퓨터나 태블릿, 스마트폰 등 스크린(screen)이 있는 매체에 사용함.
speech	웹 페이지를 읽어주는 스크린 리더(screenreader)에 사용함.

 

미디어 쿼리(media query) 속성

 

orientation 속성을 제외한 모든 속성의 앞에는 min 또는 max 접두사를 사용할 수 있습니다.

위의 속성들을 적절히 활용하면 반응형 웹 사이트를 손쉽게 제작할 수 있습니다.

 

width	화면의 너비
height	화면의 높이
device-width	매체 화면의 너비
device-height	매체 화면의 높이
devie-aspect-ratio	매체 화면의 비율
orientation	매체 화면의 방향
color	매체의 색상 비트 수
color-index	매체에서 표현 가능한 색상의 개수
monochrome	흑백 매체에서의 픽셀당 비트 수
resolution	매체의 해상도

 

화면을 조절하면 색의 변화를 볼 수 있다.

<style>
  body {
    background-color: yellow;
  }

  /* 미디어 쿼리 */
  /* max-, min- 접두사를 사용할 수 있어요 */
  @media screen and (max-width: 1000px) {
    body {
      background-color: red;
    }
  }

  @media screen and (max-width: 600px) {
    body {
      background-color: blue;
    }
  }
</style>

 

참고자료

http://www.tcpschool.com/css/css_advanced_rules