✣ 개발자도구 과제
css부분에서 순서가 의미하는 것
CSS의 C는 캐스캐이딩(Cascading)의 약자로 '위에서 아래로 흐르는 스타일 시트'라는 뜻입니다. 이러한 방식으로 CSS는 중복되는 스타일 규칙을 '위에서 아래로' 적용되며 방지하는 방법을 채택하고 있습니다. 즉 스타일에 우선순위를 두어서 HTML의 요소가 어떤 CSS 스타일에 영향을 받을 지 결정하는 것이죠.
스타일의 우선순위는 다음과 같이 먼저 사용자와 제작자 그리고 중요 스타일인지 일반 스타일인지에 따라서 결정됩니다. (1이 가장 중요한 순서, 5가 가장 낮음)
- 사용자 스타일 시트, 중요
- 제작자 스타일 시트, 중요
- 제작자 스타일 시트, 일반
- 사용자 스타일 시트 일반
- 브라우저 스타일 시트
하지만 보통 위에 있는 중요도는 CSS를 적용할 때 자주 고려해야하는 요소는 아닙니다. 실제로 중요하게 생각해야하는 것은 다음 태그간, 선택자 간에 대한 우선순위입니다. (1이 가장 중요한 순서, 5가 가장 낮음)
- 속성값 뒤의 !important
- 태그에 inline으로 style 속성 지정
- 선택자가 #id
- 선택자가 .class 및 pseudo 클래스(:hover같은 것)
- 선택자가 tag 이름
만약 우선순위가 같다면 개수가 많이 나온 것이 우선시 된다는 설명도 있지만 어느 정도 맞는 말이지만 정확하지 않습니다. 정확한 설명은 스타일에 적용되어진 조합들을 토대로 특정도값을 계산해서 가장 많은 점수를 받은 것이 우선됩니다!
특정도 계산식은 다음과 같습니다.
- 인라인 스타일 1000점
- ID 선택자 100점
- 클래스 선택자 및 가상 클래스(:before 같은), 속성 10점
- 태그 선택자 1점
