[CSS] Chapter 13. 브라우저 크기마다 CSS가 바뀌는 Media Query

.box {
  width: 100%;
  height: 100px;
  border: 4px solid red;
}

@media screen and (max-width: 1260px) {
  .box {
    width: 90%;
    background-color: red;
  }
}

// 테블릿 화면
@media screen and (max-width: 768px) {
  .box {
    width: 80%;
    background-color: blue;
  }
}

// 모바일 브라우저
@media screen and (max-width: 576px) {
  .box {
    background-color: greend;
  }
}

media query는 css 맨 마지막에 사용된다.

왜 그러느냐? css는 맨 마지막에 있는 것들이 적용되기 때문에.