css 상속

CSS에서 상속은 우리가 기본적으로 알고 있는 부모가 가진 특성을 자식이 물려받는 개념과 같다.

어떤 스타일 규칙이 특정 요소뿐만 아니라 그 자손 요소까지 적용되는 것을 말한다.

상속은 구체성과 더불어 스타일 규칙들이 문서에 어떻게 적용되는지 이해하기 위한 또 다른 중요한 핵심 개념!

상속 관계를 잘 활용하여 CSS의 생산성을 높일 수 있다. 

 

 

css

h1 { color: gray; }

html

<h1>Hello, <em>CSS</em></h1>

⬆️ 위에서 <em> 요소는 부모의 칼라인 gray를 상속받을까?

 

<em>은 부모인 <h1>의 color: gray를 상속받는다.

상속은 자연스러운 현상처럼 보이지만, 모든 속성이 다 상속되는 것은 아니다.

아직 속성에 대해 다 배우지는 않았지만, margin, padding, background, border 등 박스 모델 속성들은 상속되지 않는다!!

상속되는 속성들은 보통 상식적으로 구분될만한 속성들이다. 

 

 

---

상속되는 속성의 구체성은??

 

css

* { color: red; } /*0,0,0,0*/
h1#page { color: gray; } /*0,1,0,1*/

html

<h1 id="page">Hello, <em>CSS</em></h1>

 

⬆️ <em> 요소는 회색으로 나타날까??

 

color: red가 적용된다!

 

 

 전체 선택자를 이용해 color: red를 적용하고 id 선택자를 이용해 color: gray를 선언했다.

전체 선택자의 구체성은 0, 0, 0, 0 이며 id 선택자의 구체성은 0,1,0,1 입니다.

 

color: red가 적용되는데 그 이유는 바로 상속된 속성은 아무런 구체성을 가지지 못하기 때문이다.

심지어 0,0,0,0 의 값도 없기 때문에 전체 선택자의 구체성에도 밀리기 때문이다. 

 

만약 전체 선택자가 없었다면 어떠한 선택자와도 겹치지 않아서 아무런 구체성이 없어도 color: gray로 표현되었을거다.