상속
- 상위 엘리먼트의 속성을 하위 엘리먼트가 물려 받음
- 속성 중에는 상속이 되는 것과 되지 않는 것이 있음
- http://www.w3.org/TR/CSS21/propidx.html inHerited? 가 yes인 경우만 상속됨
- 속성의 값으로 inhert를 지정하면 상속되지 않는 속성도 강제로 상속할 수 있음
example1.html - 상속의 일반적인 모습과 상속의 우선순위 (jsfiddle, github)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!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