[CSS] CSS의 Cascading [4/29 study]

 

 

CSS의 Cascading

 

 

 

 

Cascading이란?

최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 걸 말합니다. 우선순위가 높은 규칙일수록 우선적으로 속성을 적용합니다.

 

규칙

선택자마다 명시도 점수가 있고 명시도를 고려한 우선 적용되는 순서는 아래와 같습니다. 

- !important (명시도와 무관하지만, 명시도에 직접 영향을 미침, 다른 선언보다 우선함) 

- 인라인 스타일 정의 (인라인 스타일은 항상 외부 스타일시트의 모든 스타일을 덮어쓰기때문에 가장 높은 명시도를 갖는다고 생각할 수 있음)

- 명시도

     - 아이디 선택자 

     - 클래스 선택자, 속성 선택자, 가상(pseudo)클래스 선택자 

     - 태그 선택자, 가상(psuedo)요소 선택자 

- 상속된 스타일 

     - 상속: 부모 태그에 적용된 CSS 규칙은 자손에게도 상속됩니다. 모든 속성이 상속되는 건 아니고, 상속되는 속성(color, font-family 등)들이 정해져 있습니다. 조상 태그들에서 스타일이 모두 계산된 상태에서 우선순위를 따지는데요. 가까운 조상에게 물려받은 속성일수록 우선순위가 높습니다.

 

- 스타일 시트 상호 충돌할 경우, 우선 적용되는 순서는 아래와 같습니다. 

     - 웹 페이지를 만든 저자가 작성한 스타일 시트 

     - 사용자가 작성한 스타일 시트 

     - 브라우저에서 기본으로 제공하는 스타일시트 

- 코드 상의 순서: 동일한 가중치를 갖는 규칙이 두 개 이상인 경우, 코드에서 아래 쪽에 쓴 코드일수록 우선순위가 높습니다.

 

주의 사항

- !important 는 가능한 사용하지 말아요. (스타일 디버깅을 어렵게 합니다) 

- 인라인 스타일 정의도 가능한 사용하지 말아요. (스타일 디버깅을 어렵게 합니다)

 

참고 자료

https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance https://developer.mozilla.org/ko/docs/Web/CSS/Specificity#selector-type

https://specificity.keegan.st (CSS우선순위 계산해주는 사이트)

 

 

 

마무리🔥

오랜만에 React 공부하다가 CSS에 대해서 공부해보았다. cs지식을 깊이 하나씩 알아가는것도 내가 공부할때 이해하기도 편하고 재미도 있는것 같다. 이렇게 알아본 우선순위와 스타일 상속을 통해 어떤 스타일이 적용될지 결정이 됩니다. CSS를 다루다가 원하는 속성이 적용이 안된다면, 캐스케이딩 규칙이 지켜졌는지 다시 한 번 생각해 볼 필요도 있습니다.

오늘도 화이팅🔥