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