TIL_13_with Wecode 005 html & css

✨ Media Query
CSS에 @media라는 문법으로 작성하게 됩니다.
아래의 css는 480px보다 작은 화면에서 body 태그 내의 font 크기를 전부 12px로 바꾸는 것입니다.

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

• @media 이 키워드는 media 쿼리를 시작하겠다는 의미입니다.
• only screen 어떤 디바이스에서 적용하는지 알려줍니다. 예를 들면 프린트를 하고싶을 때 적용하려면 only print라고 작성하면 됩니다. 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;
	}
}

제대로 이해하지 못하고 넘어간 부분인데, 나중에 이 부분에 대해서 따로 진행한다고 해서 일단 적어두기만 해본다.