CSS에서 상속은 우리가 알고 있는 부모가 가진 특성을 자식이 물려받는 개념과 동일하다.
상속은 구체성과 더불어 스타일 규칙들이 문서에 어떻게 적용되는지 이해하기 위한 또 다른 중요한 핵심 개념이다.
상속되는 속성
h1{color: gray;}
<h1>Hello,<em>CSS</em></h1>
<em>은 부모인 <h1>의 color:gray를 상속 받는다.
참고로 모든 속성이 다 상속되는 것은 아니다.
margin, padding, background, border 등 박스 모델 속성들은 상속되지 않는다.
상속되는 속성의 구체성
*{color: red;}
h1#page{color:gray;}
<h1 id="page">Hello, <em>CSS</em></h1>
<em>에는 어떤 color가 적용될까?
정답은 color:red가 적용된다.
이유는 상속된 속성은 아무런 구체성을 가지지 못하기 때문이다.
상속된 값은 아무런 구체성을 가지지 않으며, 심지어 0,0,0,0도 아니다. 전체 선택자(0,0,0,0)에도 밀린다.
만약, 전체선택자가 없었다면 어떠한 선택자와도 겹치지 않아서 h1#page { color: gray; }가 적용되었을 것.
캐스캐이딩(cascading)
앞서 배운 구체성도 cascading 규칙 중 하나이다.
h1 { color: red;}
h1 { color: blue;}
위 <h1>에는 같은 구체성을 가진 두 규칙이 있다.
어떤 color가 h1에 적용이 될까?
캐스캐이딩 규칙
캐스캐이딩에는 다음과 같이 3가지 규칙이 있다.
- 중요도(!important)와 출처
- 구체성
- 선언 순서
위에서의 출처는 CSS 출처를 의미한다.
CSS 출처는 제작자와 사용자, 그리고 사용자 에이전트(user agent) 경우로 구분한다.
제작자의 경우는 사이트를 실제 제작하는 개발자가 작성한 CSS를 의미한다. (대부분이 여기에 해당합니다.)
그리고 사용자의 경우는 웹 페이지를 방문하는 일반 사용자들이 작성한 CSS를 의미한다.
마지막으로 사용자 에이전트의 경우는 일반 사용자의 환경, 즉 브라우저에 내장된 CSS를 의미한다.
현재의 브라우저에서는 사용자 스타일을 지원하지 않는 추세이기 때문에 생략해도 무관하다.
스타일이 적용되는 방식은 간단하다.
단계적으로 아래의 규칙에 의해 적용된다.
- 스타일 규칙들을 모아서 중요도가 명시적으로 선언되었는지에 따라 분류
- 중요도가 명시적으로 선언된 규칙들 우선, 중요도 있는 규칙들끼리는 다른 규칙들을 적용
2. 스타일 규칙들을 출처에 따라 분류
- 제작자 스타일 규칙이 사용자 에이전트 스타일 규칙보다 우선
3. 스타일 규칙들을 구체성에 따라 분류
- 구체성이 높은 규칙들이 우선
4. 스타일 규칙들을 선언 순서에 따라 분류
- 뒤에 선언된 규칙일수록 우선
p#bright { color: silver; }
p { color: red; }
위의 경우에는 구체성에 따라 color: silver가 적용됩니다.
p { color: silver; }
p { color: red; }
위의 경우에는 선언 순서에 따라 color: red가 적용됩니다.
'CSS' 카테고리의 다른 글
[CSS] font-family (0) | 2023.04.06 |
---|---|
[CSS] BOXMODEL (0) | 2023.04.03 |
[CSS] 구체성 (0) | 2023.04.01 |
[CSS] 가상선택자 (0) | 2023.04.01 |
[CSS] 문서 구조 관련 선택자 (0) | 2023.03.28 |