@media 반응형

react color 플젝 하다가 알아낸 사실이다.

(min-width ##px)은 최소 ##px 이상이면 발동한다는 뜻.(여기부터)

(max-width ##px)은 최대 ##px 까지는 유효하다는 뜻.(여기까지)

그리고 css 코드도 JS와 마찬가지로 위의 코드는 아래코드에 덮어씌여진다.

따라서 max-width일 경우 큰것부터 작은것 순으로 적어야 창 사이즈 크기에 따라 순차적으로 적용이 된다.

만약, max-width일 경우에 작은것을 먼저적은면 창의 크기를 늘려도 작은사이즈가 계속 적용될 수 밖에 없다.(min-width일 경우엔 반대겠지?)

@media (max-width: 1199.98px) {
  .go-back-box {
    width: 25%;
    height: 45%;
  }
}

@media (max-width: 991.98px) {
  .go-back-box {
    width: 50%;
    height: 35%;
  }
}


@media (max-width: 575.98px) {
  .go-back-box {
    width: 100%;
    height: 20%;
  }
}

요런식으로 적어야 창을 늘렸을 때, go-back-box가 창에 비례해서 커지고 작아진다.