[FE] 📚 CSS의 Cascading

📚   CSS의 Cascading

 

📗 Cascading이란?

최종적으로 적용할 CSS 속성들을 결정할 때, 폭포수 처럼 CSS 규칙을 순서에 따라 합쳐서

적용하는 것을 말합니다.

 

✅ 즉, 요소의 우선순위가 높은 규칙일수록 우선적으로 속성을 적용합니다.

---

 

📑 규칙

 

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

• !import(명시도와 무관하지만, 명시도에 직접 영향을 미치며, 다른 선언보다 우선됩니다.)
• 인라인 스타일 정의(인라인 스타일은 항상 외부 스타일시트의 모든 스타일을 덮어쓰기 때문에 가장 명시도를 갖는다고 생각할 수 있습니다.)
• 명시도

• 아이디 선택자
• 클래스 선택자, 속성 선택자, 가상(pseudo) 클래스 선택자
• 태그 선택자, 가상(psuedo) 요소 선택자

 

• 상속된 스타일

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

 

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

• 웹 페이지를 만든 저자가 작성한 스타일 시트
• 사용자가 작성한 스타일 시트
• 브라우저에서 기본으로 제공하는 스타일시트

 

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

 

⛔ 주의 사항

 

• !important 는 사용하지 않는다 (스타일 디버깅을 어렵게 한다.)
• 인라인 스타일 정의도 가능한 사용하지 않는다 (스타일 디버깅을 어렵게 한다.)