미디어 쿼리 수신기

Windows Internet Explorer 9에서는 장치나 미디어를 기반으로 글꼴 크기나 여백 등의 요소 스타일을 변경하기 위한 CSS3(Cascading Style Sheets, Level 3) 미디어 쿼리를 새롭게 지원했습니다. Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱에 새로 추가된 미디어 쿼리 수신기에서는 스크립트를 사용하여 페이지가 실행 중인 미디어 또는 환경의 변경 내용에 반응할 수 있습니다.

미디어 쿼리 수신기는 CSSOM 보기 모듈섹션 4.1에 지정되어 있으며, 현재 W3C(World Wide Web 컨소시엄) 작업 초안 단계입니다.

미디어 쿼리 수신기의 실습 데모는 IE 테스트 드라이브CSS3 미디어 쿼리 및 미디어 쿼리 수신기(영문)를 참조하세요.

미디어 쿼리 수신기를 통해 이 항목의 뒷부분에서 설명하는 두 가지 새로운 기능을 사용할 수 있습니다.

  • JavaScript를 사용하여 런타임에 미디어 쿼리 평가
  • 수신기에서 미디어 쿼리 평가의 변경 내용 구독

이 항목의 내용은 다음과 같습니다.

미디어 쿼리 수신기 만들기

런타임에 미디어 쿼리를 평가하려면 새로운 창 메서드인 matchMedia를 사용하여 MediaQueryList 개체를 만듭니다.

메서드설명

matchMedia(sList)

하나 이상의 미디어 쿼리가 포함된 문자열을 받아들이고 MediaQueryList 개체를 반환합니다.

 

matchMedia 메서드는 미디어 쿼리 문자열을 받아들이고 MediaQueryList 개체를 반환합니다. 다음 예제에서는 창의 너비나 높이가 특정 크기보다 작은지 확인하는 미디어 쿼리를 만듭니다.


mql = window.msMatchMedia("(min-width:450px)");

MediaQueryList 개체는 다음 속성을 제공합니다.

속성설명

matches

미디어 쿼리 목록이 현재 창의 상태와 일치하면 "true"를 반환하고, 그렇지 않으면 "false"를 반환합니다.

media

MediaQueryList 개체를 만드는 데 사용된 직렬화된 버전의 미디어 쿼리 목록을 반환합니다.

 

MediaQueryList 개체는 다음 메서드를 제공합니다.

메서드설명

addListener(callback)

MediaQueryList 개체의 수신기 목록에 콜백 함수를 추가합니다. 이 함수는 미디어 쿼리 평가가 변경될 때마다 호출됩니다.

removeListener(callback)

MediaQueryList 개체의 수신기 목록에 주어진 콜백 함수를 제거합니다.

 

matches 속성은 미디어 쿼리 평가를 반환하는 부울 값입니다. 위 예제를 사용할 경우 matches는 창의 너비가 지정된 최소값보다 크거나 같으면 true를 반환합니다.


if (mql.matches) 
{
  // Window is fine. 
} else 
{
  // Window is too narrow.       
}

미디어 쿼리 수신기 구독

미디어 쿼리 변경 내용을 검색하려면 수신기에서 MediaQueryList 개체를 구독할 수 있습니다. addListener 메서드는 콜백 함수를 사용하며, 미디어 쿼리 평가가 변경될 때 이 함수를 호출합니다. 이전 미디어 쿼리를 사용할 경우 다음 예제는 미디어 쿼리 변경 내용을 구독합니다.


mql.addListener(sizeChange); // Size change is the callback function.function sizeChange(mql) 
{
  if (mql.matches) 
  {
    // The window is big enough for content.
  } 
  else 
  {
    // The window has gotten too small for content.
  }
}

수신기는 미디어 상태가 실제로 변경될 때마다 콜백 함수를 호출합니다. 창 크기를 지정한 minwidth 특성 값보다 좁게 조정하면 콜백 함수가 호출됩니다. 창이 min-width보다 넓어지면 콜백 함수가 다시 호출됩니다. MediaQueryList 개체는 콜백 함수에 매개 변수로 전달됩니다.

관련 항목

DOM(문서 개체 모델)
개발자용 Internet Explorer 10 가이드

 

 

표시:
© 2014 Microsoft