상속
- 상위 엘리먼트의 속성을 하위 엘리먼트가 물려 받음
- 속성 중에는 상속이 되는 것과 되지 않는 것이 있음
- http://www.w3.org/TR/CSS21/propidx.html inHerited? 가 yes인 경우만 상속됨
- 속성의 값으로 inhert를 지정하면 상속되지 않는 속성도 강제로 상속할 수 있음
example1.html - 상속의 일반적인 모습과 상속의 우선순위 (jsfiddle, github)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body> <h1>생활코딩 커리큘럼</h1> <ul style="color:red"> <!-- color:red가 하위 엘리먼트 모두에게 영향을 줌 --> <li> HTML </li> <li> CSS <ul> <li> 선택자 </li> <li> 선택자의 조합 </li> <li> 상속 <ul style="color:blue"> <!-- color:blue를 지정해서 부모로부터 상속 받은 color:red를 무효화하고 하위 엘리먼트에 blue를 지정함 --> <li> 상속이란 </li> <li> 예제 </li> </ul> </li> </ul> </li> <li> javascript </li> <li> linux </li> <li> PHP </li> <li> Mysql </li> </ul> </body> </html>
example2.html - 상속되지 않는 속성(border) (jsfiddle, github)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body> <h1>생활코딩 커리큘럼</h1> <ul style="border:1px solid red"> <!-- border는 상속되지 않는 속성이기 때문에 적용한 엘리먼트에만 영향을 줌 --> <li> HTML </li> <li> CSS <ul> <li> 선택자 </li> <li> 선택자의 조합 </li> <li> 상속 <ul> <li> 상속이란 </li> <li> 예제 </li> </ul> </li> </ul> </li> <li> javascript </li> <li> linux </li> <li> PHP </li> <li> Mysql </li> </ul> </body> </html>
example3.html - 강제상속 (jsfiddle, github)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body> <h1>생활코딩 커리큘럼</h1> <ul style="border:1px solid red"> <!-- border는 상속되지 않는 속성이기 때문에 적용한 엘리먼트에만 영향을 줌 --> <li style="border:inherit"> HTML </li> <!-- inhert를 지정하면 상속되지 않는 속성도 강제로 상속하게 할 수 있다 --> <li> CSS <ul> <li> 선택자 </li> <li> 선택자의 조합 </li> <li> 상속 <ul> <li> 상속이란 </li> <li> 예제 </li> </ul> </li> </ul> </li> <li> javascript </li> <li> linux </li> <li> PHP </li> <li> Mysql </li> </ul> </body> </html>
참고
- 상속공부 by Twit Lingua
