[2023.03.02] 4. CSS 상속

🔍CSS 상속에 대한 개념을 정리해보자.

 

 

상속(Inheritance)

 

• CSS에는 상속되는 속성이 있고, 상속되지 않는 속성이 있다.

See the Pen Untitled by astinaus (@astinaus) on CodePen.

 

• section 의 color 속성이 자식인 h1, h2, p에게 상속된 것을 확인할 수 있다.
• width, height, margin, padding, border 같은 속성은 상속되지 않는다.
• inherit: 선택한 요소에 적용된 속성값을 부모와 동일하게, 즉 상속받게 한다.
• initial: 브라우저 기본 스타일 속성을 따르게 한다.
• unset: 속성을 자연 값으로 한다. 자연적으로 상속되면 inherit 또는 initial처럼 작동한다.
• button, input같은 form 관련 태그들은 상속받지 않기도 한다.
  -> 브라우저별로 적용된 스타일이 있기 때문.