[CSS]WeCode-3

Responsive Web 이란

• 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하는 웹 사이트.

• Media Query
  responsive Web 을 구현하는 CSS technique
  특정 조건에서 어떤 CSS를 적용하라는 규칙 적용

@media - 쿼리 시작
only screen - 어떤 디바이스에 적용할지 알려줌.
and (max-width : 480px) - media feature , 어느 조건에서 아래의 CSS를 적용할지 작성.

mediaQuery.scss
$phone: "only screen and (max-width: 768px)";
$desktop: "screen and (min-width: 769px)";

box.scss
@import './mediaQuery.scss';

@media #{$phone} {
  .big-box {
    display: none;
  }
}


@media #{$desktop} {
  .big-box {
    display: block;
  }
}