미디어 쿼리 호출 순서(화면사이즈)

Question

미디어 쿼리 관련하여 질문이 있습니다. SCSS 에서 미디어 쿼리 작성시 화면 사이즈가 큰것 부터 작성해야 한다고 전 강의에서 이야기 하셨는데 이번 강의에서는 index.scss 에서 호출시 @include mq('phone'){ border: none; } @include mq('tablet-land'){ border: 2px solid $border-color; } @include mq('desktop-big'){ border: 10px solid $border-color; }   의 순서로 해서 호출을 하여도 잘 작동을 하는것 같습니다. (작은 사이즈 화면 부터 호출이 되는것 같은데, 작동을 잘되어서 작동되는 이유를 알수 싶습니다.) 원리를 알수가 있을까요?

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴이에요. 미디어 쿼리의 호출 순서는 CSS 파일상에서 작성된 순서대로 호출이 되는 것이 아니라 미디어 쿼리의 조건에 따라 해당하는 스타일 코드가 적용되기 때문에 시각적인 결과는 같을 수 있습니다. 예를 들어, 작은 화면에 대한 미디어 쿼리를 먼저 작성하고 큰 화면에 대한 미디어 쿼리를 작성하여도 큰 화면에서는 먼저 작성된 작은 화면에 대한 스타일이 무시되고, 큰 화면에 대한 스타일이 적용됩니다. 다만, 일반적인 규칙으로는 작은 화면에 대한 스타일을 먼저 작성하는 것이 관리하기에 편리하며, 코드의 가독성을 높일 수 있습니다. 따라서, 이번 예시에서 작은 화면부터 큰 화면까지 호출한 이유는 코드의 관리와 가독성을 높이기 위함일 수 있습니다. 이상입니다. 더 궁금한 사항이 있으시면 언제든지 물어봐주세요!