미디어 쿼리 및 수신기

Windows Internet Explorer 9은 CSS, HTML, XML 및 XHTML로 작성한 미디어 쿼리를 새롭게 지원했습니다. Internet Explorer 10 및 JavaScript로 작성한 Windows 스토어 앱은 미디어 쿼리 수신기를 새롭게 지원했습니다. 미디어 쿼리를 사용하면 웹 개발자가 스타일시트의 범위를 정확한 장치 기능 집합으로 지정할 수 있으며, 미디어 쿼리 수신기를 통해 스크립트를 사용하여 페이지가 실행되는 미디어 또는 환경 변경에 반응할 수 있습니다.

미디어 쿼리

미디어 쿼리를 사용하면 모바일 장치(작은 화면, 제한된 색상표, 낮은 해상도 등), 노트북(작은 화면, 전체 색상표, 높은 해상도 등), 표준 컴퓨터(큰 화면, 전체 색상표, 높은 해상도 등)에서 검색하는 사용자용 페이지를 각각 다르게 디자인할 수 있습니다. CSS3 미디어 쿼리에서 지원하는 미디어 속성의 전체 목록에는 width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome 및 resolution이 포함됩니다.

다음 선언은 @media 규칙을 사용한 일반적인 미디어 쿼리입니다.


@media screen and (max-width:400px) {div {border:none;}}

이 경우 screen은 대상 미디어 유형을 나타내고 max-width는 대상 미디어 속성입니다. 이 선언은 너비가 400픽셀 이상인 화면에 페이지가 표시되는 경우에만 지정한 규칙(div 요소에 테두리 없음)이 적용됨을 나타냅니다. 다음과 같이 미디어 속성을 함께 사용하여 보다 구체적인 쿼리를 만들 수 있습니다.


@media screen and (max-width:400px) and (max-height:600px) {…}

이 선언은 너비가 400픽셀 이상이고 높이가 600픽셀 이상인 화면이 미디어인 경우에 지정한 규칙을 적용합니다.

미디어 쿼리 수신기

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

  • 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 개체는 콜백 함수에 매개 변수로 전달됩니다.

API 참조

Media Queries
Media Query Listeners

샘플 및 자습서

적응 웹 사이트 디자인

Internet Explorer 테스트 드라이브 데모

CSS3 미디어 쿼리 및 미디어 쿼리 수신기

IEBlog 게시물

창 크기에 맞게 사이트 적응
CSS 모서리: CSS3 미디어 쿼리

사양

미디어 쿼리
CSSOM 뷰 모듈: 섹션 4.1

관련 항목

CSS3 미디어 쿼리를 사용하여 다양한 장치에 응답

 

 

표시:
© 2014 Microsoft