텍스트에 빨간색이 적용됩니다. 텍스트를 직접 감싸는 p 태그에 적용한 스타일이 아닌데도 텍스트에 스타일이 적용된 이유가 무엇일까요? 이러한 현상이 바로 CSS의 상속이라는 특징입니다.
p 태그에는 color 속성이 없지만, p 태그의 부모인 div 태그는 color 속성이 있습니다. 이럴 때 자식인 p 태그는 부모인 div 태그의 스타일을 그대로 물려받습니다. 그래서 그림과 같은 결과가 나오게 됩니다.
이처럼 CSS 속성은 상속됩니다. 여기서 하나 더 알아 둘 건 모든 속성이 전부 상속되지는 않는다는 점입니다. 상속되는 속성이 있고 안 되는 속성이 있지만, 이를 구분해서 외울 필요는 없습니다. 단지 CSS 속성은 상속됨을 아는 것이 중요합니다.
TIP | 상속되는 속성과 안 되는 속성이 궁금하다면 https://www.w3.org/TR/CSS21/propidx 사이트를 참고하기 바랍니다. 해당 사이트에서 Inherited? 열의 값이 yes인 속성만 상속됩니다.