[CSS] CSS 상속 및 초기화

CSS 상속 

CSS 상속 속성

• color
• letter-spacing
• visibility
• line-height
• font 속성
• letter-spacing
• list-style 관련 속성
• text-align
• text-decoration
• text-shadow

 

inherit

• 어떤 요소의 속성값이 지정되어 있는 상태에서, 부모의 값을 상속받고자 할 때 사용
• 상속 적용이 해당되는 css 속성에 한함

initial

• 요소의 기본 속성 초기값 사용
• display:initial은 display:inline으로 설정되므로, display:block 명시 필요

unset

• 상속된 값이 있을 경우 inherit와 같이 사용, 없는 경우 initial과 같이 사용
• 상속 적용이 해당되는 css 속성에 한함

.container {
	color:red
}

.container>div {
	color:unset
}

<div class="container">
	<div>child</div>
</div>

revert

• 상속된 값이 있을 경우 inherit와 같이 사용되나, 상속된 값이 없는 경우으 값을 initial 시키지 않음

---

리셋

• 브라우저에서 자동으로 지정한 기본 스타일 속성을 완전히 초기화하여 원하는 스타일을 지정할 수 있음
• 특정속성: initial, all:unset , 특정 속성:unset 을 사용하여 기본 속성을 삭제 후, 원하는 스타일 속성 적용

<style>
	.container>div {
		color: revert
	}
</style>
<div class="container">
	<button class="btn">btn</button>
</div>

all:unset을 사용하여 브라우저 기본 스타일 속성을 모두 초기화

all:initial을 사용하여 브라우저 기본 스타일 속성을 모두 초기화

---