CSS 캐스케이드(Cascade)는 충돌하는 스타일 선언 중 최종 적용값을 어떻게 결정하나요?

이렇게 답해 보세요 (핵심 답변)

CSS 캐스케이드는 한 요소의 동일한 속성에 여러 스타일 규칙이 동시에 걸릴 때 우선순위를 가려 최종 선언 하나를 선택하는 규칙입니다. 브라우저는 먼저 해당 요소에 적용되는 선언을 추린 뒤 출처와 !important 중요도, @layer 순서, 선택자 명시도, 스코프 근접도, 그리고 마지막으로 작성된 선언 순서를 차례대로 비교합니다. 이 과정에서 직접 지정된 값이 없으면 부모로부터의 상속(Inheritance)이나 속성의 초기값(Initial Value)이 사용됩니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. @layer로 묶인 일반 선언끼리는 선택자 명시도가 아무리 높아도 레이어 우선순위가 먼저 비교되어 상위 레이어 규칙이 이깁니다.
2. 브라우저 개발자 도구의 Styles 패널에서 취소선이 그어진 규칙을 보면 명시도에서 밀렸는지, 레이어나 중요도에서 밀렸는지 원인을 바로 파악할 수 있습니다.

면접에서 자주 하는 실수

스타일시트 아래쪽에 나중에 작성한 규칙이나 인라인 스타일이 어떤 상황에서든 무조건 이긴다고 생각하면 안 됩니다.