CSS 상속
- 부모태그에 적용된 CSS 는 자식태그에 동일한 CSS가 존재하지 않는 한 상속된다.
initial
.parent{
color : blue;
font-size: 7px;
}
.child{
color: initial;
font-size: initial;
}
> 부모 태그의 CSS 스타일을 상속받지 않게 하는 속성
.child{
all : initial;
}
> 부모로부터 오는 css 스타일이 많다면 all을 사용하여 한번에 처리할 수 있다.
inherit
/* CSS */
div{
border: 1px solid silver;
margin: 2px;
}
.child1{
color: red;
}
.parent1, child2{
color: blue;
}
.parent2 *{
color:inherit;
}
<!-- HTML -->
<div class="parent1">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
<div class="parent2">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
> 부모태그의 속성을 무조건 적용하는 속성
> 해당 속성을 가진 태그의 자식태그는 자식태그의 스타일을 무시하고 부모 태그의 스타일을 상속받는다.
> all 을 사용해 모든 스타일을 상속시킬 수 있다.
unset
- 부모로부터 상속받을 값이 존재할때 : inherit 과 동일
- 부모로부터 상속받을 값이 존재하지 않을 때 : initial, 즉 초기값으로 동작
'웹 프론트 엔드' 카테고리의 다른 글
CSS Font (0) | 2024.03.12 |
---|---|
CSS 우선순위 (0) | 2024.03.12 |
CSS 선택자 - 전체 선택자( * ) (0) | 2024.03.12 |
CSS 선택자 - 선택자 결합 (0) | 2024.03.12 |
CSS 선택자 - 가상 요소 선택자 (0) | 2024.03.12 |