CSS에서의 상속이란, 하위 엘리먼트에서 어떤 CSS 속성을 명시하지 않은 경우, 기본적으로 상위 엘리먼트에 적용된 스타일이 하위 엘리먼트에도 적용되는 것을 뜻한다.
aural 관련 속성
위의 리스트를 보면 폰트와 관련된 속성은 대부분 상속되는 것을 알 수 있다. 그러나 모든 속성이 상속되는 것은 아니며, 예를들면 width
, margin
과 같은 너비를 설정하는 속성은 상속되지 않는다.
(부모의 너비가 모든 자식 엘리먼트에 상속되는 것을 상상하면 레이아웃이 엉망이 될 것이다.)
<a>
태그도 역시 부모태그의 상속을 받지 않는데, 아래 예시에서 <h1>
의 color
를 orange
로 설정해 자식태그인 <p>
태그는 그대로 폰트컬러를 상속 받지만 <a>
태그는 상속받지 않는 것을 알 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
h1 {
color : orange
}
</style>
</head>
<body>
<h1>
<p>쓴 맛을 느끼는 미각은 유전된다.</p>
<a href="#">인생의 쓴맛도 유전일까?</a>
</h1>
</body>
</html>
user agent stylesheet에서 디폴트로 설정된 <a>
를 그대로 쓰는 경우는 거의 없다. 대부분의 경우 다른 태그와 마찬가지로<a>
태그도 스타일링된다. 이 때 <a>
는 css에서 제공하는 특수 범용 속성 값을 이용해 이미 부모태그에서 선언된 규칙을 그대로 상속받을수 있다.
선택한 요소에 적용된 속성 값을 부모 요소의 속성 값과 동일하게 설정한다.
선택한 요소에 적용된 속성 값을 브라우저의 기본 스타일 시트에서 해당 요소의 해당 속성에 설정된 값과 동일하게 설정한다. 브라우저의 기본 스타일 시트에서 값을 설정하지 않고 속성이 자연스럽게 상속되면 속성 값이 대신 inherit 되도록 설정된다.
속성을 natural 값으로 재설정한다. 즉, 속성이 자연적으로 상속되면 inherit 된 것처럼 작동하고 그렇지 않으면 initial 처럼 작동합니다.
revert 는 현재 엘리먼트에 선언 된 캐스캐이딩된 속성으로부터 style origin (en-US) 으로 되돌린다. 부모 속성 또는 user agent에 따라 default로 선언 된 속성으로 되돌리는 것이다. 이 속성은 css 단축 속성all을 포함한 어떤 속성에도 적용할 수 있다.
<a>
태그 역시 부모 요소의 속성을 강제로 상속받게 하는 키워드 inherit
을 사용해 부모 요소에게 선언된 속성을 가지고 올 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
h1 {
color : orange
}
a {
color : inherit;
}
</style>
</head>
<body>
<h1>
<p>쓴 맛을 느끼는 미각은 유전된다.</p>
<a href="#">인생의 쓴맛도 유전일까?</a>
</h1>
</body>
</html>
unset
키워드는 속성이 선언되어있지 않는 이상 해당 속성을 initial 상태로 만든다. 그래서 이 키워드를 이용해 이미 정의된 user agent stylesheet가 있는 태그를 리셋시키는 역할을 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
button {
all:unset;
}
</style>
</head>
<body>
<button>Button</button>
</body>
</html>
이렇게 all: unset;
을 사용하여 버튼을 reset 상태로 만들 수 있다.
revert 와 unset 은 비슷하지만 user agent style로 돌아가느냐 혹은 유저가 지정한 스타일로 돌아가느냐에 따라 그 속성을 달리한다.
unset은 부모 요소로부터 상속할 값이 존재하면 상속값을 적용 (inherit)하고, 부모 요소로부터 상속할 값이 존재하지 않는다면 초기 값을 적용 (initial) 하는 속성을 가진다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
h1 {
font-weight : normal;
color : green;
}
.revert {
all : revert;
}
.unset {
all : unset;
}
</style>
</head>
<body>
<h1 class="revert">revert</h1>
<h1 class="unset">unset</h1>
</body>
</html>
결과는 위와같다. revert는 user agent style에서 적용된 디폴트 상태로 돌아가며, unset은 natural 값으로 재설정된다.