inherit, initial, unset
상속
- 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것
- 모든 속성이 상속이 가능한 것은 아님
- 요소 자신이 가진 속성이 우선
| 상속 가능 | 상속 불가 |
|---|---|
| color font-family font-size font-weight text-align cursor | background-color background-image background-repeat border display |
공용 키워드
- 모든 CSS 속성에 사용 가능한 키워드
| 키워드 | 의미 |
|---|---|
| inherit | 상위 요소로부터 해당 속성의 값을 받아 사용 |
| initial | 해당 속성의 기본값을 요소에 적용 |
| unset | 상속 속성 → inherit, 상속되지 않는 속성 → initial 적용 |
<!DOCTYPE html>
<html>
<head>
<meta charset="'utf-8">
<title>inherit</title>
<style>
div {
display: flex;
justify-content: center;
align-items: center;
width: 300px; height: 300px;
color: tomato;
font-size: 32px;
border: 3px dashed red;
}
p {
color: initial;
font-size: unset;
border: inherit;
}
</style>
</head>
<body>
<div>
<p>가운데 p 태그</p>
</div>
</body>
</html>
ISTJ의 재미없는 velog