(생활코딩) CSS 미디어 쿼리

화면의 크기에 따라 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것을 반응형 웹, 반응형 디자인이라고 한다. 이 반응형 디자인을 우리가 순수한 웹을 통해서 CSS를 통해서 구현하는 핵심적인 개념인 미디어 쿼리(Media Query)라는 것에 대해 살펴보자.

 

화면의 크기에 따라서 어떤 HTML의 요소를 보였다, 안 보였다 하게 해보자.

 

화면의 크기 800픽셀보다 크냐 작으냐에 따라서 <div>태그를 보이게, 안 보이게 하려면 화면의 크기를 알아야 한다.

화면-오른쪽클릭-검사를 통해서 화면을 조정하면 우측상단에 화면의 크기를 볼 수 있다.

 

화면의 크기가 800px 이상일 때(screen width>800px), <div>의 태그를 display:none;으로 만들어 보자. 

 

화면의 크기가 800px보다 크다는 얘기는  화면의 크기가 최소한 800px이다 라는 것과 같다.

@media(min-width:800px) { }: 최소 800일 때 부터 안에 명령 실행

@media(max-width:800px) { }: 최대 800일 때 까지 안에 명령 실행

 

미디어 쿼리를 통해 여러가지 화면의 특성에 따라 어떠한 조건을 만족할 때만 CSS의 내용이 동작하도록 하는 것이 가능하다. 

 

여기서 나는 400px기준으로 반응하는 미디어쿼리를 작성해봤다.

 

400px까지 id grid인 부분의 display를 block으로, id grid의 ol태그의 오른쪽 테두리를 안보이게, h1태그의 아래쪽 테두리를 안보이게 작성을 했다.

 

확인했을 때, 400px이상일 때는 display가 grid상태에서 테두리들이 보인다.

 

400px이하일 때는 display가 block 상태에서 테두리가 보이지 않는다.