미디어 쿼리 소개

화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것

그것을 반응형 웹 또는 반응형 디자인, 영어로는 Responsive Web이라고 합니다.

다양한 환경에서 적응할 수 있는 기술들을 발전시킨 끝에 오늘날 최신 흐름까지 나타나게 된 것입니다.

 

이 반응형 디자인을 우리가 순수한 CSS를 통해서 구현하는 핵심적인 기능인 미디어 쿼리에 대해 알아보겠습니다.

새로운 파일을 하나 만듭시다

그리고 화면의 크기에 따라서 어떤 HTML의 요소를 보였다 안보였다 해보겠습니다.

그걸 구현하기 위해서 아무런 의미 없는 div 태그 하나와 내용을 추가하겠습니다.

그리고 이 웹페이지에 있는 모든 div가 눈에 더 잘보이게 하기 위해서 style도 추가를 해주겠습니다.

이 웹페이지에 있는 Responsive가 화면의 크기에 따라서 보이게도 하고 안보이게도 하면

우리는 화면의 크기에 따라 디자인을 다르게 했다라고도 할 수가 있습니다.

이때 필요한 것이 바로 미디어 쿼리라는 것입니다.

이 내용은 어려운 것이라 단계적으로 진행을 해보겠습니다.

이 Responsive를 800픽셀보다 크냐 작으냐에 따라서 보이게 하고 싶고 안보이게 하고 싶다면

일단 화면의 크기가 현재 어느정도인지 검사를 통해서 알아봅시다.

이런식으로 화면 오른쪽 위에 보이게 될 것입니다.

그 다음으로는 조건을 걸어보면 됩니다.

화면의 크기가 최소 800픽셀보다 크다면 이 Responsive가 안보이게 해달라 라고 짠 것입니다.

웹페이지에 들어가서 화면을 조절해보시면 안보이는 것을 확인하실 수 있습니다.

min을 max로 바꾸면 무슨의미일까요? 스크린의 크기가 800px보다 작다는 의미입니다.

즉 이 미디어 쿼리라는 것을 활용하면 화면의 크기, 화면의 특성들에 따라서

어떠한 조건을 만족할 때만 CSS의 내용이 동작하도록 하는 것이 가능합니다.

바로 이것을 미디어 쿼리라고 부릅니다.