5-2. 캐스케이딩 스타일 시트, 스타일 우선순위와 스타일 상속

1. 캐스케이딩

CSS에서 C가 cacading의 줄임말이다. 

스타일 시트에서는 우선순위가 위에서 아래로 즉 계단식으로 적용된다는 의미이다. 

CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다. 

 

- 스타일 우선순위 : 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용한다. 

- 스타일 상속 : 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다. 

 

1️⃣ 스타일 우선순위 

적용 범위 

⭐!important : 어떤 스타일보다 우선 적용하는 스타일이다. 

인라인 스타일 : 태그 안의 style 속성을 사용해 해당 태그만 스타일을 적용한다. 

id 스타일 : 지정한 부분에만 적용되는 스타일이지만 한 문서에 한번만 적용할 수 있다.

클래스 스타일 : 웹 문서에서 지정한 부분에만 적용되는 스타일로 한 문서에 여러번 적용할 수 있다. 

타입 스타일: 웹 문서에 사용한 특정 태그에 스타일을 똑같이 적용한다. 

 

 

2️⃣ 스타일 상속 

스타일 시트에서 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달된다.