CSS에서의 상속이란?
어떤 요소가 부모 요소의 스타일을 상속받는 걸 말한다.
// html
// css
여기서 body는 h1의 간접적인 부모라는걸 알 수 있다. 개발자 도구를 열어서 h1 태그를 클릭 후 맨 아래로 내려보면 이렇게 누구의 상속을 받고 있는지 나와있다. 이전 글에서 개발자 도구의 css는 명시도가 높은 순서로 뜬다고 언급했었다. 상속은 맨 아래에 있으므로 명시도가 굉장히 낮다는 걸 알 수 있다. 따라서 h1 태그의 font-family가 우선으로 적용되어 현재 글씨체는 protest-guerrilla이다.
상속이 명시도가 낮다는 걸 외울 필요는 없다. 간단히 생각해보자. 선택자는 특정 요소의 스타일을 '직접' 선택한 것이다. 상속은 부모에게 물려받는 것이므로 '간접'적으로 적용되는 스타일이다. 따라서 직접 선택한 쪽이 더 명시도가 높을 수밖에 없다.
따로 글씨체 속성을 지정해주지 않은 p 태그를 추가해봤다.
body의 font 속성을 상속받고 있다.
개발자 도구 속성 위에 마우스를 올리면 저렇게 체크 박스가 뜨는데, 체크를 해제하면 해당 속성이 적용되지 않은 버전을 볼 수 있다. 또한 더블클릭으로 속성 값을 변경해볼 수 있으며 속성 추가도 가능하다. 일일이 IDE에서 수정하고 재실행하지 않아도 css를 바꿔볼 수 있다. 새로고침하면 모두 사라지니 마음놓고 바꿔보자.
전체 페이지에서 일부만 특정 폰트로 바꾸고, 나머지는 모두 같은 폰트로 통일하고 싶은 경우에 상속은 매우 유용한 기능이다.
위의 코드에서 p태그를 h1 태그로 바꿔봤다. 두 문구는 모두 h1 선택자에 있는 폰트 스타일을 사용하고 있다. 이 때, section-title 선택자가 body 선택자의 폰트 속성을 상속받게 하려면 어떻게 해야할까? h1 선택자의 속성을 바꾸면 두번째 문구에 영향을 미친다. 따라서 다른 방법을 찾아야한다.
section-title 선택자에 font-family: inherit; 라는 특수 키워드로 상속된 스타일을 사용할 수 있다. 특정 속성에 대한 상속 명시도를 증가시키는 작업이다. 상속 키워드를 추가하고 개발자 도구를 열어보자. 적용이 안된 것처럼 이렇게 줄이 그어져있으나 body 선택자의 font-family가 적용된 상태이다.
하지만 이렇게 특정 선택자만 body를 상속받게 하는건 좋은 방법이 아니다. 만약 body의 폰트를 사용하려는 클래스가 추가로 생긴다면, 해당 클래스 선택자에도 inherit를 추가해줘야하는 번거로움이 있기 때문이다. 100개의 선택자 중에서 기본 폰트가 필요한 선택자가 80개라면 어떻게 될까? 80개의 선택자에 inherit를 추가해줘야한다. 따라서, 반대로 기본 폰트(body 선택자)를 디폴트로 하고 다른 폰트를 사용하는 선택자들만 바꿔주는 게 더 좋다.
'나도 공부한다 > CSS' 카테고리의 다른 글
| CSS의 기본 (0) | 2025.01.11 |
|---|---|
| CSS 기초 다지기 - 2. 폰트 변경하기 (0) | 2024.02.03 |
| CSS 기초 다지기 - 1. CSS 추가하기 (0) | 2024.02.03 |
