Media Query
브라우저가 큰지 작은지 알아내는 방법을 배울 거임
-
왜? 큰 스크린을 위한 css 가 있고 작은 화면을 위한 css 가 있기 떄문이다.
: 작은화면>>>아이폰 같은 모바일 환경, 큰 화면>>> 데스크탑 환경 -
유저가 모바일 환경이라면, 원래 body 색을 초록이라 하면
@media screen and (min-width:320px) and (max-width:640px) {
{body{background-color:blue;}}
}-
우리가 보는 화면이 최소값 320, 최대값 640일 때 배경화면이 파란색이다.
-
저 값을 넘어가면 (창을 값이상으로 확대하게 되면) 원래 body 의 색인 초록으로 바뀔 것이다.
-
media scfreen 에 규칙을 작성하고 해당 화면에 이런 css 를 적용해 라고 명령하는 것이다.
-
우리는 반응형 웹 디자인을 할 거니까 media query 의 본문 안에 그 만든 규칙을 작성하면 되는 것이다.
.