생활코딩 WEB2-12. 미디어 쿼리 소개

반응형 웹 (responsive web): 화면 크기에 따라 웹 페이지 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것

미디어 쿼리 : 반응형 웹 구현해 주는 CSS문법
스마트폰 쓰면 가로, 세로 화면 모드에 따라 ( 조건 만족 시 ) CSS내용이 동작하도록 하는 것이 가능

<div>
 Responsive
</div>

<style>
 border:10px solid green;
 font-size: 60px;
</style>

  ```
@media(min-width:800px){
    div{
        display:none;
    }
}
```

화면 크기가 800px보다 클 때 div태그 내용 사라짐

```
@media(max-width:800px){
    div{
        display:none;
    }
}
```

화면 크기가 800px보다 작을 때 div태그 내용 사라짐