[css] 미디어 쿼리, @media, 조건문?

화면에 크기에 따라서 디자인을 다르게 하는 것을 미디어 쿼리라고 한다.

화면의 크기가 800px 보다 크냐 작으냐에 따라서 div 태그를 보이게 안보이게 하고 싶다고하면

우선 화면의 크기가 얼마인지 알아야 한다.

개발자도구에 들어가서 검사를 해보면 화면의 크기가 표시가 된다.

사용법은 아래와 같다.

@media(min-width:800px){ 최소 화면이 800px 보다 크다면 display를 보이게하지마라(none)

div{

display:none;

}

}

@media(max-width:800px){ 최대 화면이 800px 보다 크다면 display를 보이게하지마라(none)

div{

display:none;

}

}

여러 개의 화면이 존재하는 세상에서 미디어쿼리는 가장 중요한 역할을 한다.

  @media(max-width:800px){

      #grid{

        display: block;

      }

      ol {

        border-right:none;

      }

      h1 {

        border-bottom:none;

      }

    }

위의 코드를 살펴보면 자바의 조건문이라고 생각하면 쉽다.

화면의 최대 크기가 800px 이 되면

#grid{} 의 디스플레이를 block 형태로 변경해라

ol{} 의 border-right 옵션을 none 으로 변경하라

h1 {} 의 border-bottom 옵션을 none 으로 변경하라.