[CSS] Chapter 02. CSS Style Precedence

1. CSS 스타일의 우선 순위의 개념

데이터 구현에 있어서 데이터의 중요도를 설정하고 구현하는 것은 html을 통한 웹 페이지 제작에서 매우 중요한 의의를 가진다.

데이터의 중요도에 따라 해당 데이터의 구현 방식이나 범위가 변화하고, 자신이 원하는 기능을 구현하는 것에 영향을 미치기 때문이다. 

 

2. Web 브라우저의 데이터 우선 순위

1. 사용자 스타일 시트, 권한: 중요 (블루 라이트 등)
2. 제작자 스타일 시트, 권한: 중요
3. 제작자 스타일 시트, 권한: 일반
4. 사용자 스타일 시트, 권한: 일반
5. 웹 브라우저 기본 스타일 시트 

웹 브라우저에서 모양이 구현될 때, 권한에 따라 충돌 오류를 해결하여 구현된다.

1 항목이 가장 높은 권한을 가지고 있으며 우선 구현된다.

즉, 1과 2가 충돌한다면 충돌하는 영역에서 화면에 구현되는 것은 1의 로직을 따르는 것이다.

 

3. CSS 스타일 우선 순위

1. 속성값 뒤에 !important (실무에서 쓰는 경우 유지 보수가 힘들다)
2. 태그에 Inline으로 지정한 style 속성
3. 선택자가 #id
4. 선택자가 .class 및 pseudo 클래스(:hover 등)
5. 선택자가 tag 이름인 경우 

CSS 스타일은 각 항목별로 점수가 부여되고, 해당 스타일에 부여된 점수를 통해 높은 점수의 스타일이 구현되는 방식이다.

이러한 구동 방식을 취하지만 실제적으로 상위의 데이터 권한을 넘도록 점수를 부여하는 것은 매우 어렵다. (또한 비효율적이다.)