[CSS] 상속과 캐스캐이딩

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가지 규칙이 있다.

1. 중요도(!important)와 출처
2. 구체성
3. 선언 순서

위에서의 출처는 CSS 출처를 의미한다.

CSS 출처는 제작자와 사용자, 그리고 사용자 에이전트(user agent) 경우로 구분한다.

제작자의 경우는 사이트를 실제 제작하는 개발자가 작성한 CSS를 의미한다. (대부분이 여기에 해당합니다.)

그리고 사용자의 경우는 웹 페이지를 방문하는 일반 사용자들이 작성한 CSS를 의미한다.

마지막으로 사용자 에이전트의 경우는 일반 사용자의 환경, 즉 브라우저에 내장된 CSS를 의미한다.

현재의 브라우저에서는 사용자 스타일을 지원하지 않는 추세이기 때문에 생략해도 무관하다.

 

스타일이 적용되는 방식은 간단하다.

단계적으로 아래의 규칙에 의해 적용된다.

1. 스타일 규칙들을 모아서 중요도가 명시적으로 선언되었는지에 따라 분류

      - 중요도가 명시적으로 선언된 규칙들 우선, 중요도 있는 규칙들끼리는 다른 규칙들을 적용 

   2.  스타일 규칙들을 출처에 따라 분류

     -  제작자 스타일 규칙이 사용자 에이전트 스타일 규칙보다 우선

  3.  스타일 규칙들을 구체성에 따라 분류

    -  구체성이 높은 규칙들이 우선

  4.  스타일 규칙들을 선언 순서에 따라 분류

    -  뒤에 선언된 규칙일수록 우선

 

p#bright { color: silver; } 
p { color: red; }

위의 경우에는 구체성에 따라 color: silver가 적용됩니다.

p { color: silver; }
p { color: red; }

위의 경우에는 선언 순서에 따라 color: red가 적용됩니다.