반응형에서 꼭 필요한 미디어쿼리

 

 

 

미디어쿼리

디바이스 규격이 다양화된 요즘에 빼놓을 수 없는 것이 반응형.

반응형 웹디자인을 하기위해서 꼭 알아두어야하는 미디어쿼리에 대해서 공부해보려고 합니다.

​

여기서 반응형 웹이란 디바이스 디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되어 출력되는 웹페이지로써 스마트한 웹페이지 구현이 가능합니다.

 

 

 

미디어쿼리 기본구조

아래처럼 미디어쿼리를 작성하면 가로 넓이가 200px에서 400px 일때만 screen의 텍스트 칼라가 레드로 나타나게됩니다.

@media 미디어유형 and 조건 and 조건

@media screen and (min-width:200px) and (max-width:400px) {
    div {color:red;}
}

 

​

 

하단 소스를 활용하면 화면 비율에 맞춰서 적용되는 미디어쿼리도 작성할 수 있습니다.

@media screen and (aspect-ratio:2/1){}
/*화면 비율이 2:1일때 실행*/

@media screen and (min-aspect-ratio:2/1){}
/*화면 비율이 2:1 이상일때 실행*/

@media screen and (max-aspect-ratio:2/1){}
/*화면 비율이 2:1 이하일때 실행*/