CSS) 미디어 쿼리

미디어 쿼리는 반응형 웹사이트를 구현하는 기능이다. 화면이 커지거나 작아짐에 따라서 사용자의 화면에 보이는 것이 달라지게 할 수 있는 기능이다.

 

이렇게 보이던 페이지가

 

이렇게 나타날 수 있다.

 

-코드

@media(max-width:600px){
  #grid{
    display: block;
    grid-template-columns: 200px 1fr;
  }
  ol{
    border-right:none;
  }
  h1{
    border-bottom: none;
  }
}

@media()라는 것을 이용하여 기능을 구현할 수 있다. max-width:600px라는 것은 가로 길이가 600px 미만일 때 아래 코드를 적용하라는 것이다. 아래 코드에서는 줄을 없어지게 하는 명령어를 통해 반응형 사이트를 구현했다.