CSS 미디어쿼리 (media Query) 실습 예제

<반응형 웹>

화면에 크기에 따라 웹페이지 요소들이 최적화된 크기로 바뀌게 하는 것.

 

>> 핵심 : 미디어 쿼리

 

 

 

** 화면이 600px보다 커질때 글자가 없어지게끔 하려면 다음과 같이 mediaquery를 사용하면 된다.

 

스크린 너비 > 600px 이라는 것은, 최소폭이 600px이라는 것 이므로, min-width=600px이 된다.

 

 

조건	screen width > 600px = @media(min-width:600px)

적용할 선택자, 속성

div{         display:none;       }

 

 

<style>
  @media(min-width:600px){
        div{
          display:none;
          }
        }
</style>

 

 

 

= 600px이 넘어가면 display:none으로 인해 사라지는 것을 알 수 있다!

 

 

  +) 반대로, max-width를 사용하면, 폭이 600보다 작아지면 사라지게 된다.

mediaquery.html

0.00MB