반응형 웹을 위한 미디어 쿼리 사용법(CSS media queries)

미디어 쿼리는 화면(screen), 티비(tv), 프린터(print)와 같은 미디어 타입(media type)과 적어도 하나 이상의 표현식(expression)으로 구성됩니다. 표현식은 width, height, color와 같은 미디어 특성(media feature)들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있습니다. 미디어 쿼리는 CSS3에 포함되어 있으며, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일 시트를 달리하여 적절한 모양을 보여줄 수 있습니다.

 

미디어 쿼리는 두 가지 방법으로 사용할 수 있습니다.

 

첫 번째는 <link> 요소에 사용하여 특성이 조건에 맞을때 css 파일을 불러옵니다. media속성의 "screen and (max-width: 768px)"의 의미는 미디어 타입이 스크린이고, 화면의 최대 너비가 768px로 지정하는 것입니다. 그러므로 화면의 너비 768px 이하 일때가 적용이 됩니다.

 

<link rel="stylesheet" media="screen and (max-width: 768px)" href="mystyle.css" />

 

두 번째는 스타일 시트내에서 @media 를 사용합니다. 결과는 위와 동일한 조건이고, 그 조건이 맞으면 {...}  안의 스타일이 적용됩니다.

 

@media screen and (max-width: 768px) {
	body {
		background-color: lightgreen;
	}
}

 

@media (max-width: 768px) {...} 처럼 미디어 타입을 생략하면 all 이 기본값이 되어 모든 미디어 타입에 적용이 됩니다.

 

미디어 타입에 사용되는 값을 여러종류가 있지만 웹 사이트를 만드는데는 screen을 사용하거나 all 을 사용하는것이 일반적입니다.

 

미디어 특성에서 max-width 와 min-width 가 가장 일반적으로 쓰입니다. 그외 height, color, orientation(화면의  가로 세로 방향) 등이 있습니다.

 

반응형 웹을 만들때 스타일을 작성하는 기준으로 모바일을 우선할것인지, 데스크탑을 우선할 것인지가 먼저 고려되어지는 편입니다.

 

모바일을 우선할 경우 다음과 같은 순서로 작성이 됩니다.

 

/* 모바일에 적용될 스타일을 먼저 작성합니다. */

@media screen and (min-width: 769px) {
	/* 데스크탑에서 사용될 스타일을 여기에 작성합니다. */
}

 

데스크탑을 우선할 경우에는 다음과 같은 순서로 작성이 됩니다.

 

/* 데스크탑에서 사용될 스타일을 먼저 작성합니다. */

@media screen and (max-width: 768px) {
	/* 모바일에 사용될 스트일 시트를 여기에 작성합니다. */
}

 

미디어 쿼리는 거의 모든 최신 브라우저에서 잘 동작합니다. 인터넷 익스플로러는 9버전 부터 지원합니다. 만약 자신이 제작하는 반응형 웹이 IE8 이하에서도 동작을 하여야 한다면 polyfill 을 사용하여야 합니다.

 

※ 참고 : Polyfill은 웹 개발에서 오래된 브라우저가 지원하지 않는 특성을 지원하게 해주는 기술을 뜻합니다.

 

 

 

 

 

다음은 두 가지는 IE8 이하에서 미디어 쿼리를 사용하게 해주는 polyfill 입니다. 이 라이브러들은 미디어 쿼리를 100% 지원해주지는 못합니다. 제한 사항을 잘 확인해야할 것입니다.

 

* respond.js는 IE 6~8 버전에서 미디어쿼리를 해석할 수 있도록 만들어주는 자바스크립트 라이브러리입니다. 다음 사이트에서 다운 받을 수 있습니다(https://github.com/scottjehl/Respond/). MIT 라이센스로 배포됩니다.

 

 

 

미디어 쿼리를 불러오기 위해서 @import와 <style> 요소는 사용할 수 없습니다. <link> 요소의 media속성을 사용하던가 <link> 요소로 불러오는 스타일 시트 내에 미디어 쿼리를 기술하면 됩니다.

 

사용해본 결과 안정적으로 동작을 하는것 같습니다. 브라우저의 크기를 줄이거나 늘릴경우 반응도 빠른편 입니다.

 

- 테스트 용 스타일 시트 입니다.(mystyle.css)

 

@media screen and (max-width: 768px) {
	body {
		background-color: lightgreen;
	}
}

 

- 스타일을 부르는 부분과 respond.min.js 파일을 포함하는 부분입니다. 이부분에서는 IE 조건부 주석을 사용하였습니다. 이것은 IE 에서는 의미가 있고 다른 브라우저에서는 주석으로 처리됩니다. [if lte IE 8]의 의미는 IE 8 보다 작거나 같은 버전에서 실행된다는 뜻입니다.

 

<link rel="stylesheet" type="text/css" href="./mystyle.css" />
<!--[if lte IE 8]>
<script type="text/javascript" src="./respond.min.js"></script>
<![endif]-->

 

* css3-mediaqueries.js는 IE6-9 까지 지원한다고 문서에 나와있습니다. 이것도 MIT 라이센스로 배포됩니다. 다음 URL에서 다운 받을 수 있습니다(https://github.com/weblinc/media-match).

 

미디어 쿼리를 불러오기 위해서 @import와 <style> 요소, 그리고 <link> 요소의 media속성을 사용할 수 없습니다. <link> 요소로 불러오는 스타일 시트 내에 미디어 쿼리를 기술하여야 합니다.

 

이 라이브러리는 자세히 테스트 해보지는 못했는데, 브라우저에서 창의 크기를 드래그해서 리사이즈 할때 반응이 상당히 늦었습니다.

 

반응형 웹을 제작하는 경우 IE8 이하 버전의 인터넷 익스플로러의 지원은 CSS 의 문제 뿐만 아니라, 자바스크립트 및 페이지가 렌더링되는 모양도 문제를 많이 일으킵니다. 반응형이든 아니든 IE8 이하의 인터넷 익스플로러는 더이상 사용하지 않는것이 제작자나 사용자 모두에게 이득일것 같습니다.

 

※ 테스트 소스

css3.zip

다운로드

반응형 웹에서의 자바스크립트를 반응형으로 사용하기

반응형 웹을 위한 미디어 쿼리 사용법(CSS media queries)

반응형 웹 - 뷰포트(viewport) 사용법