12. 미디어 쿼리 소개

 

현대적인 웹 어플리케이션을 만들때 굉장히 중요한 요소라 할 수 있는 반응형 디자인의 흐름을 알아봅시다.

화면크기에 따라 웹 페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌는 것을 반응형 웹 또는 반응형 웹디자인, 영어로는 'responsive web' 이라고 합니다.

 

이젠 반응형 디자인을 순수한 웹 기술인 css를 통해 구현하는 핵심적인 개념인 미디어 쿼리에 대해 살펴보려고 합니다.

 

예시로 만든 'Responsive'의 크기를 알아보고자 개발자 도구를 들어가서 확인한다 !

 

화면의 800px보다 크면 화면이 안보이게 만들어볼 예정이다.

800px보다 작아지면 박스가 사라지는 모습

 

mim은 최소값, max는 최대값을 의미하는데 min 대신 max를 넣으면 screen width< 800px라는 의미가 됩니다. 즉 , 미디어 쿼리를 활용하면 화면크기에 따라 , 스마트폰의 가로 /세로모드에 따라 , 또 여러가지 화면의 특성에 따라 특정 조건을 만족할때만 미디어 쿼리의 코드를 동작 시키는 것이 가능하다 !