'Media query'

미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.

CSS Media Query는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 씨에스에스를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다.사용자는 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다.

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

간단한 media query 구문입니다.

1. 너비와 높이

반응형 디자인을(그리고 광범위한 브라우저 지원이 되도록) 만들기 위해 가장 자주 탐문하는 기능은 뷰포트 너비이며, min-width와 max-width, width 등의 미디어 기능을 활용하여 뷰포트가 특정 너비 이상 또는 이하인 경우 css를 적용할 수 있습니다.

@media screen and (width: 600px) {
body {
color: red;
}
}

width값이 정확히 600px인 화면에서 body의 글씨를 red로 지정할 수 있습니다. 600px 이상,이하의 상황에서는 적용되지 않는다.

width(및 height) 미디어 기능은 범위 지정에 사용될 수 있다. 따라서 min- or max- 접두사를 붙이게 되면 최소값인지 최대값인지 표시할 수 있다.

@media screen and (max-width: 400px) {
body {
color: blue;
}
}

예를 들어 뷰포트가 400 픽셀보다 좁은 경우 색깔을 파란색으로 만들기 위해 max-width:를 사용할 수 있다.

실제로 최소값 또는 최대값을 사용하는 것이 반응형 디자인인 경우에 훨씬 유용하므로 width 또는 height 값을 사용하는 경우는 드뭅니다.