• Q&A
  • 회원가입
  • 로그인

[intro] CSS - inherit (인헤리트) - 상속개념 ★

CSS 상속 (inherit) ★ 
 
자식 요소에서 특별히 속성을 지정 않은 경우, 부모 요소의 속성을 물려받는 걸 의미. 
 
 
 
 
부모 요소 (p)에 붉은 색 스타일을 준 경우, 
자식 요소 (span)에 별도의 스타일을 안 줘도 부모 요소의  붉은색 스타일이 적용

 <style>
p {color:red;}
</style>
 
<p>홈짱닷컴 <span>(homzzang.com)</span></p>
 
 
 
자식 요소에 별도로 속성 지정 안해도 상속 되지만, 
자식 요소 속성에 inherit 적어 상속을 명시화 해줄 수 있음. 
 
<style>
p {color:red;}
p>span {color:inherit;}
</style>
 
<p>홈짱닷컴 <span>(homzzang.com)</span></p>
 
 
 
자식 요소에서 별도로 속성을 준 경우엔,
부모 요소의 속성을 상속받지 않고 별도로 지정한 속성이 적용.
 
<style>
p {color:red;}
p>span {color:blue;}
</style>
 
<p>홈짱닷컴 <span>(homzzang.com)</span></p>


결과 보기

 
 
대부분 속성은 상속되나, 
(margin, padding. border 등) 박스 스타일과 관련된 속성은 상속 안 됨.

<style>
div {color:red; border:1px solid #ccc; padding:10px;}
</style>
 
<div>
<p>홈짱닷컴 : homzzang.com </p>
</div>


결과 보기
오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012