상속
상속(inheritance)이란 어떠한 속성을 물려받아 한번에 적용되는것을 뜻한다.
li와 h1 에 붉은색을 주고 싶을 경우, style에서 color를 이용해 각각 적용할 수도 있다.
하지만 이런 경우 상속을 이용하면 한번에 적용이 가능하다.
html에 color를 주면 그 내용이 상속되어 밑의 li,h1등 모두 붉은색이 적용된다.
하지만 이 중 javascript는 다른색을 주고싶다면 id=slect를 이용해 javascript만 검정색을 줄 수 있다.
모든 속성이 상속되는것은 아니다.
body태그에 border를 주면, li와h1 모두 테두리가 생겨야 할 것 같지만 body태그에만 테두리가 생긴다. 이처럼 color의 경우 상속되는 속성임에 반하여 border처럼 상속되지 않는 속성도 존재한다.
<!DOCTYPE html>
<html>
<head>
<style>
/* li{color:red;}
h1{color:red;} 주석 처리 */
html{color:red;}
#select{color:black;}
body{border:1px solid red;}
</style>
</head>
<body>
<h1>수업내용</h1>
<ul>
<li>html</li>
<li>css</li>
<li id="select">javascript</li>
</ul>
</body>
</html>
가보자고?