[CSS] CSS 속성 inherit 상속받기

inherit 속성값

inherit은 영어단어 그대로 상속받는겁니다.

상위 객체의 값을 그대로 물려받아 적용하는 겁니다.

가령

HTML:

<a href="/">홈으로</a>

<div>

<p>메뉴를 클릭하세요.</p>

<a href="/board/">게시판으로 가기</a>

</div>

CSS:

a { color: blue; }

div { color: orange; }

div a { color: inherit; }

이렇게 한다면 [홈으로]링크는 당연히 파랑색으로 나올겁니다.

그리고 [메뉴를 클릭하세요.]라는 p태그는 주황색으로 나오겠죠.

[게시판으로 가기]링크는 상위 객체인 div의 color을 물려받아서(inherit) 주황색으로 나오게됩니다.

inherit은 그렇게 유용하게 느껴지진 않습니다-_-

다만, div의 색상을 따라가게되니까 코드중 한부분만 수정하면 inherit에 의해 값을 물려받게 됩니다.

물론,

div, a { color: oragne }

이렇게 사용하면 inherit을 사용하지 않아도 되겠죠. inherit이 지원되지 않는 몇몇 구버전의 브라우저도 있을테니까요^^

출처: http://qnrdlqkrwhdgns.canxan.com/jpboard/post/251