[CSS] 캐스케이딩 (Cascading) 이란? [3/10 Study]

Cascading 소개

 

: 스타일 규칙 및 선언이 어떻게 적용되는지에 대한 규칙 및 우선 순위가 결정되어야 합니다. 이를 캐스케이딩 이라고 하는데, 다양한 스타일 규칙이 충돌하는 상황에서 어떤 스타일이 최종적으로 적용되는지 결정합니다.

CSS의 정식 명칭은 Cascading Style Sheets 라는 이름에서 볼 수 있듯이 Cascading은 CSS의 핵심이라고 할 수 있습니다.

캐스케이딩은 다음의 3가지에 의해 결정됩니다.

• 중요도(Importance) - !important로 선언된 스타일 규칙은 다른 모든 규칙보다 우선순위가 높습니다.
• 명시도(Specificity) - 구체적인(특정한) 선택자가 높은 우선순위를 갖습니다. 예를 들어, ID 선택자가 클래스 선택자보다 높은 우선순위를 갖습니다.
• 소스 순서(Source Order) - 동일한 특성 값과 특정성을 가지는 규칙은 마지막에 선언된 규칙이 먼저 선언된 규칙을 덮어씁니다. 즉, 나중에 선언된 규칙이 우선순위가 높습니다.

 

중요도 / Importance

: 중요도는 스타일이 선언된 위치에 따라 우선순위가 결정되는 것 입니다. 기본적으로 프로그래머의 스타일 시트에 우선권을 부여하고 사용자와 브라우저의 스타일 시트의 우선순위가 낮습니다. 중요도에 따른 우선순위는 다음과 같습니다.

[ 프로그래머 CSS > 사용자 CSS > 브라우저 CSS ]

 

+ 중요도를 올리기

: 중요도를 가장 먼저 끌어올릴 수 있는 명령어로 '!important'가 존재합니다. 사용법은 속성뒤에 !important만 붙여주면 됩니다.속성에 이 명령어를 붙일 경우 어떤 속성보다 최우선으로 적용되게 됩니다. 그래서 이 속성을 가장 중요하게 꼭 넣어야하는 경우에 이 명령어를 붙입니다.

 

명시도 / Specificity

: 명시도란 셀렉터(선택자)에 따라 우선순위가 달라지는 것입니다. 명시도라는 단어의 뜻에 맞게 셀렉터의 의미가 정확해 질수록 높은 우선순위를 갖습니다. 쉽게 말해 스타일이 적용되는 범위가 좁다면 우선순위가 높다는 것 입니다. 그러므로 명시도에 따른 우선순위는 다음과 같습니다.

[ 인라인 > id > class > 태그 ]

 

'인라인 스타일'이란 태그 안쪽에 style 속성을 사용해 적용한 스타일을 말합니다. 예를들면 다음과 같습니다. <p style="color: orange;">

'id 스타일'이란 선택자 이름 앞에 #을 사용해 아이디 선택자를 사용한 속성을 말합니다. 예를들면 다음과 같습니다. #abc { color: brown; }

'class 스타일'이란 선택자 이름 앞에 .을 사용해 클래스 선택자를 사용한 속성을 말합니다. 예를들면 다음과 같습니다. .def { color: yellow; }

'태그 스타일'이란 태그를 사용해 적용한 스타일 속성을 말합니다. 예를들면 다음과 같습니다. p { color: purple;}

 

소스 순서 / Source Order

: 우선 순위를 결정하는 또 다른요소는 바로 코드 순서입니다. 코드 순서라는 것은 코드에서 나중에 온 속성이 최우선으로 적용된다는 것입니다. 위에서 아래로 실행된다는 프로그래밍의 기본원리를 생각하신다면 이해하기 쉬울 것 입니다.

예를들어 p { color: red; }이라고 속성을 지정해놓고, 뒤에 다시 p { color: blue; }라고 지정하면, 결국 p태그의 color는 blue가 되게 됩니다.

또 하나, 스타일 상속 원칙 입니다.

: 스타일 상속 원칙은 태그들의 포함 관계로 스타일을 적용하는 원칙입니다. 바깥에 있는 태그가 부모 요소, 그 안에 포함된 태그들을 자식 요소라고 하는데, 일반적으로 부모 요소의 스타일을 자식 요소들이 받아서 갖게 됩니다. 이것을 상속이라고 하며, 부모 요소의 스타일을 자식 요소가 그대로 받는것이 스타일 상속 원칙입니다.

 

 

 

https://velog.io/@bami/CSS-Cascading

[CSS] Cascading

위 블로그를 참조하면서 공부했다

 

 

 

🔥마무리

이번 포스트에서는 캐스케이딩에 대해서 알아보았습니다. 우선순위에 따라서 적용되는 스타일 요소가 다르기 때문에 css를 적용할 때 항상 염두해 두어야합니다

내맘대로 스타일을 부여할 수 있는게 너무 재미있을 것 같고 빨리 더 공부하고싶다

화이팅😊