미디어 쿼리

Media queries

미디어 쿼리는 콘텐츠 렌더링이 화면 해상도(예: 모바일 및 데스크톱 화면 크기)와 같은 다양한 조건에 적응할 수 있도록 하는 CSS 3의 기능이다.2012년 6월 W3C 권장 표준이 되었으며,[1] 반응형 웹 디자인(RWD)의 초석 기술이다.

역사

미디어 질의는 1994년 Honkon Wium Lie의 초기 CSS 제안에서 처음 스케치되었지만 CSS 1의 일부가 되지 않았다.[2] 1997년의 HTML4 권고안은 향후 미디어 질의가 어떻게 추가될 수 있는지를 보여주는 예를 보여준다.[3]2000년에 W3C는 미디어 쿼리 및 다양한 장치 지원을 위한 또 다른 계획인 CC/PP에 대한 작업을 시작했다.이 둘은 같은 문제를 다루지만 CC/PP는 서버 중심인 반면 미디어 쿼리는 브라우저 중심이다.[4]미디어 질의에 대한 첫 번째 공개 작업 초안은 2001년에 발표되었고,[5] 그 명세서는 브라우저가 지원을 추가한 후 2012년에 W3C 추천서가 되었다.

사용법

미디어 쿼리는 미디어 유형과 하나 이상의 표현식으로 구성되며, 미디어 기능은 참 또는 거짓으로 확인된다.미디어 쿼리에 지정된 미디어 유형이 문서가 표시되는 장치 유형과 일치하고 미디어 쿼리의 모든 표현식이 참일 경우 쿼리의 결과는 참이다.미디어 쿼리가 참일 경우 일반적인 계단식 규칙에 따라 해당 스타일 시트 또는 스타일 규칙이 적용된다.[6][7]미디어 쿼리는 다음을 사용한다.@mediaCSS "규칙에 따라"

예

다음은 CSS 미디어 쿼리의 예:

@매체 스크린을 하다 그리고 (디스플레이 모드: 풀스크린) {   /* 여기에 있는 코드는 전체 화면의 화면에만 적용됨 */ } 
@매체 전부 그리고 (오리엔테이션: 풍경화) {   /* 여기에 있는 코드는 가로 방향에만 적용됨 */ } 
@매체 스크린을 하다 그리고 (최소 장치 폭: 500미터) {   /* 여기에 있는 코드는 500픽셀 이상의 화면에만 적용됨 */ }

미디어 유형

미디어 유형은 HTML 문서의 머리글에 "미디어" 속성을 사용하여 선언할 수 있다.<link>원소의링크된 문서가 표시될 장치에 "미디어" 속성의 값이 지정된다.[8]또한 미디어 유형은 XML 처리 지침 내에서 선언될 수 있다.@import규정상@media규칙에 따라CSS 2는 다음을 미디어 유형으로 정의한다.[9]

  • 전체(모든 장치에 적용됨)
  • 점자의
  • 양각의
  • 핸드헬드의
  • 인쇄하다
  • 투영
  • 스크린을 하다
  • 말씨
  • 티티
  • TV

미디어 유형 "all"은 스타일 시트가 모든 미디어 유형에 적용됨을 나타내는 데 사용될 수도 있다.[10]

미디어 기능

다음 표에는 2007년 6월 6일자 미디어 쿼리에 대한 최신 W3C 권장 사항에 나열된 미디어 기능이 수록되어 있다.[11]

특징 가치 최소/최대 설명
color 정수의 네 색상 성분당 비트 수
color-index 정수의 네 색상 조회 테이블의 항목 수
device-aspect-ratio 정수/수치 네 가로 세로 비율
device-height 길이 네 출력 장치의 높이
device-width 길이 네 출력 장치의 폭
grid 정수의 아니요. 그리드 기반 장치의 경우 참
height 길이 네 렌더링 표면 높이
monochrome 정수의 네 단색 프레임 버퍼의 픽셀당 비트 수
orientation "상" 또는 "상" 아니요. 화면 방향
resolution 해상도("dpi", "dpcm" 또는 "dppx") 네 해상도
scan "간격" 또는 "간격" 아니요. "tv" 미디어 유형 검색 프로세스
width 길이 네 렌더링 표면의 폭

참조

  1. ^ 미디어 쿼리 게시 기록 2012년 6월 19일
  2. ^ Håkon Wium Lie. "Cascading HTML Style Sheets". Retrieved 20 January 2013.
  3. ^ "Basic HTML data types". www.w3.org.
  4. ^ "Re: Feedback on Media Queries CR from Håkon Wium Lie on 2002-07-17 (www-style@w3.org from July 2002)". lists.w3.org.
  5. ^ "Media queries". www.w3.org.
  6. ^ "CSS media queries". Mozilla Developer Network and individual contributors. Retrieved 28 April 2017.
  7. ^ "How to create media queries in Responsive Web Design". TechRepublic.
  8. ^ "HTML link tag". W3Schools. Retrieved 28 April 2017.
  9. ^ "Media Queries". World Wide Web Consortium. Retrieved 28 April 2017.
  10. ^ "Media Queries". World Wide Web Consortium. Retrieved 28 April 2017.
  11. ^ "Media Queries". Sitepoint. Retrieved 28 April 2017.

외부 링크