article search result of '미디어 쿼리' : 3

  1. 2019.10.05 W3C 미디어 쿼리 level 4(Candidate Recommendation), 번역해 보다
  2. 2015.02.06 css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장)
  3. 2015.02.03 [css] 미디어 쿼리, @media query 이해하기 (8)

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에서 이렇게 작성 할 수 있다.

<link rel="stylesheet" type="text/css" media="screen" href="style.css">

<link rel="stylesheet" type="text/css" media="print" href="print.css">

 

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로 작성된 가장 단순한 예

 

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

 

이 예는 "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을 앞에 붙힘으로써, 거짓으로 평가하게 만든다. 거꾸로도 마찬가지.

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

 

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

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

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

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

 

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


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

 

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


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

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

 

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


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

 

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

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

 

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

 

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


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


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

 

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

 
주의 :


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

 

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

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

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

 

만일 있다면 불가피하게.

 

 

미디어 종류(Media Types)

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


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

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


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

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


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

 

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


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

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

all - 모든 장치에 알맞음 


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

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


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


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

 


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


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

 

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

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

 

tty 


tv 


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 2019. 10. 5. 01:17

댓글을 달아 주세요

css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장)

 

 

css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장)

 

미디어 쿼리를 이용하여 반응형 웹사이트 만들기를 해 보고 있어요.

 

 

미디어 쿼리, @media query 이해하기

 

반응형 웹사이트(소스) 만들기 연습

 

CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 떨어지게

 

이번 시간엔

 

1. 화면 480px 이하로 축소하면, 상단 메뉴바가 사라지고

2. 메뉴 아이콘이 새로 등장하며

3. 아이콘을 클릭했을 때 다시 메뉴가 등장하는 방법

 

을 배워 볼게요.

 

 

 A 화면

 

  B 화면

 

 C 화면

 

A화면 만들기

 

전체 html 소스

<div id="header">
<a href="#" id="menu">&#8634;</a>             /*메뉴 아이콘*/
<ul id="nav">                                            /*메뉴*/
<li><a href="#">Home</a> &#10072;</li>
<li><a href="#">Guest</a> &#10072;</li>
<li><a href="#">Notice</a></li>
</ul>
</div>

 

<div id="contents">본문</div>                   /*본문 영역*/ 
<div id="side">오른쪽 사이드바</div>         /*사이드바 영역*/ 
<div id="footer">footer</div>                      /*푸터 영역*/ 

 

 



그럼 하나씩 살펴보도록 하겠습니다~

 

메뉴 아이콘 만들기

 

<a href="#" id="menu">&#8634;</a>

위 코드에서 &#8634 와 &#10072은 특수 기호를 입력하는 html 코드입니다.

 

chracter entity라고 부르며, &#8634 으로 메뉴 아이콘을 만들고, &#8634 는 수직바 입니다.

(위 이미지에서 C화면 참조)

 

chracter entity를 더 보시려면 http://dev.w3.org/html5/html-author/charref 참조  

 

 

 

메뉴 만들기

 

이건 지난 시간에 배운 것과 다르지 않습니다. 1단 메뉴 만드는 기본 구성입니다.

 

<ul id="nav">                                           
<li><a href="#">Home</a> &#10072;</li>
<li><a href="#">Guest</a> &#10072;</li>
<li><a href="#">Notice</a></li>
</ul>


 

 

나머지는 지난 시간에 배운 것과 동일하며

 

한 가지 다른 점은, 메뉴를 감싸는 #header div가 새로 생겼습니다.

 

 

이제 css 작성법을 보도록 하겠습니다

 

css

#header, #footer, #side {background-color:#FFE08C;}        /*헤더,푸터,사이드 배경색 지정*/

#header{margin-bottom:10px;}                                         /*하단과의 여백 조절*/

a#menu{text-decoration:none;display:none;}                      /*링크 밑줄 없애기, 초기화면에서 아이콘 숨김*/

 

#nav { padding:0; margin:0; display:inline;}                      /*메뉴 여백 초기화, 메뉴바를 일렬로 늘어놓기*/
#nav li{display:inline;}                                         /*메뉴 목록을 일렬로 늘어놓기*/

 

#contents {min-height: 400px; width: 80%; background: #E4F7BA;float:left;}
#side {min-height: 400px;}
#footer {margin-top: 10px;}

 

초기 화면에서는 아이콘이 드러나지 않아야 하므로 숨김 상태로 해 놓습니다.

 

나머지 설명이 따로 없는 부분은 이전 강좌를 보시면 다 나옵니다~

 

 

 

B화면, C화면 만들기

 

css

@media screen and (max-width: 480px)
{

#nav{display:none;}
a#menu{display:inline;}
a#menu:hover + #nav{display:inline;}
 

#contents {width: auto; float: none; min-height: 200px;margin-bottom: 10px;}
#side {width: auto; min-height: 0;}
}

 

#nav {display:none;} 는 화면 축소 시 메뉴바를 감추는 것

 

a#menu(display:inline;} 는 메뉴 아이콘만 생성하는 것

 

a#menu:hover + #nav{display:inline;} 은 아이콘에 마우스 오버했을 때 메뉴를 드러나게 하기


 

마우스 오버가 아닌, 마우스 클릭 시 메뉴를 드러나게 하려면

 

:target 선택자를 사용할 수 있는데, 문제는 한 번 클릭을 하면, 화면을 확대하고 다시 축소 시에도

 

2번째 메뉴가 계속 드러나 있습니다.

 

이건 아마도 자바스크립트를 이용해 풀어야 하나 봐요. (자바스크립트 소스는 다음 시간에 알아 볼게요)

 

아무튼 :target 선택자 소스는 다음과 같습니다

 

#nav:target {display:inline;}

 

두 가지 다 다운 받아서 실행해 보세요

 

media query(icon).html 

media query(target).html

 

 

 

 

 

   

IE 문서 모드란(meta http-equiv="x-ua-compatible" content="IE=edge")

 

meta viewport (메타 뷰포트 태그) 사용법

 

웹사이트 운영자라면 알아야할 html, css 상식

 

지구별에
css 2015. 2. 6. 15:15

댓글을 달아 주세요

[css] 미디어 쿼리, @media query 이해하기

 

 

[css] 미디어 쿼리, @media query 이해하기

 

오늘은 반응형 웹에서 자주 사용하는 미디어 쿼리 문법을 배워 보겠습니다.

 

미디어 쿼리는 장치에 따라 각기 다른 레이아웃을 작성하거나,

 

다른 미디어 종류에 따라 다른 css 코드를 작성하는 등, 반응형 웹페이지를 작성할 때

 

유용한 구문입니다.

 

▶ @media 브라우저 지원

 

ie9+, chrome 21+, firefox 3.5+, safari 4.0+, opera 9+

 

 

미디어 쿼리 사용법

 

미디어 퀴어리 구문은 css에 내부에 삽입하는 방법과, 링크로 연결하는 방법이 있습니다.

 

css 내부에 삽입하기 

 

<style>
@media (max-width: 700px) {
  .container{
    margin:0px; padding: 0px;
  }
}
</style>

 

링크로 연결할 때


<link red="stylesheet" media="(max-width: 700px)" href="test.css" />

 

*test.css 파일 안에는 위 미디어쿼리 구문이 들어가야 합니다.

 

 

CSS란? (HTML과 CSS의 차이, CSS 작성법)

 

 

미디어 쿼리 문법

 

css에서

 

@media not|only media type and (media feature) {CSS-Code;}

 

 

링크로 연결할 때

 

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="test.css">

 

 

 

위 문법을 하나씩 살펴 볼게요.

 

우선 and나, not, only 등을 연산자라고 부르는데요.

연산자는 and, 쉼표, not, only가 있습니다.

 

 

▷ 연산자

 

and | not | only | ,

 

 

and 연산자 : 여러 미디어 특징들을 하나로 결합함 .

 

, (or)연산자: 쉼표로 분리된 각 목록은 각각 개별 미디어 쿼리임.

 

not 연산자 : 전체 미디어 쿼리를 부정하기 위해 사용 함.

 

only 연산자 : 미디어 쿼리를 지원하지 않는 브라우저가 주어진 스타일을 적용하는 것을 방지


* not이나 only를 사용하려면 미디어 타입을 규정해야 함.

* 미디어 쿼리는 대소문자 구별하지 않는다

 

사용 예.

 

가장 단순한 형태의 미디어 쿼리

 

@media (min-width: 700px) {background-color: yellow;}

 

위 구문에서 미디어 타입이 생략되어 있지만, 미디어 타입의 기본값은 all입니다.

 

따라서 다음 구문과 같은 말임

 

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

 

모든 유형의 장치이며 최소너비 700px 일 때 스타일을 적용하겠다는 의미

 

 

and 연산자의 사용

 

*새로운 미디어 특징들을 추가할 때마다 and 연산자를 사용합니다.

 

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

 

위 예는, 모든 유형의 장치이며 최소 너비 700px 이상이며, 방향이 세로 모드일 때만 적용한다는 뜻

 

 

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

 

프린트 장치이며, 최소 너비가 700px이상이며, 방향이 가로일 때 적용함.

 

 

 

쉼표 연산자의 사용

 

*쉼표는 각각 개별 미디어 쿼리로 인식합니다.

 

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

 

모든 장치에서 최소너비 700px이상일 때 적용하거나, 프린트 장치에서는 가로 방향일 때만 적용하겠다는 뜻.


 

not 연산자의 사용

 

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

 

not은 전체 미디어 쿼리를 수식합니다. 즉 not은 all and (color)를 포함하여 부정함.

 

 @media not (all and (color)) { ... } 와 같은 말


모든 색상 장치에서  이 스타일을 적용하지 않겠다는 뜻.

 

쉼표로 분리하여 사용할 때, 미디어 구문은 개별 미디어 쿼리로 인식하므로

 

not은 쉼표 이후에 영향을 미치지 않습니다.

 

@media not screen and (color), print and (color)는

 

따라서 위 예는, 모든 스크린 색상 장치에서 적용하지 않거나, 프린트 색상 장치에서 적용하겠다는 뜻

 

 

only 연산자 사용

 

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


*제가 only 키워드를 잘못 이해한 면이 있어서 내용을 수정하였습니다*


미디어 쿼리를 인식하지 못하는 브라우저(정확히는  legacy user agents)에서 미디어 쿼리를 숨기기 위해 사용함


only 키워드는 미디어 쿼리 결과에 아무런 영향을 미치지 않습니다. 


오래된 브라우저는 screen and (color)를 'screen'으로 번역 하게되어 남아있는 쿼리를 무시하게 됩니다. 


그리하여 모든 스크린에 스타일을 적용하게 되는데, 알려지지 않은 미디어 타입 only를 지정함으로써 무시하게 됩니다. 


screen 타입에 맞다고 하더라도 말입니다. (https://www.w3.org/TR/mediaqueries-4/)




▷ media type(미디어 종류)

 

all | print | speech| screen 

 

● all 기본값. 모든 미디어 장치에 사용 됨
● print 프린터에 사용
● screen 컴퓨터 스크린, 테블릿, 스마트폰 등
● speech 페이지를 읽어주는 화면 낭독기

 

미디어 종류 중 퇴화된 것.

aural ,braille, embossed, handheld, projection , tty, tv 

 

 

▷ media feature(미디어 특징)

 

width | height | min-width | min-height | max-width | max-height
device-width | device-height | min-device-width | min-device-height  | max-device-width | max-device-height
aspect-ratio (min- / max- 접두어 사용가능)
device-aspect-ratio (min- / max- 접두어 사용가능)
color (min- / max- 접두어 사용가능)
color-index (min- / max- 접두어 사용가능)
monochrome (min- / max- 접두어 사용가능)
resolution (min- / max- 접두어 사용가능)
scan | grid

 

 

● width  화면 영역 너비(브라우저 창 같은)


예 1: @media (min-width: 20em) {...}

 

* 모든 장치에서 최소 너비 20em 이상이면 적용

 
예2 : <link rel="stylesheet" media="screen and  (min-width: 500px) and (max-width: 800px)
    href="test.css" />


* 스크린 장치 최소 화면이 500px보다 크고 800px보다 작을 때  스타일 적용
 

 

● height  화면 영역 높이

 

  

● device-width 출력 장치의 너비.(컴퓨터 스크린 같은)

 

예 : <link rel="stylesheet" media="screen and (max-device-width: 450px)" />

 

* 장치 너비가 450px보다 작을 때 적용


● device-height 출력 장치의 높이

 

● aspect-ratio  화면 영역의 가로 세로 비.


기호 '/'을 사용하여, 앞에는 수평 픽셀 비율. 뒤에는 수직 픽셀 비율 (양수이며 정수)

 

예 : @media screen and (min-aspect-ratio: 1/1) { ... }

 

*가로 화면 비가 1:1 이상일 때 적용. 즉, 화면이 직사각이거나 세로일 때만 적용


● device-aspect-ratio  출력 장치의 가로세로 비.(첫번째 값이 수평픽셀 비, 두번째 값이수직 픽셀 비)

 

예: @media screen and (device-aspect-ratio: 16/9) { ... }

 

* 장치 가로 세로 비가 16:9일 때 적용.

 

● color 출력 장치의 색상 구성요소 당 비트 수 (장치가 색깔 장치가 아니면 값은 0)


예1 : @media all and (color) { ... }

 

* 모든 색상 장치에 적용.

 

예 2: @media all and (min-color: 4) { ... }


* 색상 구성요소당 최소 4비트를 지닌 장치에  적용


● color-index 장치가 표시할 수 있는 색상 수

 

예: <link rel="stylesheet" media="all and (min-color-index: 256)" href="test.css" />

 

* 최소 256 색상을 지닌 모든 장치에 적용

 

● grid 출력 장치가 그리드 장치 또는 비트맵 장치냐에 따라 결정.

 

장치가 그리드 기반이면  값은 1. 그렇지 않으면 0

 

● monochrome 흑백(회색톤)장치에 색상 당 비트  수.

 

장치가 흑백이 아니면, 값은 0

 

예: @media all and (monochrome) { ... }

 

* 모든 흑백장치에 적용

 

● orientation 화면이 가로 모드인지, 세로 모드인지 지정

 

예 : @media all and (orientation: portrait) { ... }

 

*오직 세로 방향에서만 적용.


● resolution 출력 장치의 해상도

 

해상도는 dpi (dots per inch)나, dpcm(dots per cintimeter)로 지정
 

예: @media screen and (min-resolution: 300dpi) { ... }

 

* 최소 300dpi 이상 해상도를 지닌 장치에 적용

 

● scan 텔레비전 출력 장치의 스캐닝 과정

값은  progressive | interlace

 

*tv값이 퇴화되었으므로 이 값도 사용하지 않을 것 같네요

 

[참조 사이트]

 

https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html 

 

▶간단한 예제

 

처음에는 A 화면이었다가, 컴퓨터, 스마트폰 등에서 480px이하로 화면이 축소되면 B 화면처럼 바뀌는

 

소스를 작성해 보세요~ 정답은 다음 시간에

 

 

A 화면

 

B 화면

 

 

min-width 속성, min-height 속성 사용법

 

max-width 속성, max-height 속성 알아보기

 

외부 문서를 연결하는 link 태그 사용법


meta viewport (메타 뷰포트 태그) 사용법


지구별에
css 2015. 2. 3. 15:37

댓글을 달아 주세요

  1. zxc1512 2015.02.05 13:37  수정/삭제  댓글쓰기

    조건문 비슷하네요 ㅇ_ㅇ

  2. 지나가다 2015.05.10 19:09  수정/삭제  댓글쓰기

    좋은 글 감사합니다. 정리가 깔끔하게 잘 되어있어 이해하는데 많은 도움되었어요.

  3. Walter Erzsa 2015.07.31 16:45  수정/삭제  댓글쓰기

    잘 보았습니다.
    CSS를 링크할 때 <link> 태그에서도 screen을 지정할 수 있군요.
    좋은 정보 알았습니다. ^^

    저는 CSS 미디어쿼리와 jQuery를 함께 사용하는 방법에 대한 글을 적어보았습니다. 트랙백 걸고 가겠습니다~

  4. Sun 2015.09.20 11:12  수정/삭제  댓글쓰기

    이곳에 있는 자료들이 너무 도움이 많이 됩니다. 감사해욤!

Powerd by Tistory, designed by criuce