미디어 쿼리

맨 먼저 미디어 쿼리.

보통 표준 브라우저는 css 에 @media (최소 너비값){바뀌어 지게될 속성}

을 넣는데 이거 띄어쓰기 잘 해야 한다.

예를들어

div 박스가 100x100 의 사이즈를 가지고 있고 빨간색의 박스가 있는데 브라우저의 너비가 1200px 이상일 경우의 css

div{

width:100px;

height:100px;

background-color:red;

}

만약에 이것이 브라우저의 크기를 줄였을때. 예를들어 900px 의 width를 브라우져가 가졌을땐

@media (min-width:900px){

width:50px;

height:50px;

background-color:blue;

}

라고 한번 입력해보자.

위 코드는 미디어 타입을 지정 안했기에 IE9 이상에서만 변화를 확인 할 수 있다.