Cascading이란?

[위클리페이퍼 - 1주차]

 

CSS (Cascading Style Sheets) 라는 이름에서부터 알 수 있듯이(몰랐지만?)

 

최종적으로 적용할 CSS속성을 결정할때 CSS 규칙을 순서에 따라 합쳐서 적용한다.

즉 우선순위가 높은 규칙을 우선적으로 적용한다 (계단식 폭포처럼) 

 

순서는?

개발자 도구에서 위에 있는 내용이 아래 적힌 내용을 덮어서 적용된다

user agent stylesheet (브라우저 개발자도구에서 확인할 수 있는 기본 CSS) : 우선순위 낮음 -> 덮어쓸 수 있다.

인라인 스타일 : 코드에 직접 작성 -> 가장 우선순위 높음 

CSS에서는 나중에 쓰여있는 코드일수록 우선순위가 높다.

선택자의 명시도 seclector specificity 가 높을수록 (선택자 id, class, 태그 등 개수..) ▷ 구글 'specificity calculator'

MDN 명시도 내용 참고해보기

https://developer.mozilla.org/ko/docs/Web/CSS/Specificity

---

스타일 적용이 잘 안될 때 꿀팁 !

잘못 적용된 스타일이 있다면 개발자 도구에서 해당 속성을 검색해서 찾아볼 수 있다. 

---

상속

 

해당 선택자에 직접 작성된 css > user agent stylesheet > 가까운 조상(부모)일수록  cascading 순위가 높다 

개발자 도구에서 상속된 내용을 조사할 수 있음 

모든 속성이 상속되는 것은 아님