Media Query

CSS3에서부터 지원되는 Media Query 적용 예

참고: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

반응형 웹(Responsive Web)이라고 불리는 기능은 웹페이지에 접근하는 클라이언트 기기의 스크린 폭에 따라서 웹페이지 레이아웃의 폭과 크기가 자동으로 변경되도록 하여 이용자로 하여금 웹페이지를 쉽게 읽을 수 있도록 하는 것을 말한다.

그러므로 모든 반응형 웹은 접속하는 클라이언트 기기의 스크린 크기에 따라 적용하는 스타일을 달리하기 때문에 필수적으로 조건부 스타일시트를 선언하는 특징을 가진다. 

조건부 스타일시트를 정의하는 방법은 몇가지가 있지만 스타일시트 파일이나 스타일 태그 내에서 Media Query 를 이용하여 다음과 같이 조건부 스타일시트를 선언할 수 있다.

Media Query를 정의하는 2가지 방법 소개

<!-- CSS media query on a link element -->

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a style sheet -->

<style>

@media (max-width: 600px) {

  .facet_sidebar {

    display: none;

  }

}

</style>

Media Query 의 구성

 - media type : not, only 연산자를 사용하지 않으면 생략할 수 있으며 이 경우에는 media type 이 all으로 간주된다

 - expression : 한개 이상의 media features(미디어 특성) 포함, true/false 로 판정됨, 최종적으로 true 로 판정될 때 해당 스타일이 사용됨

 - expression : 논리 연산자(not, and, only), media features 으로 구성됨

논리 연산자 ( Logical Operator )

 - not : 미디어 커리를 부정

 - and : 다수개의 media features (미디어 특성)을 결합할 때, 또는 media feature와 media type을 결합할 때

 - only: 미디어 커리를 지원하는 브라우저에만 해당 스타일을 적용한다

한개의 media feature와 all media type을 사용한 기본적인 미디어 커리의 형태

@media (min-width: 700px) { 스타일 속성 정의 }

위의 media feature에 가로보기(landscape)를 and 로 결합하면  and의 양쪽 특성이 모두 true 으로 판정될 때만 해당 스타일이 적용된다

@media (min-width: 700px) and (orientation: landscape) { ... }

위의 미디어 타입은  all 으로 간주되지만 tv 타입으로만 제한하고자 한다면 다음과 같이 구성할 수 있다

@media tv and (min-width: 700px) and (orientation: landscape) { ... }

콤마로 분리된 표현식

아래와 같이 콤마로 표현식이 분리된 경우에는  논리 연산자 or 와 같은 기능을 하게 된다

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

위의 미디어 커리를 해석해보면, all (min-width: 700px) or handheld and (orientation:landscape) 으로 풀이된다

not 연산자의 사용 예

@media not all and (monochrome) { ... }

@media not (all and (monochrome)) { ... }

only 키워드는 미디어 커리를 지원하지않는 브라우저가 스타일을 적용하는 것을 방지하는 기능을 한다

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

all 미디어 타입(media type)과 한가지 이상의 미디어 특성(media features)의 조합으로 미디어 커리를 구성한 예

@media (max-width:500px) 

{

    #main-section

    {

       width:450px;

    }

}

@media (min-width:501px) and (max-width:700px) 

{

    #main-section

    {

       width:500px;

    }

}

@media (min-width:701px) and (max-width:900px) 

{

    #main-section

    {

       width:700px;

    }

}

@media (min-width:901px) 

{

    #main-section

    {

       width:900px;

    }

}

미디어 커리를 구성하는 각 성분 및 설정 가능한 속성

media_query_list: <media_query> [, <media_query> ]*

media_query: [[only | not]? <media_type> [ and <expression> ]*]

  | <expression> [ and <expression> ]*

expression: ( <media_feature> [: <value>]? )

media_type: all | aural | braille | handheld | print |

  projection | screen | tty | tv | embossed

media_feature: width | min-width | max-width

  | height | min-height | max-height

  | device-width | min-device-width | max-device-width

  | device-height | min-device-height | max-device-height

  | aspect-ratio | min-aspect-ratio | max-aspect-ratio

  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio

  | color | min-color | max-color

  | color-index | min-color-index | max-color-index

  | monochrome | min-monochrome | max-monochrome

  | resolution | min-resolution | max-resolution

  | scan | grid