• 들어가기 전에 CSS의 스타일을 적용하는 것에는 여러가지 이유로 몇 가지 규칙이 존재합니다. 상속은 대표적인 CSS 적용 규칙인데 중복된 속성을 매번 적용해야 하는 일을 줄일 수 있습니다. 얼마나 효율적인 규칙인지 알아보겠습니다.

---

1. CSS 상속의 특징과 상속이 되지 않는 상황에 대해서 이해합니다.

• CSS 상속
• 선택자 우선순위(CSS Specificity)

상위에서 적용한 스타일은 하위에도 반영됩니다. 이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 됩니다. 이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 됩니다. 하지만 모든 CSS 속성이 이런 특징을 갖게 되면, 몇 가지 문제가 생깁니다. 예를 들어 width 속성이 상속되면 하위 엘리먼트가 모든 같은 크기의 넓이값을 가질 수 있습니다. 이런 것은 원하는 것은 아니죠. 그래서 box-model이라고 불리는 속성등(width, height,margin,padding,border)과 같은 크기와 배치 관련된 속성들은 하위엘리먼트로 상속이 되지 않습니다. 이렇게 CSS는 꽤 똑똑한 방식으로 동작합니다. 아직 혼란스러운 부분이 있다면, 여러분들이 중첩된 엘리먼트를 만들고, CSS속성을 부여하면서 이 특징을 잘 이해해보면 좋습니다.

`

<style>div { color:red; }</style> ` 만약 css.css에서 div color를 blue로 주었다면, 뒤에 선언된 external 방식의 css 내용이 반영됩니다. 따라서 blue색깔로 나오겠죠. 즉 internal과 external은 같은 우선순위로 결정된다고 아셔야 합니다. CSS는 여러가지 스타일정보를 기반으로 최종적으로 '경쟁'에 의해서 적절한 스타일이 반영된다는 점을 잘 기억해야 합니다.

`

`

` #a{ color : red; }

.b{ color : blue; }

div{ color : green; } ` 위 코드에서 id, class, 엘리먼트 순으로 우선순위를 가집니다. id는 클래스보다 우선되고 클래스는 엘리먼트보다 우선됩니다. 위 코드에서는 id인 a의 색상이 적용되게 됩니다. CSS의 이런 성질을 캐스캐이딩이라고 합니다.

같은 선택자(selector)라면 나중에 선언한 것이 반영됩니다. 선택자의 표현이 구체적인 것이 있다면 먼저 적용됩니다.

• body > span(O)
• span(X)

만약h1태그가 div > p > h1 구조로 HTML으로 짜여있다고 가정하면, 아래에 색깔 중 h1이 가진 색깔은 어떤 것일까요? 여러분들이 실험을 통해서 그 결과를 확인해보세요. jsbin과 유사한 사이트를 하나 더 알려드릴게요. 이번에는 codepen.io라는 사이트를 이용해서 테스트해보세요.

1. class는 우선점수가 10점, id는 100점이라고 표현했습니다. 그런데 class가 11개라면 어떻게 될까요? id보다 우선순위가 높을까요? 실제로 그렇지 않습니다. 이 현상은 올림픽순위가 금메달의 갯수를 통해 우선결정되는 것과 비슷한데요. id는 금메달, class는 은메달, tag는 동메달로 이해하는게 편합니다.