-CSS- 미디어 쿼리

미디어 쿼리 (반응형 디자인-Responsive Web)은 브라우저 창의 크기/ 디스플레이 환경에 반응해 웹페이지의 출력을 다르게 할 수 있는 기능이다.

<style>

...

@media(min-width:800px){

div{display:none;

}

}

</style>

@media(조건){실행}으로 생각하면 된다.

소괄호의 조건에 맞는 경우(width가 800px보다 클경우) 참을 반환하고 중괄호 안의 내용을 실행한다.

not, and, only 같은 논리연산자도 사용 가능하다.

 

ex)

@media(조건1)and(조건2)

not의 경우에는 해당 미디어쿼리 전체에 대한 반대를 반환하므로

@media not (조건1)and(조건2)일 경우 우선순위는

@media not((조건1)and(조건2)) 이다.