반응형 웹 디자인(Responsive Web Design)

누군가 요즘 유행하는 기술이라면 웹 페이지를 하나 보여줬다. 웹 브라우저의 한 쪽 끝을 잡고 좌우로 잡아당기며 크기를 조정하니 사이트의 디자인이 이리저리 변경되었다.
와~하고 끝났다...뭔지 제대로 물어보지도 못했다....ㅠㅠ
헌데 인터넷을 이리저리 돌아다니다 '반응형 웹 디자인'이라는 용어를 보았다
감이 왔다...바로 검색~ㅋㅋ

CSS3의 미디어 쿼리

http://www.w3.org/TR/css3-mediaqueries/

미디어 쿼리란?

CSS 2.1 부터 추가되었던 미디어 타입(media type)은 단말기의 종류에 따라 각각 다른 스타일시트를 적용하게 하는 기능이나 미디어 타입 만으로는 해당 기기의 특성을 정확히 파악하여 알맞은 스타일을 적용시키기 어려웠다. 따라서 CSS3에서 미디어 타입을 개선하여, 더 구체적인 조건에서 필요한 스타일을 정확하게 적용할 수 있도록 확장하였는데, 이를 미디어 쿼리(media query)라고 한다.

• 미디어 쿼리는 IE8이하의 브라우저에서 지원되지 않으며 IE9, 사파리, 크롬, 오페라, 파이어폭스 최신 버전에서는 지원
  
• 미디어 쿼리를 이용해 해상도별로 다른 스타일을 적용하는 것은 주로 모바일 환경을 대응하기 위함

예제

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

첫번째 쿼리는 스크린 미디어 타입 중에서도 화면의 최대 너비가 980px 이하인 환경을,
두번째 미디어 쿼리는 스크린 미디어 타입 중에서도 화면의 최대 너비가 480px 이하인 환경을 의미

참고 사이트

• Responsive Design with CSS3 Media Queries

  미디어쿼리 사용법

• http://html.nhndesign.com/blog/47789
• http://html.nhndesign.com/
• http://html.nhndesign.com/blog/42284