미디어쿼리

미디어쿼리 (@media) : 단말기의 유형 , 특성이나 수치에 따라 웹사이트나 앱의 스타일을 수정할 수 있다. 반응형 웹을 만들 때 사용됨.

 

연산자	속성
and	여러 특징을 하나로 결합함
, (=or)	각각의 개별 미디어쿼리에 속성 부여
not	전체 미디어쿼리를 부정하기위해 사용됨
only	미디어쿼리를 지원하지 않는 브라우저가 주어진 스타일을 적용하는것을 방지

 

 

미디어쿼리의 사용 예시

 

  -  @media (min-width:900px) {background-color : yellow;}

       : 최소넓이가 900px 이하일 때 background-color : yellow 를 적용하겠다.

 

• and 연산자

  @media (min-width:700px) and (max-width:900px){ ul { width:50%; } }

       : 최대넓이가 900px 이며 최소넓이가 700px 일 때 ul의 넓이값을 50%로 적용

 

• not 연산자

  @media not all and (color) {....}

       : 모든 색상장치에서 이 색상을 사용하지 않겠다.