10장. 스타일의 상속과 적용 우선 순위

[ 목차 ]

1. 상속

2. 캐스캐이딩

3. 중요도

4. 명시도

5. 선언순서

 

1. 상속

1) 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려받는 것

2) 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 함

3) 모든 프로퍼티가 상속되는 것은 아님

4) 상속 받지 않는 button의 경우 빨간색을 물려받지 않음

5) border, padding은 상속받지 않는 요소로 하위 요소에 적용되지 않음

6) 상속되지 않는 경우, inherit 키워드를 사용하면 명시적으로 상속받게 할 수 있음

 

2. 캐스캐이딩

1) 요소는 하나 이상의 CSS 선언에 영향을 받을 수 있음

2) CSS 끼리의 충동을 피하기 위한 적용 우선순위가 필요한데 이를 캐스캐이딩이라 지칭

3) 캐스케이딩은 중요도, 명시도, 선언순서의 세가지 규칙을 지님

 

3. 중요도

1) CSS가 어디에 선언 되었는지에 따라 우선순위가 달라짐

1. head 요소 내의 style 요소
2. head 요소 내의 style 요소 내의 @import문
3. <link> 로 연결된 css 파일
4. <link> 로 연결된 css 파일 내의 @import문
5. 브라우저 디폴트 스타일시트

 

4. 명시도

1) 대상을 명확하게  특정할수록 명시도가 높아지고 우선순위가 높아짐

2) !important > 인라인 스타일 > 아이디 선택자 > 클래스/어트리뷰트/가상 선택자 > 태그 선택자 > 전체 선택자 > 상위 요소에 의해 상속된 속성

 

5. 선언순서

1) 선언된 순서에 따라 우선 순위가 적용, 즉 나중에 선언된 스타일이 우선 적용