[CSS] Media Query

haileyself·2019년 8월 29일
0

Media Qurey란 ?

Responsive Web을 구현하는 CSS Technique

  • '특정조건(주로 화면크기)에는 어떤 CSS를 적용해라 라'는 규칙을 줄 수 있음

Media Query 세부설명

  • @media : 미디어 쿼리를 시작하겠다
  • only (device종류) : 어떤 디바이스에서 적용하는지 알려준다
  • and (조건 max-width 혹은 min-width가 옴 ) : 어떤 media feature 라고 불리는 부분, 어느 조건에 아래의 css 를 적용할지 나타내줌
  • 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 가능 등 !)

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

profile
Keep on my way ! :)

0개의 댓글