CSS 스타일의 우선순위적용

웹 문서에 스타일시트에서는 '상속'의 개념과 css에 담겨 있는 '캐스케이딩'의 개념을 꼭 이해하고 넘어가는 것이 중요합니다.

스타일은 상속됩니다.

웹 문서에서 사용하는 여러 태그들은 서로 포함 관계를 가지고 있어 포함하는 태그는 부모 요소라고 하고, 포함된 태그는 자식 요소라고 합니다. 스타일시트에서는 부모 요소에 있는 속성들이 자식 요소로 전달되는데, 이것을 '상속'이라고 합니다.

결과화면을 보면 부모요소인 body 태그의 스타일이 자식 요소인 h2와 p 태그에도 그대로 적용되었습니다.
이것을 스타일 상속이라고 합니다. 부모 요소로부터 자식 요소로 단계별로 스타일이 적용되기 때문에, '계단식' 이라는 의미를 가진 '캐스케이딩'이라는 단어가 스타일시트를 수식하는 말로 붙게 된 것입니다.

1. 기본적으로 앞쪽에 선언된 스타일보다는 뒤에 선언된 스타일이 우선순위가 높습니다

2. !important > inline style attribute > id > 다른 attribut ex)input[name] input[checked] > tag element 순으로 우선순위가 높습니다.

3. 우선순위가 같다면 더 자세히 적은 ex) ul > li 보다는 div > ul > li 와 같이 하나라도 더표현된 CSS가 우선순위가 높습니다.

css 우선 순위를 파악하여 기존의 css를 덮어씌울 수 있습니다. 위의 규칙만 외우면 됩니다.