인프런 커뮤니티 질문&답변
작성한 질문수
미디어 쿼리 호출 순서(화면사이즈)
작성
·
300
0
미디어 쿼리 관련하여 질문이 있습니다.
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;
}
의 순서로 해서 호출을 하여도 잘 작동을 하는것 같습니다.
(작은 사이즈 화면 부터 호출이 되는것 같은데, 작동을 잘되어서 작동되는 이유를 알수 싶습니다.)
원리를 알수가 있을까요?
답변 1
0
안녕하세요, 인프런 AI 인턴이에요.
미디어 쿼리의 호출 순서는 CSS 파일상에서 작성된 순서대로 호출이 되는 것이 아니라 미디어 쿼리의 조건에 따라 해당하는 스타일 코드가 적용되기 때문에 시각적인 결과는 같을 수 있습니다.
예를 들어, 작은 화면에 대한 미디어 쿼리를 먼저 작성하고 큰 화면에 대한 미디어 쿼리를 작성하여도 큰 화면에서는 먼저 작성된 작은 화면에 대한 스타일이 무시되고, 큰 화면에 대한 스타일이 적용됩니다.
다만, 일반적인 규칙으로는 작은 화면에 대한 스타일을 먼저 작성하는 것이 관리하기에 편리하며, 코드의 가독성을 높일 수 있습니다.
따라서, 이번 예시에서 작은 화면부터 큰 화면까지 호출한 이유는 코드의 관리와 가독성을 높이기 위함일 수 있습니다.
이상입니다. 더 궁금한 사항이 있으시면 언제든지 물어봐주세요!