1. CSS 파일의 우선 적용 순위
CSS를 적용 할때 해당 내용들이 중첩 되었을 경우, 우선 순위에 따라 -> 브라우저 내 사용자 설정(1) -> 개발자 스타일 시트(2) -> 기본적으로 지정된 HTML(3) 순으로 지정이 됩니다.
프론트 엔드 개발을 하는 우리들의 입장에서 보자면, 우리가 적용하는 CSS 스타일은 개발자 스타일 시트인데요. 이 경우 우선 순위는 link태그 CSS(1) < style 태그 CSS(2) < 태그 내에 작성하는 인라인 스타일CSS(3) 순으로 그 중요도가 결정 되는데요, CSS의 중요도는 다음과 같이 정리 할 수 있습니다.
- 사용자가 브라우저에서 세팅한 CSS 설정(사용자 임의 정의)
- 시작 태그 내 인라인 스타일로 지정한 CSS 속성
- style 태그 내 CSS 직접 지정
- link 태그의 CSS 파일 연결
- 브라우저에서 기본적으로 지정되는 스타일 시트(HTML 영역)
2. 같은 영역 내 캐스케이딩 우선 순위
CSS 파일 내 우선 순위에 대해서는 해당 태그를 선택하는 부분에 대해서 구체적인지에 따라 우선순위를 두는데요.
이게 무슨 말이냐면 특정 태그에 CSS를 적용할 때 ID 선택자를를 이용하는 것이 일반 태그나 클래스 선택자를 이용하는 것보다 그 태그를 선택하는 것에 있어서 보다 구체적이기 때문에 같은 CSS 파일 내에서 ID 선택자가 가장 우선 순위가 높다고 하는 것이죠.
- ID 선택자 (#id)
- 클래스 | 가상 선택자 (.class | div:nth-child() 등)
- 태그 선택자 (p, h1 등)
- 전체 선택자 (*)
- 부모에게 상속받은 속성
위의 예제에서 살펴보면 알 수 있듯이 각각의 선택자 중에서 ID 선택자가 가장 우선 순위가 높은 것을 확인할 수 있는데요.
다만 우선 순위 중에서 !important 키워드로 선언된 스타일 속성의 경우 ID보다, 즉 같은 파일 내의 모든 선택자들 뿐만 아니라 link, style 태그 내 스CSS 및 import 된 외부의 CSS을 다 제치고 1순위로 적용되기 때문에 !important 키워드는 협업에서의 혼란을 줄 수 있다는 점에서 가급적 피하는 점이 좋습니다.
또한 같은 선택자가 여럿이 대상을 선택 하였더라도 후순위로 지정 된 스타일 속성에 대해서는 해당 컨텐츠에 대한 CSS 적용 우선권을 가집니다. 만약 후순위에 지정 된 스타일 속성이 없다면 전순위에 지정 된 스타일이 우선권을 가지게 됩니다.
⭐ 정리하자면 스타일의 캐스케이딩 우선 순위는
!importatn→inline_style→id→class→태그 선택자→*(전체 선택자) →부모 상속 속성이라고 정리할 수 있겠습니다.
