CSS3부터 미디어쿼리를 제공하는데, 반응형 웹의 최적화를 위해 나온 것으로 알고 있다.
반응형 웹은 HTML 코드의 변경없이 한가지 소스코드로 다양한 크기의 디바이스에서 지원하는 웹 사이트? 페이지를 말한다.
<style type="text/css">
@media(Criteria){
Selector or Tag {
/*
style
*/
}
}
</style>
Criteria, 조건에는 일반적으로 max-height, max-width, min-height, min-width 와 같은 화면의 크기에 대한 것들이 들어간다.
○ 활용 예시
@media(max-width:767px){
#footer {
display:none;
}
}
- width가 최대 767px일 때 까지만 해당 스타일을 적용한다.
@media(min-width:768px){
}
- width가 최소 768px일 때 부터 해당 스타일을 적용한다.
○ 적용 화면
- width가 767px이하 일 때는 footer가 보이지 않지만 768px부터는 footer가 보이기 시작한다.
W3C 미디어 쿼리 - http://www.w3.org/TR/css3-mediaqueries/
댓글