🎨 CSS 우선순위와 상속 요약!

CSS는 캐스케이딩 스타일 시트, 폭포처럼 위에서 아래로 흐른다!

• 스타일 우선 순위 : 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일이 적용된다
• 스타일 상속 : 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다

스타일 우선 순위 기준

• 스타일 우선 순위는 다음과 같은 보편적인 기준으로 정해진다.
• 내부적으로 계산시 점수의 합이 높은 쪽으로 우선한다.

기준 1 : 중요도

사용자 스타일 시트

• 저시력자와 색약자 등과 같이 특별한 조건이 필요한 사용자가 그들에 맞게 구성해 놓은 스타일 시트. ex) 고대비 설정.
• 시스템을 통해 만들어진 것이기 때문에 제작자가 제어할 수는 없다.

!important

• 제작자 스타일 시트의 중요 스타일
• 점수는 무한대, 붙이면 가장 중요시된다.
• 🐍 수정시 힘드므로 왠만하면 사용하지 말자

제작자 스타일 시트의 일반 스타일

기본적인 브라우저 스타일 시트

• 브라우저들마다 기본적으로 지정하고 있는 스타일 ex) 기본 글자색 검은색
• 🐍 맨 처음에 초기화시켜 아예 없애버리기도

기준 2 : 적용범위가 어디까지인가?(Specificity)

범위가 좁을수록 우선순위가 높아진다

• 인라인 스타일 : 태그 안에 style, 1000점
• id 선택자 : 지정한 부분에서만, 한 문서 안에 한 번만, 100점
• class 선택자 : 지정된 부분, 한 문서 안에 여러 번, 10점
• 태그 선택자 : 특정 태그에 모두 적용, 1점
• 기타 요소, 가상 선택자 : 태그와 같이 1점
• 전체 선택자, 부정 선택자 : 0점

기준 3 : 소스에서의 순서 (Source Order)

스타일 시트에서 중요도와 적용 범위가 같다면 소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어쓴다.

 

스타일 상속

배경색과 이미지는 상속되지 않음