이번에는 스타일 상속에 대해 알아보자.
예를 들어 사진과 같은 코드가 있을때, 호랑이, 사자, 코끼리의 부모 요소로 animal 클래스를 가진 div 요소를 확인할 수 있다. .animal 선택자에 스타일을 주면 동물 부터 호랑이, 사자, 코끼리 까지의 코드에 모두 스타일이 적용된다. animal 클래스에 css를 적용했을 때 자식 요소, 나아가 하위 요소들에 영향을 미치는 것을 스타일 상속 이라고 한다.
즉 부모 요소 혹은 조상 요소로부터 적용된 스타일이 자식이나 하위 요소로 상속되어 적용되는 것을 css의 스타일 상속 이라고 한다. 모든 요소가 상속 되는 것은 아니고 글자/문자 관련 속성들이 상속된다. 물론 여기에도 예외는 있음!
실질적으로 상속되지 않는 css 내용도 강제적으로 상속시킬 수 있는 강제 상속도 존재한다. 값에 inherit을 넣어주면 height, background-color 등의 속성들도 강제로 상속시킬 수 있다.
앞서 우리는 선택자의 개념에 대해 배웠다. 선택자에는 같은 요소가 여러 선언의 대상이 된 경우 어떤 선언의 css 속성을 우선 적용할지 결정하는 우선순위가 존재한다. 점수가 높은 선언이 우선되며, 같은 점수이면 마지막에 해석된 선언이 우선된다. 아래 기준을 보고 점수 해당하는 부분의 점수를 더해서 계산하면 됨!!
- !important : 9999999999점 (그냥 무한대로 생각하기!)
- 인라인 선언 : 1000점
- ID 선택자 : 100점
- CLASS 선택자 : 10점 (가상 클래스도 여기에 해당. not은 점수 계산 xx)
- 태그 선택자 : 1점
- 전체 선택자 : 0점
참고로 상속은 별도로 점수를 계산하지 않는다!
※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
'etc... > 패스트캠퍼스 챌린지' 카테고리의 다른 글
| 패스트캠퍼스 챌린지 11일차 - Part1. Ch8 (0) | 2021.11.11 |
|---|---|
| 패스트캠퍼스 챌린지 10일차 - Part1. Ch8 (0) | 2021.11.10 |
| 패스트캠퍼스 챌린지 8일차 - Part1. Ch7 (0) | 2021.11.08 |
| 패스트캠퍼스 챌린지 7일차 - Part1. Ch6 (0) | 2021.11.07 |
| 패스트캠퍼스 챌린지 6일차 - Part1. Ch5 (0) | 2021.11.06 |