[css] 선택자 상속

22 Dec 2023

CSS(Cascading Style Sheets)는 HTML 요소에 스타일을 적용하는데 사용되는 스타일 시트 언어입니다. CSS 선택자는 HTML 요소를 대상으로 특정 스타일을 적용하는 방법을 지정합니다.

선택자 상속은 하위 요소가 상위 요소로부터 스타일을 상속하는 과정을 의미합니다.

예를 들어, 아래와 같은 HTML 구조가 있다고 가정해봅시다.

<!DOCTYPE html>
<html>
<head>
  <style>
    .parent {
      color: blue;
    }
  </style>
</head>
<body>
  <div class="parent">
    <p>이 요소는 파란색으로 표시됩니다.</p>
  </div>
  <p>이 요소는 어떤 색으로 표시될까요?</p>
</body>
</html>

‘parent’ 클래스가 적용된 div 요소 내에 있는 p 요소는 부모 요소로부터 color 스타일을 상속받아 파란색으로 표시됩니다. 하지만 body 내에 있는 p 요소는 부모 요소의 스타일을 상속받지 않으므로 브라우저의 기본 스타일에 따라 표시됩니다.

이렇게 CSS 선택자 상속을 이용하면, HTML 요소들 간의 스타일 상속을 관리하고 적용할 수 있습니다.

결론

CSS 선택자 상속은 HTML 요소들 간의 스타일을 효과적으로 관리하고 적용하는 방법을 제공합니다. 상위 요소의 스타일을 하위 요소로 쉽게 전파할 수 있어서 코드의 재사용성을 높여줍니다.

더 많은 정보를 원하시면, MDN web docs를 참고하시기 바랍니다.