media query란 Responsive Web 을 구현하는 CSS technique 입니다.
특정 조건에서는 어떤 CSS 를 적용하라는 규칙을 줄 수 있다.
CSS에 @media 라는 문법으로 작성하게 됩니다.
아래의 css는 480px보다 작은 화면에서 body 태그 내의 font 크기를 전부 12px로 바꾸는 것.
@media only screen and (max-width: 480px) {
body {
font-size: 12px;
}
}
이 키워드는 media 쿼리를 시작하겠다는 의미
어떤 디바이스에서 적용하는지 알려준다. 예를 들면 프린트를 하고싶을 때 적용하려면 only print라고 작성하면 된다. screen이라고 할 경우 어떤 디바이스에 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용
이건 media feature라고 불리는 부분입니다. 어느 조건에 아래의 css를 적용할지 작성해줘야 합니다.
@media only screen and (min-width: 320px) and (max-width: 480px) {
/* ruleset for 320px - 480px */
}
해석 : 320px - 480px 화면에 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;
}
}
CSS 공부할 때 미디어쿼리는 미흡하게 하고 넘어갔는데 친절하고 쉽게 알려주셔서 잘 이해되었네요 ㅎㅎ