css 속성이 적용되는 순서가 있다.

우선 순위를 적용할 땐 중요도, 명시도, 선언 순서라는 3가지 기준이 있다.

이것들이 복잡하게 연결돼서 순위를 매긴다.

!important를 제외 하고는,

얼마나 선택자를 자세히 쓰는지 css와 html 문서 간의 거리가 얼마나 가까운지에 따라 높은 순위를 가진다.

보통은 중요도 > 명시도 > 선언 순서 순으로 따지지만 예외는 있다.

중요도는 css와 html 문서간의 거리를 따진다. 여기서 거리란, 위에서 아래 순을 말한다.

css가 아래쪽에 존재할수록 우선 순위가 높아진다.

순위	위치	설명
1	인라인 스타일	- 태그 안에 css를 작성하는 방식. - 20210803:과제01 링크 참고.
2	<style> css	- head 안 style 태그 안에 작성하는 방식.
3	<style> @import	- 스타일 태그에 내부에 연결한 외부 css. - 위에서 아래로 갈수록 우선 순위가 높다. - 임포트 아래에 작성하는 css 보단 순위가 낮다.
4	<link> css	- head 안에 외부 css 파일을 연결하는 방식. - 위에서 아래로 갈수록 우선 순위가 높다.
5	<link> @import	- head에 연결한 css 파일 안에 외부 css를 이중 연결한 것. - 위에서 아래로 갈수록 우선 순위가 높다. - 임포트 아래에 작성하는 css 보단 순위가 낮다.
6	브라우저 디폴트 stylesheet	- 브라우저가 기본으로 제공하는 css. - 가장 순위가 낮다.

명시도는 선택자에 따라 달라진다.

보다 명확하고 타겟 범위가 좁은 선택자를 쓸 수록 우선 순위가 높아진다.

중요도와는 다르게 선언 순서가 고려되지 않을 수도 있다.

순위	선택자	설명
1	!important	- 우선 순위가 가장 높다. - 중요도까지 무시하고 가장 먼저 적용되는 게 특징. - 임시적으로만 쓰는 게 좋다.
2	id	- 태그에 특정 이름을 붙여 부르는 방식. - 이름 하나당 html에서 딱 한 번만 쓸 수 있다.
3	가상 클래스, 속성 선택자	- 엄밀히 따지면 일반 클래스와 순위가 같지만 가상, 속성 클래스는 보통 단독으로 쓰지 않기 때문에 class보다 먼저 적용되는 편이다.
4	class	- 태그에 특정 이름을 붙여 부르는 방식. - 이름마다 중복 사용이 가능하기 때문에 타겟 범위가 넓다.
5	태그 선택자	- 태그 이름을 선택자로 쓰는 방식. - 명시도가 낮아 초기화 코드를 작성하는 데 쓰인다.
6	*	- 전체 선택자. - 모든 태그를 선택하기 때문에 명시도가 가장 낮다.