1. 상속 (Inheritance)

상속Inheritance이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손)요소가 물려받는 것을 의미한다.

상속 기능의 필요성

• 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 지정해야 한다.

프로퍼티 별 상속 여부

• 프로퍼티 중에는 상속이 되는 것과 되지 않는 것이 있다.

요소 별 상속 여부

• 어떤 요소이냐에 따라서도 상속 여부가 다르다.
• 예를 들어, color 프로퍼티는 텍스트를 나타내는 태그들(p, h1 등)에게는 상속되지만, button 태그에는 상속되지 않는다.

inherit 키워드

• 강제로 부모 속성의 값을 상속받게 하려면 inherit 키워드를 해당 프로퍼티의 값으로 지정해주면 된다.
  • 예를들어 위에서 button은 color 프로퍼티를 상속하지 않는다고 했는데, color: inherit; 이렇게 해주면 상속이 되는 것이다.

2. 캐스캐이딩 (Cascading)

한 요소는 하나 이상의 CSS선언에 영향을 받을 수 있다. 이럴 때 충돌을 피하기 위한 CSS 적용 우선순위를 캐스캐이딩 순서(Cascading Order)라고 한다.

Cascading Order의 세가지 규칙:

1. 중요도
   1. CSS가 어디에 선언되어 있는지에 따라서 우선순위가 달라진다.
2. 명시도
   1. 대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아진다.
3. 선언순서
   1. 선언된 순서에 따라 우선순위가 달라진다 ⇒ CSS에서는 나중에 선언된 스타일이 우선 적용된다.