/* 미디어 쿼리 사용 방법 */

/* 가로 폭이 최대 1000px, 즉 1000px 이하일 때 적용되는 코드 */

@media screen (max-width:1000px) {
     /* CSS 코드*/

}

/* 가로 폭이 최대 1000px, 즉 1000px 이상일 때 적용되는 코드 */

@media screen (min-width:1000px) {
     /* CSS 코드*/

}

반응형 웹 디자인을 위해 필수적으로 쓰이는 CSS 미디어쿼리 사용법이다. 요즘 반응형 웹 디자인을 할 때, 작은 것에서부터 큰 것으로 즉, 모바일 크기에서 웹의 크기로 디자인 하는 mobile first design을 많이 사용한다는 얘길 들은 적이 있다. 코딩스타일과 상황에 따라 다르겠지만, 나는 mobile first design을 더 선호하기 때문에 min-width를 이용한 미디어 쿼리를 더 많이 사용할 것 같다. 

/* 키프레임 사용 방법 */