Media Qurey란 ?

Responsive Web을 구현하는 CSS Technique

  • 특정조건(주로 화면크기)에는 어떤 CSS를 적용해라 라는 규칙을 줄 수 있음
@media only screen and (max-width: 480px) {
  body {
    font-size : 12px;
  }
}
  • Media Query 세부설명
    • @media : 미디어 쿼리를 시작하겠다
    • only screen : 어떤 디바이스에서 적용하는지 알려준다
    • and (max-width: 480px) : 어떤 media feature 라고 불리는 부분, 어느 조건에 아래의 css 를 적용할지 나타내줌
  • 다른 예
    @media only screen and (min-width: 320px) and (max-width: 480px) {
    /* ruleset for 320px - 480px */
    }
    • ' 미디어쿼리를 320px 과 480px 화면 크기 사이 값일 때 적용하겠다. ' 라는 의미 !
  • Media Query를 사용할 때는 스크린이 ~보다 작을 때의 경우는 max-width 를 , ~보다 클때의 경우는 min-width 를 사용하여 조건을 정해준다.
  • 보통은 미디어쿼리를 사용한다는 명령어를 사용한 후에 해당되는 selector에 적용 style을 적어준다.

SCSS 에서 Media Query를 조금 더 쉽게 사용할 수 있다!

  • SCSS는 CSS의 상위집합으로서 CSS와 동일한 문법으로 SASS의 특별한 기능들이 추가되어있음

  • Sass라고도 하며, Syntactically Awesome Style Sheets / CSS pre processor !

  • SCSS는 다양한 기능이 있음
    (변수활용 가능, nesting 가능, impoting 가능 등 !)

  • 자세한 설명은 다음에 포스팅 하는 걸로 !

  • SCSS 에서 Media Query의 활용

$Phone : "Only screen and (max-width : 768px) " ;
$desktop : "screen and (min-width : 769px)";

@import './mediaQuery.scss';
@media #{$phone} {
  .big-box {
    display: none;
  }
}

@media #{$desktop} {
  .big-box {
    dispaly: block;
  }
}
  • phone 과 desktop 이라는 변수에 해당 screen 조건 값을 담음
  • Media query를 import 해오고, 변수를 활용해서 big-box라는 클래스에 css 효과를 적용함 !
  • @media 를 쓰고 selector를 지정해서 스타일 효과를 적어주어도 되지만, scss 파일에 있는 각 태그에 @media 를 직접 적어줌으로써 각 태그마다 style 효과를 지정해도 됨 !
.LoginWrapper {
     position: absolute;
     forn-size: 13px;
     line-height: 18px;
     right: 12px;
     top: -1px;
     @media screen and (max-width: $break-mobile {
         display: none;
      }
    }
  • $break-mobile : 300px 로 이미 지정된 변수를 활용해서 클래스 style 효과 부분에 미디어쿼리를 직접 넣어줄 수도 있음!

  • 데스크탑을 제외하고, 모바일, 태블랫 크기로 지정한 크기에서 화면이 깨지지않고 잘 나오는 경우에 미디어쿼리가 잘 적용되었다고 본다고 한다! break-mobile, break-tablet 이런식으로 조건 값을 변수에 담아 많이 활용한다고 한다~

    참고: 레플릿 미디어쿼리 / 벨로퍼트님 블로그