CSS 상속

CSS에서 이루어지는 상속에 대해 알아보자.

상속(Inheritance)이란?

CSS 상속은 부모 요소에 적용된 스타일 속성이 자식 요소에게 전달 되는 것을 말한다.
부모의 속성을 자식이 상속받고, 자식은 해당 속성을 또 그 자식에게 상속한다.
스타일이 HTML 문서의 구조에 따라 흘러내리는 방식으로 적용된다.
이러한 상속을 통해서 전체적인 디자인의 일관성을 유지하면서도 코드의 중복을 줄일 수 있다.

상속 가능한 스타일

CSS의 모든 속성이 상속이 가능한 것은 아니다.
일반적으로 텍스트와 관련된 속성들(color, font-family, font-size 등)은 상속이 되지만
레이아웃과 관련된 속성들(width, height, margin, padding 등)은 상속되지 않는다.

color

p 태그 안에 들어있는 span 태그는 p 태그의 색상에 영향을 받는다.

<p style="color:red">p 태그 안에 들어있는 <span>span 태그</span>는 p 태그의 색상에 영향을 받는다.</p>

font-family

p 태그 안에 들어있는 span 태그는 p 태그의 폰트에 영향을 받는다.

<p style="color:serif">p 태그 안에 들어있는 <span>span 태그</span>는 p 태그의 폰트에 영향을 받는다.</p>

font-size

p 태그 안에 들어있는 span 태그는 p 태그의 스타일에 영향을 받는다.

<p style="font-size: 10px">p 태그 안에 들어있는 <span>span 태그</span>는 p 태그의 스타일에 영향을 받는다.</p>

font-weight

p 태그 안에 들어있는 span 태그는 p 태그의 스타일에 영향을 받는다.

<p style="font-weight: 700">p 태그 안에 들어있는 <span>span 태그</span>는 p 태그의 스타일에 영향을 받는다.</p>

text-decoration

p 태그 안에 들어있는 span 태그는 p 태그의 스타일에 영향을 받는다.

<p style="font-weight: 700">p 태그 안에 들어있는 <span>span 태그</span>는 p 태그의 스타일에 영향을 받는다.</p>

그 외

텍스트

font-style, line-height, letter-spacing, word-spacing, text-align, text-indent, text-transform, white-space, direction, unicode-bidi, text-shadow, font-variant

리스트

list-style-type, list-style-position, list-style-image
(단, display: list-item은 상속되지 않는다)

테이블

border-collapse, border-spacing (단, border 자체는 상속되지 않는다)

커서

cursor

가시성

visibility

기타

quotes, orphans, widows, tab-size

상속 제어

상속을 제어하기 위해 사용하는 속성을 알아보자.
상속되는 속성을 받지않고 초기값을 갖도록 하거나, 상속되지 않는 속성을 상속받을 수 있다.

일부 상속 제어

특정한 속성을 상속 제어하기 위해 사용하는 방법이다.

inherit

선택한 요소에 적용된 속성값을 부모와 동일하게, 즉 상속받게 할 수 있다.
주로 상속되지 않는 속성을 강제로 상속받게 할 때 사용한다.

p 태그 안에 들어있는 a 태그는 p 태그의 글씨 색을 상속 받지 않는다. 상속 받게 하고싶다면 a 태그의 해당 속성에 inherit 값을 사용한다.

<p style="color: yellowgreen">p 태그 안에 들어있는 <a>a 태그</a>는 p 태그의 글씨 색을 상속 받지 않는다.
  상속 받게 하고싶다면 <a style="color:inherit">a 태그</a>의 해당 속성에 inherit 값을 사용한다.</p>

initial

요소의 모든 속성을 각 속성의 초기값으로 변경한다.
이때 초기값은 브라우저에서 제공하는 사용자 에이전트 스타일이 아닌 CSS 명세에서 작성된 속성의 초기값을 말한다.

• 첫번째
• 두번째
• 세번째

<ul style="list-style: none">
  <li>첫번째</li>
  <li>두번째</li>
  <li style="list-style: initial">세번째</li>
</ul>

unset

해당 속성이 자연적으로 상속되는 속성이면 inherit처럼, 아니면 initial처럼 동작한다.

<style>
  .parent-box {
    border: 2px solid green; /* 초록색 테두리 */
    color: blue;            /* 파란색 글자 */
    padding: 20px;
  }
  .child-text {
    /* 이 텍스트는 부모의 스타일을 상속받습니다. */
    font-size: 1.2em;
  }
  .child-unset {
    /* 여기에 unset 속성을 적용합니다. */
    color: unset;
    border: unset;
  }
</style>
<div class="parent-box">
  이것은 **부모 요소**입니다. 글자 색상은 파란색, 테두리는 초록색입니다.
  <p class="child-text">이것은 자식 요소입니다. 부모의 스타일을 상속받아 **파란색 글자**로 보입니다.</p>
  <p class="child-unset">이것은 자식 요소에 **`unset`**을 적용했습니다.</p>
</div>

revert

스타일 규칙이 없었을 때 적용되었을 상태로 복구한다.

이것은 평범한 링크입니다. 개발자가 지정한 대로 **초록색**으로 보입니다.

이것은 강조된 텍스트입니다. 개발자가 지정한 대로 **굵지 않게** 보입니다.

---

이것은 revert가 적용된 링크입니다.
개발자가 설정한 초록색 대신, **브라우저의 원래 스타일인 파란색**으로 돌아갑니다.

이것은 revert가 적용된 볼드체입니다.
개발자가 설정한 굵기 대신, **브라우저의 원래 스타일인 굵게**로 돌아갑니다.

<style>
  /* 1. 개발자가 링크의 색상을 변경함 */
  a {
  	color: green; /* 링크를 초록색으로 변경 */
  }

  /* 2. 개발자가 볼드체의 스타일을 변경함 */
  b {
  	font-weight: normal; /* b 태그를 굵지 않게 만듦 */
  }

  /* 3. revert를 사용하여 원래 브라우저 스타일로 되돌림 */
  .revert-a a {
  	color: revert;
  }

  .revert-b b {
  	font-weight: revert;
  }
</style>
<p>이것은 <a href="#">평범한 링크</a>입니다. 개발자가 지정한 대로 **초록색**으로 보입니다.</p>
<p>이것은 <b>강조된 텍스트</b>입니다. 개발자가 지정한 대로 **굵지 않게** 보입니다.
</p>
<hr>
<p class="revert-a">이것은 <a href="#">revert가 적용된 링크</a>입니다.<br>
개발자가 설정한 초록색 대신, **브라우저의 원래 스타일인 파란색**으로 돌아갑니다.</p>
<p class="revert-b">이것은 <b>revert가 적용된 볼드체</b>입니다.<br>
개발자가 설정한 굵기 대신, **브라우저의 원래 스타일인 굵게**로 돌아갑니다.
</p>

전체 상속 제어

all 속성에 위 값을 이용하여 전체적인 상속을 제어할 수 있다.
all 속성을 지정한 후에 작성한 스타일은 제어되지 않는다.

전체 상속 제어

Click me

<style>
  section {
    color: royalblue;
    border: 2px solid red;
    font-size: 18px;
    padding: 20px;
  }

  button {
    background-color: red;
    border: inherit;
    color: initial;
    font-size: unset;
    /*all: inherit;*/
    all: revert;
  }
  </style>
  <section>
    <h2>전체 상속 제어</h2>
    <button>Click me</button>
  </section>