[1주차] CSS Cascading

Cascading은 기본적으로 "폭포, 위에서 아래로 떨어지는" 이라는 뜻을 가진다.

CSS에서의 Cascading

CSS의 맨 앞 글자의 의미이기도 하듯이 가장 중요하게 적용되는 원리이다.

< Cascading >
같은 요소에 대해 여러 스타일이 중복되는 경우의 어떤 스타일을 기준으로 적용할지 결정하는 규칙
"스타일 우선순위"와 "스타일 상속"을 기반으로 규칙을 설정

• 스타일 우선순위
  스타일 요소는 우선순위를 가지고 있는데, 우선순위에 따라서 적용되는 스타일이 결정된다.

<우선순위 결정 기준> 
1. 중요도
    스타일을 선언한 주체(작성자, 사용자, 사용자 도구)에 따라 우선순위를 설정 
    작성자 > 사용자 > 사용자 도구 순서로 결정 (!important를 사용해 최우선순위 설정 가능)
2. 명시도
    셀렉터가 가리키는 것이 명확할 수록 우선순위를 높게 부여
    인라인 > id > class > 태그 순서로 결정
3. 코드 순서
    가장 마지막에 작성한 속성을 최우선으로 적용

• 스타일 상속
  말그대로 태그의 부모 요소로부터 자식 요소로 스타일을 "상속"하는 개념

<div style='color: red;'>
    <p>example word1</p>
    <div><p>example word2<p><div>
</div>

-> 위의 경우 부모의 스타일인 'color: red'를 자식 요소가 그대로 물려받는다.