CSS 상속

CSS 상속은 특정 HTML 요소에 적용된 스타일(예: 글꼴, 색상)이 그 요소의 자식 요소에도 자동으로 적용되는 것을 의미합니다.
예를 들어, <div>에 적용된 글꼴 스타일은 그 <div> 내부의 <p>, <span> 등의 요소들에도 적용됩니다.

모든 속성이 상속되지 않음

예를 들어, margin, border, padding, width, height와 같은 박스 모델 속성은 상속되지 않습니다.
이는 상위 요소에 적용된 레이아웃이나 위치 관련 스타일이 자식 요소에 영향을 미치지 않는다는 것을 의미합니다.

상속 방지

개발자는 inherit 키워드를 사용하여 상속을 강제할 수 있지만, initial이나 unset 키워드를 사용하여 상속을 방지할 수도 있습니다.
이러한 속성을 사용함으로써 개발자는 특정 요소에 대해 상속을 무시하고 기본값을 적용할 수 있습니다.

 

상속의 오버라이딩

자식 요소에 별도의 스타일이 지정되어 있으면, 해당 스타일은 부모 요소로부터 상속받은 스타일을 덮어씁니다.
이는 더 구체적인 선택자 또는 인라인 스타일을 통해 쉽게 이루어질 수 있으며, 이는 예상치 못한 스타일 변화를 초래할 수 있습니다.

 

상속과 특정성(Specificity)

 

상속된 스타일은 CSS의 특정성 규칙에 의해 덮어쓰일 수 있습니다. 특정성이 더 높은 규칙이 적용될 경우, 상속된 스타일은 무시됩니다.
이는 복잡한 스타일 시트에서 예상치 못한 스타일 문제를 일으킬 수 있습니다.

 

사용자 에이전트 스타일시트

브라우저의 기본 스타일(사용자 에이전트 스타일시트) 때문에 상속된 스타일이 예상과 다르게 적용될 수 있습니다.
각 브라우저는 기본 스타일을 가지고 있으며, 이는 상속에 영향을 미칠 수 있습니다.