Media queries

media query는 오직 css만을 이용해서 스크린의 사이즈를 알 수 있는 방법이다.

media query는 css 조건을 추가할 수 잇는 방법이다.

media query 조건문 안에는 반드시 element에 css를 넣어 줘야 한다.

media query는 and를 써서 조건을 여러개 쓸 수 있다.

min-width, max-width, min-device-width, max-device-width, orientation(landscape & portrait감지)

 

예를 들어 width가 500보다 작으면이라고 지정한 규칙에 브라우저 및 장치 환경이 일치할 때 css를 적용할 수 있는 방법

media query는 반응형 웹디자인의 핵심. 뷰포트 크기에 따라 서로 다른 조판을 생성

사용자가 터치스크린을 사용하는지와 다른 사이트 환경에 대한 내용도 탐지할 수 있음

 

developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries

미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN

 

기본 구문 - 조건문

@media media-type and (media-feature-rule) { /* CSS rules go here */ }

 

지정할 수 있는 media type은

• all - 모든 장치
• print - 인쇄된 경우
• screen - 스크린 사이즈
• speech - 음성 합성장치

ex> screen

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

        div {

          background-color: tomato;

        }

      }

스크린의 너비가 600px이하가 되면 div요소의 배경화면의 색상을 바꿔준다.

 

@media screen and (max-width: 750px) and (min-width: 650px) {

        div {

          background-color: tomato;

        }

      }

여러 조건으로 실행 할 수있다. 750px보다 작고 650px보다 클때 색상 바꾸기.

 

mobile 기기에서 가로 세로 등등에도 적용 가능

 

@media screen and (orientation: landscape) {

        span {

          display: none;

        }

      }

가로모드가 되면 span태그의 display를 none이 되게 한다.

 

조건문은  and, not, only, ','(or) 등이 있다.