CSS의 상속(Inheritance)

이번 포스팅에서는 CSS에서 상속의 개념과 기본적으로 CSS 상속을 어떻게 활용하는지 알아보겠습니다.

CSS의 상속

CSS에도 다른 프로그래밍 언어들처럼 상속(Inheritance)이라는 개념이 있는데요. 하위 엘리먼트에서 어떤 CSS 속성을 명시하지 않은 경우, 기본적으로 상위 엘리먼트에 적용된 스타일이 하위 엘리먼트에도 적용되는 것을 뜻합니다.

예를 들어, 다음와 같은 간단한 HTML 코드를 예를 들어 생각해보겠습니다.

<section>
  인사말
  <p><strong>홍길동</strong>님, 안녕하세요!</p>
</section>

여기서 section 태그의 color 속성을 설정해주는 스타일 적용하면 어떻게 될까요?

section {
  color: blue;
}

파란 글자색이 <section/> 엘리먼트 뿐만 아니라 그 내부의 <p/> 엘리먼트 그리고 또 그 내부의 <strong/> 엘리먼트까지 적용된 것을 볼 수 있습니다.

만약에 color 속성이 상위 엘리먼트로 부터 하위 엘리먼트로 자동으로 상속이 되지 않았다면 어땠을까요?

다음과 같이 일일이 모든 하위 엘리먼트에 동일한 스타일을 적용해줘야 했을 것입니다. 😦

section {
  color: blue;
}

p {
  color: blue;
}

strong {
  color: blue;
}

상속이 되지 않는 속성

color 속성처럼 CSS에서 모든 속성이 상위 엘리먼트로 부터 하위 엘리먼트로 자동으로 상속이 되는 것은 아닙니다.

예를 들어, section 태그의 border 속성을 설정해보겠습니다.

section {
  border: blue solid;
}

파란색의 경계선이 <section/> 엘리먼트에만 적용된 것을 볼 수 있습니다.

만약에 동일한 border 속성이 <section/> 엘리먼트 뿐만 아니라, <p/> 엘리먼트와 <strong/> 엘리먼트에도 적용되었다면 어땠을까요?

다음과 같이 일일이 모든 하위 엘리먼트에 적용된 스타일을 제거해줘야 했을 것입니다. 😖

section {
  border: blue solid;
}

p {
  border: unset;
}

strong {
  border: unset;
}

inherit 키워드: 강제 상속

CSS를 사용하다보면 상속받지 않은 스타일 규칙을 강제로 상위 컴포넌트로 부터 상속되도록 하고 싶을 때가 있습니다.

대표적으로 <a/> 엘리먼트의 글자색을 주변 엘리먼트의 글자색과 동일하게 설정하고 싶을 때를 들 수 있습니다. <a/> 엘리먼트에는 브라우저의 내장 스타일(user agent stylesheet)이 적용되어 보통 방문 전에는 파란색, 방문 후에는 보라색 글자로 표시가 됩니다. 이러한 브라우저의 내장 스타일은을 실제 웹사이트에서 그대로 사용하기에는 디자인이 너무 투박하고 도드라져 보입니다. 이럴 경우, 다음과 같이 a 태그의 color 속성을 inherit 키워드로 설정해주면 됩니다.

<section>
  인사말
  <p><a href="#">홍길동</a>님, 안녕하세요!</p>
</section>

a {
  color: inherit;
}

마치면서

그 많은 CSS 속성 중에서 어떤 것이 자동으로 상속되고 어떤 것이 자동으로 상속이 되지 않는지를 일일이 기억하려고 애쓸 필요는 없습니다. 하지만 color 속성이 자동 상속되고, border 속성이 자동 상속이 되지 않는 것은 어찌보면 개발자 입장에서 상당히 합리적인 CSS의 알고리즘입니다. 대부분의 경우, CSS 속성의 자동 상속 여부는 기본적으로 개발자들이 CSS 작성하기 편하도록 고려되어 설계되어 있기 때문에 시간이지나면 자연스럽게 채득이 됩니다.

CSS의 상속에 대한 좀 더 자세한 내용은 아래 관련된 MDN 레퍼런스를 참고 바라겠습니다.

• MDN Inheritance
• MDN inherit