Javascript & JQuery & CSS

반응형 웹? 알면 쉽고 모르면 어려운 것. 알아도 노가다이긴 한 작업. 
    
이런 반응형 웹을 구현하는데 있어서 가장 중요한 CSS 속성이 있다. 바로 @media screen and (max-width:480px) and (min-width:320px)이다.

이것만 잘 활용하면 왠만한 형태의 반응형웹을 구현해낼 수 있다. 물론 기초가 어느정도 뒷받침 된다는 가정하에 그렇다는 이야기다.

예시로 드는 화면에는 반응형웹에 필요한 CSS속성의 기초 3가지가 모두 들어가 있다.

하지만 오늘 이 포스팅에서는 오로지 미디어쿼리만 소개한다.

@media로 시작되는 미디어 쿼리는

@media screen, 혹은 @media print 등으로 표현할 수 있고, @media all로도 표현할 수 있다.

제목에서 굳이 @media all이 아닌 @media screen만 반응형 웹에 소개한 이유는 어짜피 @media print는 반응형 웹과는 친하지 않은 속성이다. 

그러니 굳이 @media all로 선언했다가, 갑께서 프린트 출력도 해달라 하면, 골치 아파지니까 왠만하면 반응형 웹은 @media screen으로 해두는게 편하다.