CSS3 - 해상도에 대응하는 분기처리 방법

1. 개요

 

모바일 시대가 도래하면서 다양한 디바이스와 브라우저에 대응할 수 있는 기술이 필요했다. 이러한 트랜드에 맞춰 CSS3에는 미디어쿼리를 지워하고 있는데, 사용자가 웹페이지에 접속했을 때 해상도와 같은 장치 특성을 해석해서 하나의 HTML 페이지가 여러 패턴의 CSS뷰를 갖도록 만들어 준다. 이렇게 되면 모든 장치의 해상도를 일일이 파악할 필요가 없다. 즉 새로운 장치가 나올 때 마다 서버 측 개발자가 해야 했던 일들을 이제는 클라이언트 개발자가 할 수 있게 된 것이다.

 

 

2. 구현

 

// CSS 코드 안쪽에 아래와 같이 미디어쿼리 구문 처리

@media all and ( min-width:768px ) {

    /* 768px 이상 해상도에서 실행할 CSS 코드를 여기에 작성 */

}

@media all and ( min-width:768px ) and ( max-width:1024px ) {

    /* 768px 이상 1024px 이하 해상도에서 실행할 CSS 코드를 여기에 작성 */

}

@media all and ( min-width:1025px ) {

    /* 1025px 이상 해상도에서 실행할 CSS 코드를 여기에 작성 */

}

 

 

참고 : http://helloworld.naver.com/helloworld/81480#