CSS - 10 [media query]

media query

- 웹브라우저는 다양한 화면에서 실행될 수 있다. 휴대폰, 태블릿, 대화면 tv, 모니터등

다양한 화면에 맞춰 css는 화면 비율을 맞추고 바꾸고 화면을 감지 할 수 있다.

- 화면을 감지하여 해당하는 화면비율로 웹브라우저를 맞춰주는 것이 media query이다.

 

@media screen and (max-width: 400px){

        

      }

 

위구문 전체가 의미하는것은

'이 스크린이 400px보다 작으면 아래를 실행 하라'

 

물론

@media screen and (max-width: 400px) and (max-width: 650px) ... {

        

      }

와 같이 다양한 조건을 넣을 수도 있다.

 

스크린의 크기를 줄였더니 적용이된다.

 

또한 웹브라우저로 다양한 타입의 화면으로 브라우저를 봤을 때 어떤형태인지 알수 있다.

검사 페이지에 들어가서 오른쪽 상단의 메뉴에 휴대폰 모양의 아이콘을 클릭하면 

다양한 형태로 화면을 볼수 있다.

 

@media screen and (max-width: 400px) and (orientation: landscape){

        

      }

: 최대 픽셀이 400px를 넘고 가로모드인 경우

- 물론 orientation: portrait 으로 세로모드도 가능하지만 default가 portrait 이므로 잘 쓰지는 않는다.

 

* tag{

    display: none
}

: 해당 태그를 화면에서 보이지 않게 해준다.

 

 

이러한 사용자의 반응에 따라 애니메이션 효과나 반응을 주는 것을

반응형 웹사이트

라고 한다.

 

developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries

이외의 다양한 쿼리들은 위사이트에서 찾아 볼수 있다.