[HTML/CSS] Media Queries

Media Queries는 오직 CSS만을 이용해서 스크린의 사이즈에 따라 설정을 변경할 수 있는 방법이다. 반응형 웹사이트를 만들 수 있고, 스마트폰이나 태블릿이 세로모드인지 가로모드인지(landscape / portrait)에 따라 설정을 바꿀 수도 있다. 먼저 media queries를 { }로 열고, 그 안에 원하는 CSS를 넣어주면 된다. 또 media query는 "and"를 써서 연결된다.

@media screen and (min-width: 601px) and (max-width: 1200px) {
	div {
    	background-color: wheat;
    }
}
@media screen and (orientation: landscape) {
	span {
    	display: none;
    }
}

첫번째 예시는 화면 사이즈가 601px 이상 1200px 이하인 경우 div의 색을 설정한 것이고, 두번째 예시는 가로모드인 경우 span이 나타나지 않게 하는 설정이다.

 

"min-width" 뿐만 아니라, "min-device-width"도 있는데 device-width는 오직 스마트폰에만 적용된다. @media screen이 아니라 @media print를 이용하면 브라우저 프린트 화면에서의 속성을 변경할 수 있다.