media query는 media type
이랑 media feature expression
으로 구성됨. 주로 반응형 웹을 만들기 위해 쓰이는 듯.
이 두개가 모두 True
인 경우 media query는 True로 판별되고 그 안 내용이 적용됨.
all
: 모든 디바이스에 적용 가능. default typeprint
: print preview 모드에서 보여질 때 적용됨.screen
: 그냥 화면인 경우 적용speech
: speech synthesizers(음성 합성 장치)인 경우 적용media features(미디어 특성)은 주로 user agent의 특정 characteristic들, output 디바이스, 또는 environment을 나타낸다.
EX) 어떤 스타일을 와이드스크린 모니터에만, 마우스를 사용하는 컴퓨터에만, 저광도 환경에서 사용 중인 장치에만 적용할 수 있음.
아래 5가지 media features는 반응형 웹 css에서 주로 사용한다는 features이다.
width, height
: viewport의 width와 height(scrollbar 너비/높이 포함)color
orientation
@media screen and (max-width: 770px) {
body {
background-color: lightgreen;
}
}
여기서 screen
은 type에 해당, 생략하면 all
이 기본값이 되어 모든 미디어 타입에 적용됨.
max-width: 770px 이면 770px 이하의 너비를 가진 화면일 경우 적용된다는 의미임.
즉, (max-width: yyypx)일 때 yyy보다 작은 너비를 가진 화면일 경우에만 {..}이 적용됨.
/*
*모바일을 우선할 경우*
*/
/* 모바일에 적용될 스타일 코드*/
@media screen and (min-width: 769px){
/* 데스크탑에 적용될 스타일 코드 */
}
/*
*데스크탑을 우선할 경우*
*/
/* 데스크탑에 적용될 스타일 코드 */
@media screen and (max-width: 770px) {
/* 모바일에 적용될 스타일 코드 */
}