[코드잇 스프린트 풀스택 4기] CSS의 Cascading이란?

CSS는 웹문서에 스타일을 적용한다.
이 과정에서 같은 요소에 적용되는 스타일은 여러 가지 이유로 충돌이 발생할 수 있다.
이럴때 일정한 우선 순위를 두고 스타일이 적용되는데 이를 cascading이라고 한다.

cascading은 중요도, 명시도, 코드 작성 순서에 의해 결정된다.

1. 중요도
- CSS를 어디에 선언했는지를 의미한다. 
- 크게 사용자 스타일, 작성자 스타일, 브라우저 스타일로 나눌 수 있다.
- 브라우저 스타일은 크롬이나 사파리 등의 브라우저가 기본으로 갖고 있는 스타일을 의미하며
- 작성자 스타일은 웹 문서를 만드는 사람이 설정한 스타일을 의미한다. (html파일내 style 또는 css파일)
- 사용자 스타일은 사용자가 컴퓨터내에서 설정한 스타일 옵션을 의미한다.
- 사용자 스타일 > 작성자 스타일 > 브라우저 스타일의 순서로 우선 순위가 적용된다. (사용자 스타일이 가장 우선적으로 적용됨)

2. 명시도
- 스타일을 적용하는 범위를 말하며 보통 범위가 좁을 수록 우선 순위가 높다고 보아도 된다.
- 명시도는 아래와 같은 순서에 의해 적용된다. (숫자가 작을 수록 우선 적용)
1. !important( .class명 { color: #fffff !important;} 와 같이 적용
2. inline : html파일의 태그 내에 stytle속성으로 적용
3. id: #으로 정의된 선택자에 적용. 문서내에 1개박에 없으므로 class보다 우선
4. class: . 으로 정의된 선택자에 적용.
5. 태그 선택자: p, img 등의 태그에 적용.
6. 상속: 부모의 스타일이 자식 요소에 적용.

3. 코드 작성 순서
- 1,2번의 중요도와 명시도가 같을 경우 코드 작성 순서에 따라 우선 순위가 결정되는데
- 나중에 작성한 코드의 우선 순위가 높다. (같을 경우 덮어써진다고 생각하면 된다)