상속을 제어하기 (inherit, initial,unset)
220414 목요일
오늘 배운 내용
- 선택자 상속 제어하는 방법
상속을 제어할때는 - initial, inherit, unset 이렇게 3가지 요소가 있다.
앞에 두 요소는 다른 Css를 무시하고 부모의 값을 따르겠다.
<div class="parent">
parent
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
<div class="parent2">
parent
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
.parent, .parent2{
color: blue;
font-size: 20px;
}
div {
border: 1px solid silver;
margin: 2px;
}
.parent *{
all: initial;
}
.parent2 *{
all:inherit;
}
.parent2 .child2 {
color:red
}
아무거도 적용 안했을 시
parent에는 initial을 적용
parent2에는 inherit을 적용하였다.
차이점이 보이나?
그냥 Parent는 부모로 부터 받은 속성들이 다 풀어진 모습이다.
하지만 Parent2는 부모로 받은 속성 폰트사이즈 20과 블루컬러는 그대로 가져가는 상황이다.
initial은 아예 부모로 부터 받은거 까지 싹다 없애 버리는 완전 강한 속성
inherit은 부모로 부터 받은 상속은 그대로 받되 그 외 나머지는 싹둑 해버리는
unset은
두가지 속성을 때에 따라 다르게 적용이 되게끔 사용이 된다.
속성을 받을게 없으면 initial
로 작동
있으면 inherit
으로 작동
부모로 부터 받을 게 있어서 inherit
으로 작동하였다.
Author And Source
이 문제에 관하여(상속을 제어하기 (inherit, initial,unset)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yangth/ZeroBase-FrontEnd-TIL01저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)