[CSS강좌] CSS 상속하는 속성과 상속하지 않는 속성
상속(inheritance)
CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다.
상속하는 속성은 자식 요소에 영향을 미칩니다.
상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다.
상속하는 속성
예를 들어 color는 상속하는 속성입니다. 부모 요소에서 정한 색이 자식 요소에도 적용됩니다. 즉
<style>
p { color: blue; }
</style>
<p>Lorem <em>Ipsum</em></p>
일 때, Lorem 뿐만 아니라 Ipsum의 색도 파란색이 됩니다.
상속하지 않는 속성
예를 들어 padding은 상속하지 않는 속성입니다. 부모 요소에서 padding을 정의해도 자식 요소에 적용되지 않습니다. 즉
<style>
p { padding: 20px; }
</style>
<p>Lorem <em>Ipsum</em></p>
일 때 p 요소에만 안쪽 여백을 만들고 em 요소에는 안쪽 여백을 만들지 않습니다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.abc {
color: red;
border: 1px solid #bcbcbc;
padding: 10px 20px 20px 20px;
}
</style>
</head>
<body>
<div class="abc">
<h1>ITworldkorea</h1>
<p>Korea <em>Itworld</em></p>
<button>Button</button>
</div>
</body>
</html>
아래표는 위 결과값
color는 상속하는 속성이므로 자식 요소의 색도 빨간색으로 만듭니다. (button 처럼 상속을 받지 않는 요소도 있습니다.)
border와 padding은 상속하지 않는 속성이므로 div 요소에만 적용됩니다.
'홈페이지제작 > CSS' 카테고리의 다른 글
| [CSS 강좌] 링크 꾸미기 (0) | 2017.12.08 |
|---|---|
| [CSS 강좌 ] 목록 꾸미기 ( list-style-type ) (0) | 2017.12.07 |
| [CSS 강좌] 아이디 선택자(ID Selector) (0) | 2017.12.04 |
| [CSS 기초] 클래스 선택자(Class Selector) (0) | 2017.11.25 |
| [CSS 기초] 타입 선택자(Type Selector) (0) | 2017.11.25 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.