더북(TheBook)

예제를 하나 더 살펴볼까요? 다음 코드에는 하나의 p 태그에 여러 스타일을 사용하고 있습니다. 이처럼 똑같은 p 태그를 여러 선택자로 지정하고 있다면 어떤 스타일이 적용될까요?

06/01/specificity-2.html

p{color:red;}
p{color:blue;}
p{color:orange;}

그림 6-3 실행결과

코드를 실행하면 마지막에 작성한 orange 값이 적용됨을 확인할 수 있습니다. 이처럼 기본 스타일 시트보다 사용자가 정의한 스타일 속성이 우선 적용되고, 같은 태그 요소의 선택자가 여럿일 때도 한 속성만 적용되는 이유는 바로 CSS가 Cascading Style Sheets, 즉 단계적으로 적용되는 스타일을 뜻하는 언어이기 때문입니다. 여기서 말하는 단계적 적용은 같은 태그에 여러 스타일이 적용되더라도 단계적으로 적용되어 결국 마지막에 영향을 주는 하나의 스타일만 적용된다는 뜻입니다. 이때 어떤 스타일이 마지막에 영향을 주는지는 CSS의 개별성(specificity) 규칙에 따라 결정됩니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.