[CSS] 캐스케이딩 (Cascading)

✔ 캐스케이딩

- HTML의 요소들에 대해 CSS로 스타일을 지정해줄 때,
  하나 이상의 스타일에 영향을 받을 수 있기 때문에 어떤 스타일을 적용 받을지에 대한 우선순위를 결정하는 것

 

✔ CSS의 우선순위를 결정하는 요소

1) 순서

2) 디테일

3) 선택자

 

1️⃣ 순서에 의한 캐스케이딩

- 위에서 아래로 읽기 때문에 나중에 적용한 속성값의 우선순위가 높음

 

2️⃣ 디테일에 의한 캐스케이딩

- 더 구체적으로 작성된 (부모 자식 관계가 명료한) 선택자의 우선순위가 높음

 

3️⃣ 선택자에 의한 캐스케이딩

- 선택자도 마찬가지로 구체적인 것부터 우선 적용됨

- style > id > class > type

    - style : 태그 안에 작성한 만큼 가장 구체적

    - id : 태그 하나만을 유일하게 지정

    - class : 유사한 묶음을 지정

    - type : 태그의 이름 (중복이 있을 수 있기 때문에 우선순위가 가장 낮음)