미디어 쿼리(반응형)

미디어쿼리(반응형)

• 미디어 쿼리는 장치에 따라 각기 다른 레이아웃을 작성하거나, 다른 미디어 종류에 따라 다른 css코드를 작성하는 등, 반응형 웹페이지를 작성할 때 유용한 구문입니다.
• 표현식은 width, height, color와 같은 미디어 특성(media feature)들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있습니다.
• 미디어 쿼리는 CSS3에 포함되어 있으며, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일 시트를 달리하여 적절한 모양을 보여줄 수 있습니다.
• 미디어 쿼리는 거의 모든 최신 브라우저에서 잘 동작합니다. 인터넷 익스플로러는 9버전 부터 지원합니다.
• 미디어쿼리는 대소문자를 구별하지 않습니다.

미디어쿼리 사용방법

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

css 내부에 삽입하는 방법	링크로 연결하는 방법
<style> @media (max-width:700px;){ .container{margin:0px; padding:0px;} }	<link rel="stylesheet" media="(max-width:700px)" href="test.css"/>

• 링크로 연결할 경우 test.css 파일 안에는 위 미디어 쿼리 구문이 들어가야 합니다.

미디어쿼리 문법

미디어쿼리는 @media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정해 줍니다. 미디어쿼리의 기본적인 구문은 다음과 같습니다.

@media only all and (조건문) {실행문}

• @media는 미디어쿼리가 시작됨을 선언합니다.


• only키워드는 미디어 쿼리를 지원하는 사용자 에이전트만 미디어쿼리 구문을 해석하라는 명령이며 생략 가능합니다. 생략했을 때 기본 값은 only로 처리됩니다. 생략해도 무방하므로 이 키워드는 일반적으로 작성하지 않습니다. 이 자리에는 not 키워드를 사용할 수 있는데 뒤에 오는 모든 조건을 부정하는 연산을 합니다.


• all키워드는 미디어쿼리는 해석해야 할 대상 미디어를 선언한 것입니다. all이면 모든 미디어가 이 구문을 해석해야 합니다. all 대신 screen 또는 print와 같은 특정 미디어를 구체적으로 언급할 수도 있습니다. all 키워드는 생략 가능하고 생략했을 대 기본값은 all 으로 처리됩니다. 이 밖에도 다양한 미디어 타입(all, aural, braille, embossed, handheld, print, projection, screen, speech, tty, tv)이 있지만 all, screen, print를 가장 널리 씁니다.


• and키워드는 논리적으로 'and'연산을 수행하여 앞과 뒤의 조건을 모두 만족해야 한다는 것을 의미합니다. 조건이 유일하거나 또는 only, all과 같은 선행 키워드가 생략되면 and 키워드는 사용하지 말아야합니다. and 대신 콤마 , 기호를 사용하면 'or' 연산을 수행합니다. 'or'연산은 나열된 조건중에서 하나만 참이어도 {실행문}을 해석합니다.


• (조건문): 브라우저는 조건문이 참일때 {실행문}을 처리하고 거짓일 때 무시합니다. 조건문은 두가지 이상 등장할 수 있으며 둘 이상의 조건문은 and 키워드 또는 콤마, 기호로 연결해야 합니다.


• {실행문}: 일반적인 css코드를 이 안에 작성합니다. 브라우저는 조건문이 참일때 실행문 안쪽에 있는 css코드를 해석합니다.

미디어쿼리 연산자

• and 연산자 : 여러 미디어 특징들을 하나로 결합함.
• ,(or) 연산자 : 쉼표로 분리된 각 목록은 각각 개별 미디어 쿼리임.
• not 연산자 : 전체 미디어 쿼리를 부정하기 위해 사용 함.
• only 연산자 : 미디어 쿼리를 지원하지 않는 브라우저가 주어진 스타일을 적용하는 것을 방지

※ not이나 only를 사용하려면 미디어 타입을 규정해야 합니다.