[직일구의 웹개발] CSS의 cascading 성격 - 특정성, 중요도, 순서

CSS의 적용 우선순위는 특정성, 중요성 및 출처에 따라 결정됩니다. 다음은 CSS 규칙의 적용 우선순위 순서입니다:

1. 중요도(!important)

!important 플래그를 사용한 스타일 규칙이 가장 높은 우선순위를 갖습니다. 이는 특정성과 출처에 관계없이 항상 우선 적용됩니다.

2. 인라인 스타일

HTML 요소에 직접 적용된 인라인 스타일은 매우 높은 우선순위를 가집니다.

3. ID 선택자

ID 선택자는 매우 높은 특정성을 가지며, 클래스나 요소 선택자보다 우선 적용됩니다.

4. 클래스, 속성 및 가상 클래스 선택자

클래스, 속성 및 가상 클래스 선택자는 요소 선택자보다 높은 특정성을 가집니다.

5. 요소 및 가상 요소 선택자

요소 및 가상 요소 선택자는 가장 낮은 특정성을 가지며, 동일한 요소에 대해 다른 선택자가 없다면 적용됩니다.

6. 동일한 특정성의 규칙

동일한 특정성을 가진 규칙이 충돌할 경우, 나중에 정의된 규칙이 우선 적용됩니다. 이는 CSS 파일 내에서의 순서뿐만 아니라 HTML 문서 내에서의 <style> 태그 순서도 포함합니다.

7. 출처 (Origin)

CSS 규칙의 출처에 따라 우선순위가 결정됩니다:

1. 사용자 에이전트 스타일 시트 (브라우저 기본 스타일)
2. 사용자 스타일 시트 (사용자가 지정한 스타일)
3. 작성자 스타일 시트 (웹 개발자가 작성한 스타일)
4. !important 사용자 스타일 시트
5. !important 작성자 스타일 시트

우선순위 정리

1. 인라인 스타일 (style 속성 사용)
2. !important 규칙
3. ID 선택자
4. 클래스, 속성 및 가상 클래스 선택자
5. 요소 및 가상 요소 선택자
6. 동일한 특정성인 경우, 나중에 정의된 규칙
7. 작성자 스타일 시트 > 사용자 스타일 시트 > 사용자 에이전트 스타일 시트

이러한 우선순위 체계는 CSS의 스타일 규칙이 충돌할 때 어떤 규칙이 적용될지를 결정하는 데 중요한 역할을 합니다.

 

제대로 이해하셨는지 문제 한 번 내보겠습니다! 맞춰보세요! 정답은 맨 아래 있습니다!

 

문제 1

다음 CSS 코드가 적용될 때, p 요소의 최종 색상은 무엇인가요?

문제 2

다음 중 우선순위가 가장 높은 CSS 규칙은 무엇인가요?

문제 3

다음 CSS 규칙이 적용될 때, h1 요소의 최종 배경색은 무엇인가요?

문제 4

다음 CSS 코드에서 div 요소의 최종 폰트 크기는 얼마인가요?

문제 5

다음 HTML 및 CSS 코드에서 span 요소의 최종 폰트 색상은 무엇인가요?

정답

1. p 요소의 최종 색상은 green입니다. 인라인 스타일이 모든 다른 스타일 규칙보다 우선순위가 높습니다.
2. 우선순위가 가장 높은 규칙은 #header { font-size: 20px; }입니다. ID 선택자가 클래스와 요소 선택자보다 특정성이 높습니다.
3. h1 요소의 최종 배경색은 yellow입니다. !important 플래그가 가장 높은 우선순위를 갖습니다.
4. div 요소의 최종 폰트 크기는 16px입니다. !important 플래그가 다른 규칙보다 우선순위가 높습니다.
5. span 요소의 최종 폰트 색상은 purple입니다. ID 선택자가 클래스와 요소 선택자보다 특정성이 높습니다.