[css] CSS - unset 속성값 - 상속값 존재 유무에 따라, inherit・initial 속성값 사용. (= 언셋 속성값)

목차

1. unset 예제 - 상속값 존재 O 경우, 상속값 (inherit) 적용
2. unset 정의
3. unset 예제 - 상속값 존재 X 경우, 초기값 (initial) 적용

unset 예제 - 상속값 존재 O 경우, 상속값 (inherit) 적용

(예) 글자색 경우.

 

<style>

.a {color: blue;}

.b {color: green;}    

p {color: red;}

.b p {  color: unset;} 

</style>

<p>홈짱닷컴 Homzang.com (red)</p>

<div class="a">

  <p>코딩언어 강의 (red)</p>

</div>

<div class="b">

  <p>그누보드 강의 (green)</p>

</div>

 

결과보기

PS. 부모인 .b 선택자의 테두리색 지정 O. 그 결과 inherit 속성값 취함.

unset 정의

 

상속값 존재 O 경우, 상속값(inherit) 적용.

상속값 존재 X 경우, 초기값(initial) 적용.

 

---

 

1.

all 단축속성 포함한 모든 속성에 사용 가능.

 

2.

버전: CSS3

지원: IE 제외한 주요 최신 브라우저 모두 지원.

 

3. 

관련 속성값 및 속성.

 

initial 속성값

: 속성 초기값을 사용.

 

revert 속성값

: 에이전트가 지정한 값(또는 사용자가 수정한 값)으로 되돌리기.

 

inherit 속성값

: 부모 요소의 속성값을 상속.

 

all 속성

: 요소의 모든 속성을 한꺼번에 initial, inherit, revert, unset 설정 가능.

 

unset 예제 - 상속값 존재 X 경우, 초기값 (initial) 적용

(예) 테두리 색 경우.

 

<style>

div {border: 1px solid blue;}

p {border: 1px solid red;}

.a p {border-color: unset;}

</style>

<p>홈짱닷컴 Homzzang.com (red)</p>

<div>(blue)

  <p>코딩언어 강의 (red)</p>

</div>

<div class="a">(blue)

  <p>그누보드 강의 (black ∵ unset)</p>

</div>

 

결과보기

PS. 부모인 .a 선택자의 테두리색 지정 X. 그 결과 initial 속성값 취함.