CSS : 상속

CSS 상속

CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있다. 상속하는 속성은 자식 요소에 영향을 미치고, 상속하지 않는 속성은 자식 요소에 영향을 미치지 않는다.

상속하는 속성

예를 들어 color는 상속하는 속성이다. 부모에서 지정한 색상이 자식 요소에도 적용된다.

<style>
  p { color : blue; }
</style>
<p> Hello <em>world</em></p>

--> Hello뿐만 아니라 world 에도 색상이 적용된다.

---

상속하지 않는 속성

예를 들어 padding 속성은 상속하지 않는 속성이다. 부모 요소에서 padding을 정의해도 자식 요소에 적용되지 않는다.

<style>
  p { padding: 20px; }
</style>
<p>Hello <em>World</em></p>

--> p 요소에만 padding을 적용한다.

---

상속을 하고 싶을 때

상속하는 속성을 적용해도 상속이 되지 않는 요소들이 있다. 예를 들면 button이나 input 같은 요소는 color 를 부모요소가 지정해도 상속받지 않는다. 이런 요소들을 상속받게 하려면 어떻게 해야할 까?

button,input{
	color : inherit;
}

--> 다음과 같이 작성하면 button, input 요소 모두 상속을 받는다.