CSS inherit (상속)

body에 font-family를 한 번 지정했을 뿐인데 페이지의 모든 글자가 바뀝니다. 반대로 분명 부모에 색을 지정했는데 링크만 파란색 그대로일 때도 있습니다.
이 두 현상의 원인이 같습니다. 바로 CSS 상속입니다.

상속이란

조상, 부모가 가진 속성을 자식, 자손이 물려받는 것을 상속이라고 합니다.
상속이 되는 속성은 주로 글씨 관련 속성들입니다.

상속이 되는 속성

font-family
font-size
font-weight
line-height
letter-spacing
text-align
color

부모·조상 요소에 설정한 font-size, letter-spacing, line-height, color 등은 자식 요소인 span, p, a로 자동으로 전달됩니다. 그래서 텍스트 속성은 요소마다 일일이 지정하지 않고, body 같은 공통 조상에 한 번 지정합니다. 프리텐다드 웹폰트를 body에 적용하는 이유가 바로 이것입니다. (상위 조상인 body에 적용하면 모든 자손 요소가 상속 받으므로.)

반대로 width, height, background, border 같은 박스 관련 속성은 상속되지 않습니다. 부모에 배경색을 넣었을 때 자식이 같은 색으로 보이는 건 상속이 아니라 자식 배경이 투명해서 부모가 비쳐 보이는 것입니다.

상속의 예외 - 기본 스타일을 가진 요소들

예외적으로, 기본 스타일을 갖고 있는 요소의 경우 이 상속을 무시합니다.

<body>
    <div>
        <span>상속되는 span 요소입니다.</span>
        <p>상속되는 p 요소입니다.</p>
        <a href="#">color빼고 상속되는 a요소입니다.</a>
        <h1>font-size빼고 상속되는 h1요소입니다.</h1>
        <button>상속이 안되는 button 요소입니다.</button>
    </div>
</body>

body에 글씨 속성을 지정하고 브라우저에서 확인하면 요소마다 결과가 다릅니다.

span, p — 전부 상속받습니다.
a — color만 빼고 상속받습니다. 링크는 브라우저가 파란색+밑줄이라는 기본 스타일을 갖고 있어서, 부모의 색이 아닌 자기 기본색을 유지합니다.
h1 — font-size만 빼고 상속받습니다. 제목 태그는 자체 크기(h1은 32px)를 기본으로 갖고 있기 때문입니다.
button — 글씨 속성이 상속되지 않습니다. 폼 요소는 운영체제/브라우저의 기본 UI 스타일을 따르도록 만들어져 있어서, body에 폰트를 지정해도 버튼만 다른 글꼴로 보이는 현상이 생깁니다.

"body에 폰트를 적용했는데 버튼이랑 입력창만 안 바뀌어요"는 초보 단계의 단골 질문인데, 버그가 아니라 이 예외 때문입니다.

예외를 덮어쓰는 방법

특정 요소의 텍스트 속성을 별도로 설정하고 싶다면, 직접 선택해 설정하면 됩니다.

p {
    font-size: 30px;
}
a {
    color: inherit;   /* 부모(조상)의 색을 상속받으렴! */
}
button {
    font-family: inherit;   /* 부모(조상)의 글꼴을 상속받으렴! */
}

직접 선택한 스타일이 상속보다 우선됩니다. 그리고 inherit이라는 값을 쓰면 "기본 스타일을 무시하고 부모 것을 물려받아라"라고 명시할 수 있어서, a의 색이나 button의 글꼴을 부모와 통일할 때 자주 씁니다.

개발자도구로 요소를 검사해 Styles 탭을 보면, 상속받은 속성은 "Inherited from body" 같은 표시와 함께 회색으로 구분되어 나옵니다. 어떤 속성이 어디서 왔는지 눈으로 확인하는 가장 확실한 방법입니다.

#CSS상속 #inherit #상속되는속성 #a태그색변경 #button폰트 #fontfamily #CSS기초 #웹퍼블리싱 #프론트엔드 #코딩독학

CSS 상속이란? 상속되는 속성과 예외(a 태그 색, h1 크기, button)까지

CSS inherit (상속)

상속이란

상속의 예외 - 기본 스타일을 가진 요소들

예외를 덮어쓰는 방법