CSS - 19. Media query

1. Media Query

media query란 responsive Web을 구현하는 CSS technique이다. 특정 조건에서는 어떤 CSS를 적용하라는 규칙을 줄 수 있다.

css에 @media라는 문법으로 작성하게 된다.

@media only screen and (max-width: 480px) {  
  body {  
    font-size: 12px;  
  } 
}

위 코드는 480px보다 작은 화면에서 body 태그 내의 font 크기를 전부 12px로 바꾸는 것이다.

위 코드를 해석해보자면,

1. @media - 이 키워드는 media 쿼리를 시작하겠다는 의미이다.

2. only screen - 어떤 디바이스에서 적용하는지 알려준다. 예를 들면 프린트를 하고 싶을 때 적용하려면 only print라고 작성하면 된다. screen이라고 할 경우 어떤 디바이스에 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용된다.

3. 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;
  }
}