<aside> <img src="/icons/cursor-click_orange.svg" alt="/icons/cursor-click_orange.svg" width="40px" /> 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

</aside>

🌿 Cascading(캐스케이딩)

지난시간에 우리는 CSS 상속에 대해 배우면서 한 요소가 여러가지를 속성값을 상속받게 되었을 경우 캐스케이딩을 통해 우선순위가 결정된다고 했습니다.

오늘은 이 부분에 대해 좀 더 자세히 알아보도록 하겠습니다.

CSS의 약자?

강의 첫시간에 CSS의 약자에 대해 잠시 짚고 넘어갔는데 기억나시나요?

Cascading Style Sheet 라고 했습니다.

여기서 Cascading 는 폭포, 위에서 아래로 흐르는 이라는 의미를 가지고 있습니다.

CSS에서의 Cascading은 브라우저에 어떤걸 먼저 그려줄 지 결정하는 우선순위 적용 원리 입니다.

우선순위를 적용해주려면, 적용할 기준이 필요하겠죠?

지금부터는 Cascading의 우선순위 적용기준에 대해 알아보도록 하겠습니다.

CSS가 선언된 위치에 따라 중요도를 판단합니다. 브라우저 스타일 시트 < 사용 스타일시트 < **개발자 스타일 시트

❗️ 개발자 스타일 시트의 중요도 개발자 스타일 시트 안에서도 중요도 순위가 나뉩니다. <link>로 연결한 css파일< <style>요소 안에** 있는 CSS < 인라인 스타일 CSS

이러한 중요도 순위를 정리하면 다음과 같습니다.

❗️ 중요도 우선순위 정리

인라인 스타일 CSS

<style> 요소 안에 있는 CSS

<link>로 연결한 CSS 파일

사용자 스타일 시트

브라우저 스타일 시트