상속이란 부모(상위)요소에 적용된 값을 자식(하위)요소가 물려받는 것을 의미합니다.
상속이라는 개념이 없다면, 우리는 부모 밑에 딸린 자식들에게도 같은 매번 속성을 적용해야하는 번거로운 작업을 해야했을 겁니다. 그런데 '상속' 덕분에 우리는 부모에게만 속성을 적용하기만 하면되는 편리함을 누릴 수 있습니다.
예시를 통해서 '상속'을 쉽게 알아볼까요?
아래 예시에서 우리는 <h1>태그와 <p>태그, <b>태그에 한번에 모두 같은 색을 적용할 수 있습니다. 그 이유는 이 태그들이 모두 content 클래스의 자식들이기 때문입니다. 부모인 content 클래스에 색상을 변경해 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
<title>상속</title>
</head>
<body>
<div class="content">
<h1>사이트 이동하기</h1>
<p>내가 가고 싶은 사이트는 <b>구글!</b></p>
<a href="https://www.google.com/">고고~!</a>
<br>
<button>Here</button>
</div>
</body>
</html>
.content {
color: olive;
}
상속 덕분에 부모인 <div>태그에만 프로퍼티를 적용시켰는데, 자식요소들까지 모두 같은 올리브 색이 적용된 것입니다.
어라? 그런데 상속이 되지 않은 자식요소가 있네요.
<a>태그와 <button>태그는 상속이 적용되지 않았어요.
네, 맞습니다. 태그와 속성에 따라 상속이 되지 않는 경우들이 있습니다.
대표적인 예가 margin과 padding인데요. 얘네들은 상속이 되지 않습니다. 상상해보세요. 부모 태그에 설정한 margin이 모든 자식에게 적용된다면, 하나만 고치려다가 난감한 상황이 올 수도 있겠죠?
상속되는 프로퍼티
font-family, font-size, font-weight, line-height, visibility, opacity, color, line-height, text-align, white-space, list-style
상속이 되지않는 프로퍼티
margin, padding, border , box-sizing, display, background, vertical-align, text-ecoration, top/right/bottom/left, position, overflow, width/height
그러나, 상속이 되지 않는 프로퍼티라고 해서 꼭 상속을 받을 수 없는 것은 아닙니다.
inherit을 쓰면 상속을 받을 수 있습니다. 'inherit'을 써주면 그 요소는 부모 요소로 부터 속성 값을 상속 받는다고 여겨집니다. margin: inherit 또는 padding: inherit 을 쓰면, 부모 요소의 마진이나 패딩을 상속 받을 수 있습니다. 아래 예시에서는 a태그가 부모인 content 클래스의 상속을 받을 수 있게 inherit을 써주겠습니다.
.content {
color: olive;
}
.content a {
color: inherit;
}
짜잔~! a태그도 부모 속성의 영향을 받아 올리브 색으로 변한 걸 확인할 수 있네요.
'지금, 개발하기 > CSS' 카테고리의 다른 글
| HTML/CSS] CSS 우선순위는어떻게 정해지나요? 2탄 (0) | 2021.05.28 |
|---|---|
| HTML/CSS] CSS 우선순위는어떻게 정해지나요? 1탄 (0) | 2021.05.27 |
| HTML/CSS] 가상클래스(Pseudo-class)란? (0) | 2021.05.24 |
| HTML/CSS] 자식 선택자, 직속 자식 선택자 (0) | 2021.05.22 |
| HTML/CSS] 복수선택자, 여러조건 선택자 (0) | 2021.05.21 |
