웹을 하다보면 웹브라우저 크기를 다르게 했을때 css 가 깨진다거나 ,
아무런 변화가 없을때가 있다.

하지만 사용자들은 웹페이지를 다양한 크기의 여러기기에서 이용하기 때문에
크기가 고정되어있지 않고
반응형으로 만들어야 한다.

미디어 쿼리의 사용

참고자료
https://velog.io/@ejchaid/%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-media-query

https://ko.learnlayout.com/media-queries.html

@media only screen

미디어 쿼리를 시작하겠다 라는 의미가 됩니다.

범위: (min-width:300px) and (max-width:600px)

최소너비 300px에서 최대너비 600px 사이의 범위에서 아래에 적힌 css 를 적용하겠다는 뜻

SCSS + 미디어 쿼리

$phone : "Only screen and (max-width : 480px) " ;
$desktop : "screen and (min-width : 481px)";

@import './mediaQuery.scss';
@media #{$phone} {
  .hello {
    background: pink;
  }
}

@media #{$desktop} {
  .big-box {
    background: green;
  }
}

변수활용 , nesting , import 가 가능한 SCSS 의 장점을 활용할 경우 미디어 쿼리의 활용도를 더욱 높일 수 있다 .
변수로 한번 지정해 준 후 import 해서 필요한 곳에서 가져오면 좀 더 편하게 사용할 수 있다 .