상속과 우선순위 결정

• 들어가기 전에
  

CSS 스타일을 적용하는 것에는 여러가지 이유로 몇 가지 규칙이 존재한다. 상속은 대표적인 CSS 적용 규칙인데 중복된 속성을 매번 적용해야하는 일을 줄일 수 있다.

• 학습 목표

1. CSS 상속의 특징과 상속이 되지 않는 상황에 대해서 이해해보자.

• 핵심 개념

- CSS 상속

- 선택자 우선순위 (CSS Specificity)

• CSS 상속

- 상위에 설정된 스타일을 하위에서도 쓴다 : 재사용 측면에서 효율성 good

- box-model이라고 불리는 속성(width, height, margin, padding, border)과 같이 크기와 배치에 관련된 속성은 상속을 받지 않음

• Cascading

- CSS는 여러가지 스타일정보를 기반으로 최종적으로 '경쟁'에 의해서 적절한 스타일이 반영된다.

· 경쟁 : 똑같은 속성을 CSS 파일에서 설정, 정의를 했을 때 최종적으로 어떤 스타일을 반영할 것인지

- 선언 방식에 따른 차이 : inline > internal >= external

· internal과 external은 같은 우선순위를 가진다.

- 동일한 경우에는 나중의 스타일이 적용됨

- 구체적으로 표현된 것에 먼저 우선해서 적용됨

· body > span (O)

· span (X)

- id가 class보다 우선적으로 적용됨

· #a (O)

· .b (X)