반응형 웹 미디어쿼리 적용기

기존 어드민페이지에서는 데스크탑만을 위한 개발이 진행 되었다.
하지만 모바일에서도 사용할 수 있다는 요구가 있었기 때문에
이번 리뉴얼을 계기로 모바일화면을 지원 할 수 있도록 반응형 웹으로 개선 하기로 하였다.

반응형웹의 CSS는 두가지 개발방법이 있다.
1. 데스크탑화면을 기준으로 코드를 작성한뒤 분기를 추가하며 모바일화면을 개발
2. 모바일 화면을 우선적으로 개발한뒤 데스크탑분기를 추가하여 개발

MDN에 따르면 모바일 화면을 우선적으로 개발하는 방식이 선호되는 추세이며 최상의 접근법이라고 한다.

하지만 현재 프로젝트같은경우는 데스크탑 기준으로 코드가 작성되어있기때문에
모바일 화면을 우선적으로 개발 하는 방식으로는 개발 할 수 없을것같다....

1. mobile ,desktop mixin을 만든다.

$mobile: 600px;

@mixin desktop {
  @media (min-width: #{$mobile}) {
    @content;
  }
}

@mixin mobile {
  @media (max-width: #{$mobile}) {
    @content;
  }
}