W3C 미디어 쿼리 level 4(Candidate Recommendation), 번역해 보다

W3C 미디어 쿼리, 번역해 보다

제가 블로그 공백이 너무 길다 보니 처음 글로 무엇을 쓸까 참 많이도 헤멨는데....

그러다가 반응형 웹 기술에 필요한 '미디어 쿼리'가 가장 적절하고 필요한 글이란 생각이 들었답니다

예전에 미디어 쿼리 관련 글([css] 미디어 쿼리, @media query 이해하기)을 쓴 적도 있지만, 보완해야 할 점이 많이 보이더라고요.

그런데 이 자료 저 자료를 모으다 보니 시간이 생각 외로 너무 많이 걸려서요... --;

그래서 마음에 부담을 줄일 겸, W3C에서 작성한 미디어 쿼리 글을 번역해 보려고 합니다.

(원문을 통째로 번역한 것은 아니며, 제가 자의적으로 제외시킨 부분도 있음)

이 문서는 권고안이 되기 전 권고안 후보(Candidate Recommendation)이며, 이 문서를 인용하는 것은 부적절하다고

아래 글에 나옴을 밝혀둡니다.

일단 오늘 한 것만 번역해 올리고, 시간 날 때마다 추가로 보태어 보겠습니당

이 글은 아래 사이트를 토대로 번역했습니다~

https://www.w3.org/TR/2017/CR-mediaqueries-4-20170905/

미디어 쿼리 개요

미디어 쿼리는 웹저작자가 브라우저 또는 화면 장치의 값과 특질들을 검사하고 질문할 수 있도록 한다.

미디어 쿼리는 문서에 조건적으로 스타일을 적용하기 위해서 css @media rule에서 사용되며

HTML과 javascript 같은 다양한 문맥과 언어에서 사용된다.

미디어 쿼리 level 4는 미디어 쿼리, 미디어 종류(media type), 미디어 특질들(media feature) 의 구문과

메커니즘을 기술한다.

미디어 쿼리 level 3에서 규정된 특질들을 확장하고 대체한다.

이 문서의 상태

이 부분은 이 문서 발행 시기의 상태를 기술한다.

다른 문서가 이 문서를 대체할 수 있다.

현재 W3C 발행 목록과 이 기술적 보고서의 가장 최신 개정안은 https://www.w3.org/TR/ 에서 확인할 수 있다.

이 문서는 CSS Working Group에 의해 Candidate Recommendation(이하 CR로 통일, 권고안 후보)로 제작되었다.

이 문서는 W3C 권고안이 되기 위해 제작되었다.

이 문서는 적어도 2018. 3. 5일까지 권고안 후보로 남아있을 것이다. 폭 넓은 검토를 위한 기회를 보장하기 위해.

CR 출판이 W3C 멤버쉽에 의한 보증을 암시하지 않는다.

이것은 초안이고 어느 때라도 업데이트, 대체 또는 다른 문서에 의해 퇴화될 수 있다.

이 문서는 진행 중인 작업이기 때문에 이 문서를 인용하는 것은 부적절하다.

마지막 초안 이후 수정사항은 수정 기록 부분을 보라.

https://www.w3.org/TR/2017/CR-mediaqueries-4-20170905/#changes

다음 특질들은 위험상태(at risk)이며, CR 기간 동안 낙오될 수 있다.

'hover', 'any-hover', 'pointer', 'any-pointer' media features

"at-risk"는 W3C 과정의 용어이며, 그 특질을 빠뜨리거나, 지체될 위험에 처해 있다는 것을 필연적으로 암시하지는

않는다.

그것은 WG가 그 특질이 시기 적절하게 상호 정보 운용 시행되는 어려움에 처할 수 있는데,

그래서 만일 필요하면, WG는 그 특질을 빠트릴 수 있음을 이렇게 표시한다.

제안된 표준안 단계로 이동할 때 새로운 CR을 발행할 필요 없이 그 특질을 먼저 제외하고

미디어 쿼리 소개

이 부분은 규범이 아니다(This section is not normative.)

HTML4는 각기 다른 미디어 종류를을 위해 마련된, 미디어 의존적인 스타일 시트를 지원하기 위한 메커니즘을 규정했다.

예를 들어 문서는 화면과 프린트 장지를 위한 각기 다른 스타일 시트를 사용할 수 있다.

HTML에서 이렇게 작성 할 수 있다.

CSS는 @media와 @import rule를 사용해 이 기능을 채택하고 확장했다.

개별 특질들의 값을 질문하는 기능을 추가하면서 말이다.

css 스타일 시트 내부에, 이 부분을 어떤 미디어 종류에 적용하도록 선언할수 있다.

@media screen {
* { font-family: sans-serif }
}

비슷하게, 스타일시트는 미디어 쿼리에 기초하여 조건적으로 import될 수 있다

@import "print-styles.css" print;

미디어쿼리는 HTML, XHTML, XML에서 사용될 수 있고, CSS의 @import와 @media rules과 함께도 사용할 수 있다.

미디어 쿼리

미디어 쿼리는 현재 문서가 표시되고 있는 브라우저(user agent) 또는 장치의 어떤 면을 검사하는 방법이다.

미디어 쿼리는 (거의) 항상 문서의 내용, 스타일링, 또는 다른 내부적인 면으로부터 독립적이다.

그들은 오직 외부적인 정보에 의존적이다. 다른 특질이 @viewport rule같은 미디어 쿼리의 해상도에

영향을 끼친다고 명쾌하게 명시하지 않는 한.

미디어 쿼리 구문은 선택적인 미디어 쿼리 연산자, 선택적인 미디어 종류, 그리고 0 또는 그 이상의 미디어 특질들로

구성된다.

미디어 쿼리는 진실true이거나 거짓false인 논리적인 표현이다.

미디어 종류가, 만일 명시되면, 브라우저가 작동하는 장치의 미디어 종류에 일치하면 그리고 미디어 조건이 사실이면,

미디어 쿼리는 진실이다.

html로 작성된 가장 단순한 예

이 예는 "example.css"가 스크린이며 색상 장치일 때 적용함을 표현한다.

css에서 @impot rule로 작성할 때는 다음과 같다.

@import url(example.css) screen and (color);

미디어 쿼리를 결합하기

몇 가지 미디어 쿼리들이 쉼표로 분리된 미디어 쿼리 목록으로 결합될 수 있다.

미디어 쿼리 구성요소가 어느 것이든 진실이면 미디어 쿼리 목록은 진실이다.

그리고 오직 그것의 구성요소 미디어 쿼리의 전체가 거짓일 때만 거짓이다.

예를 들어, 다음 미디어 쿼리 목록은 진실이다. 만일 미디어 종류가 screen 이고 색상 장치면,

또는 미디어 종류가 projection이고 색상장치이면.

@media screen and (color), projection and (color) { … }

비어 있는 미디어 쿼리 목록은 진실로 평가한다. 예를 들어, 이들은 같다.

@media all { … }
@media { … }

미디어 쿼리 수식어

미디어 쿼리는 선택적으로 하나의 미디어 쿼리 수식어가 앞에 올 수 있다.

이것은 다음 미디어 쿼리의 의미를 바꾸는 하나의 키워드이다.

1. 미디어 쿼리를 부정하기 : not 키워드

개별 미디어 쿼리는 not을 앞에 붙힘으로써 부정하는 결과를 가져올 수 있다.

미디어 쿼리가 정상적으로 ture로 평가한다면, not을 앞에 붙힘으로써, 거짓으로 평가하게 만든다. 거꾸로도 마찬가지.

예를 들어, 다음은 색상 장치가 가능한 화면을 제외한 모든 것에 적용될 것이다.

전체 미디어 쿼리가 부정된다는 것에 주목하라, 단순히 media type이 아니라.

2. 오래된 브라우저로부터 미디어 쿼리 숨기기 : only 키워드

미디어 쿼리의 개념은 html4에서 기원한다. 명세는 오직 media type만을 규정했지만 media feature 같은 미래 개념

의 추가에 상응하는 순방향 호환성 구문을 가지고 있다.

그것은 첫번째 비 알파벳숫자 문자까지 미디어 쿼리 문자를 소모할 것이다.

그리고 그것을 media type으로 번역할 것이다. 나머지를 무시하면서

예를 들어, 미디어 쿼리 screen and (color) 은 단지 screen로 잘릴 것이다.

불행히도, 이것은 이러한 에러 처리 행동을 사용하는 오래된 브라우저가 미디어 쿼리에 있는 어떠한 media feature

라도 무시할 것이라는 의미이다.

심지어 쿼리에서 media type이 훨씬 더 중요하더라도.

이것은 우연치 않게 부적절한 상황에 적용되는 스타일이 나올 수 있다.

오래된 브라우저로부터 이러한 미디어 쿼리를 숨기기 위해, 미디어 쿼리는 키워드 only를 앞에 붙일 수 있다.

only키워드는 미디어 쿼리 결과에 아무런 영향을 미치지 않지만, 알려지지 않는 only 키워드를 명시함으로써

미디어 쿼리가 오래된 브라우저에 의해 번역되도록 하고, 결국 나머지를 무시하게 만들 것이다.

이 예문에서, <link>요소에 의해 규정되는 스타일시트는 오래된 브라우저에 의해 사용되지 않을 것이다.

심지어 정상적으로 'screen' 미디어 타입에 알맞지만 말이다.

주의 :

only 키워드는 오직 미디어 종류 앞에 사용될 수 있다.

미디어 특질들로 구성되는 미디어 쿼리, 또는 다른 not 같이 미디어 쿼리 수식어를 지닌 것은

오래된 브라우저에 의해 자동으로 거짓으로 간주될 것이다.

주의: 이 명세를 발행하는 시기에, 이러한 오래된 브라우저는 극히 드물고, 그래서 only 수식어 사용도 드물다.

만일 있다면 불가피하게.

미디어 종류(Media Types)

미디어 종류는 문서가 표시될 수 있는 사용자(user-agent) 장치의 넓은 범주이다.

미디어 종류 모음은 원래 HTML4에서 <link> 요소에서 미디어 속성을 위해 규정되었다.

불행히도, 미디어 종류는 장치와 다른 스타일링 필요를 구분하기 위한 방법으로 불충분한 것으로 판명되었다.

원래 뚜렷한 구분이었던 일부 범주는('screen' 과 'handheld' 같은) 그것들의 발명 이래 수년간 상당히 혼합되었다.

'tty' 또는 'tv' 같은 다른 것들은 완전한 기능의 컴퓨터 모니터의 규범과 유용한 차이를 드러낸다.

그래서 다른 스타일링을 목표로 하기 위해 잠재적으로 유용하다.

하지만, 상호 배타적인 미디어 종류의 규정은 합리적인 방법으로 그들을 사용하기 어렵게 만든다.

대신 그들의 배타적인 면들은 'grid' 또는 'scan'같은 미디어 특질들로 더 낫게 표현된다.

이와 같이, 다음 미디어 종류는 미디어 쿼리에서 사용하도록 규정된다.

all - 모든 장치에 알맞음

print - 프린터와, 출력된 화면을 복제하기 위해 의도된 장치에 알맞음.

가령 '인쇄 미리보기' 에서 문서를 보여주는 웹브라우저 같은

screen - 'print' 또는 'speech'에 일치하지 않는 모든 장치

speech - 화면낭독기나 페이지를 읽어주는 비슷한 장치

게다가, 다음 퇴화된 미디어 종류들을 규정한다.

웹저작자들은 이들 미디어 종류들을 사용해서는 안된다. 대신, 스타일 저항을 시도하는 장치의 양상을 더 낫게

표현하는 적절한 미디어 특질들을 선택하는 것이 권장된다.

user agent는 다음 미디어 타입을 유효한 것으로 인식한다. 하지만 이것들이 아무것에도 일치하지 않게 만들어야 한다.

tty

projection

handheld

braille

embossed

주의 : 모든 미디어 타입들이 때가 되면 역시 퇴화될 것으로 예상한다.

그들의 중요한 차이를 포착하는 적절한 미디어 특질들이 규정되기 때문에.

미디어 특질(Media Features)

미디어 특질은 미디어 종류media type보다 더 세분화 된 검사이다.

사용자(user agent) 또는 화면 장치의 단일하고도 구체적인 특질들을 검사하며..

구문론상으로, 미디어 특질들은 css 속성을 닮았다. 그들은 특질 이름, 콜론, 이것을 검사하는 값으로 구성된다.

이들 역시 꼭 특질 이름처럼 불 형식으로 쓸 수 있다. 또는 비교 연산자와 함께 범위 형식(range form)으로

*boolean 불 방식의(참과 거짓을 나타내는 숫자 1과 0만을 이용하는 방식)

그러나 css 속성과 미디어 특질들 사이에 몇가지 중요한 차이가 있다.

1. 속성들은 문서를 어떻게 표시할지에 대한 정보를 제공하기 위해 사용된다.

미디어 특질들은 출력 장치의 요건을 기술하기 위해 사용된다.

2. 미디어 특질들은 세미콜론으로 구분되기보다 항상 괄호로 감싼다 그리고 'and' 또는 'or' 키워드로 결합된다.

예 : '(color) and (min-width: 600px)'

3. 미디어 특질들은 불린 문맥에서 특질들을 평가하기 위해 오직 그것의 이름(콜론과 특질 값을 생략하며)만

주어질 수 있다.

이것은 0 또는 'none'을 대표하는 합리적인 값을 가지는 특질들을 위한 편리한 축약이다.

예를 들어 '(color)'는 'color' 미디어 특질들이 0이 아니면 진실이다.

4. 범위'range' 유형을 지닌 미디어 특질들은 범위 문맥에서 쓰여질 수 있다. (추가 설명이 필요합니다...)

이것은 콜론보다 표준의 수학적 비교 연산자를 사용한다. 또는 'min-' 또는 'max-' 접두어를 지닌 특질 이름들을 지닌다.

5. 때때로 속성들은 복잡한 값들을 수용한다. 가령 몇가지 다른 값들을 포함하는 계산들

미디어 특질들은 오직 단일 값만을 수용한다(한가지 키워드, 하나의 숫자 등) .

만일 미디어 특질이 UA가 작동하는 장치에 존재하지 않는 개념을 표현한다면(가령, speech UA들은 'width'의 개념을

가지고 있지 않다), 그 미디어 특질은 항상 거짓false로 평가되어야만 한다.

<예제>

미디어 특질 'device-aspect-ratio'는 오직 시각적 장치에 적용된다. 'speech'장치에서 'device-aspect-ratio'를 포함하는

표현은 그러므로 항상 false일 것이다.

<link media="speech and (device-aspect-ratio: 16/9)" rel="stylesheet" href="example.css">

다음페이지에 계속

'css' 카테고리의 다른 글

[반응형 웹사이트] 유동적인 그리드, 이미지, 크기 조절이 가능한 글꼴 (0)	2015.04.06
IE6~8에서 미디어쿼리 지원하기 (respond.js vs css3-mediaqueries.js) (0)	2015.03.27
css로 반응형 메뉴 만들기. 상단에서 내려오는 드롭다운 메뉴. (2)	2015.03.16
[css3] transition 속성(transition-property/transition-duration/transition-timing-function/transition-delay ) (0)	2015.03.10
[CSS3] text-overflow 속성 (1)	2015.03.06