한 요소에 글자색 규칙이 둘이면 무엇을 확인하나요?
웹페이지의 한 문단에 적용되는 CSS 규칙을 두 개 만들었습니다. 첫 규칙은 ‘p { color: blue; }’이고 뒤 규칙은 ‘.note { color: red; }’입니다. 문단에 note 클래스가 붙어 있으면 둘 다 그 문단을 가리킵니다. 이때 빨간색이 적용되는 까닭은 단지 뒤에 썼기 때문이 아닙니다. 클래스 선택자 .note가 요소 이름 선택자 p보다 우선순위가 높기 때문입니다.
CSS는 웹페이지 요소의 색·크기·배치 등을 정하는 규칙입니다. 어떤 선언을 적용할지는 해당 요소에 규칙이 맞는지 확인한 뒤 출처·중요도·계층 등을 비교해 결정합니다. 오늘은 작성자가 만든 같은 스타일시트의 보통 선언을 비교합니다. @layer와 @scope, 인라인 스타일, 애니메이션·전환은 쓰지 않으며 선택자의 구체성과 선언 순서만 바꿉니다.
클래스보다 ID 선택자가 강하다는 말은 무슨 뜻인가요?
‘#notice { color: blue; }’와 ‘.note { color: red; }’가 같은 요소에 적용된다고 가정합니다. ID 선택자의 구체성은 (1,0,0), 클래스 선택자는 (0,1,0)입니다. 세 수를 더하거나 하나의 수로 합쳐 비교하는 것이 아니라 왼쪽 자리부터 차례대로 비교합니다. 따라서 뒤에 클래스 규칙을 써도 같은 조건에서는 ID 선택자의 파란색이 적용됩니다.
선택자 ‘p’는 (0,0,1)입니다. 그러므로 앞에서 정한 같은 조건에서 ‘#notice’가 ‘.note’보다, ‘.note’가 ‘p’보다 우선합니다. 선택자 이름에 붙인 글자의 길이나 선언에서 사용한 색 이름은 구체성 계산에 들어가지 않습니다. 규칙을 실제로 적용할 요소가 어떤 ID와 클래스를 가졌는지부터 확인해야 합니다.
동일한 구체성을 가진 두 규칙은 어떤 순서로 고를까요?
이제 ‘.note { color: blue; }’와 ‘.note { color: red; }’를 같은 문단에 적용해 봅시다. 두 선택자는 서로 같은 구체성을 가집니다. 출처·계층·중요도·범위 등 앞선 조건까지 같다면 뒤에 나온 빨간색 선언이 적용됩니다. 이번에는 선언의 위치가 결정을 바꾼 것입니다. 두 규칙의 순서를 바꾸면 파란색으로 달라져야 합니다.
그렇다고 뒤에 쓰인 모든 규칙이 우선한다고 일반화해서는 안 됩니다. CSS에는 스타일 출처, 계층, !important, 범위와 같은 조건이 더 있습니다. 이 활동은 그 가운데 비교 조건을 고정한 세 가지 예시만을 계산합니다. 실제 브라우저의 전체 규칙을 모두 재현하는 엔진이나 접근성 사용자 스타일의 우선순위를 판정하는 도구로 소개하지 않습니다.
AI가 규칙을 설명할 때 무엇을 빠뜨리기 쉬울까요?
AI에게 코드 두 줄만 보여 주면 AI가 요소의 클래스와 ID를 정확히 알지 못한 채 결과를 단정할 수 있습니다. 문단이 note 클래스를 가지고 있는지, notice라는 ID가 실제로 지정되어 있는지, 두 선언이 같은 출처·같은 중요도에 있는지 확인해야 합니다. 어느 규칙이 적용되는지 판단할 근거가 빠졌다면 질문을 다시 구체적으로 만들어야 합니다.
화면에서 ‘요소와 클래스’, ‘ID와 클래스’, ‘같은 클래스 두 번’ 중 한 사례를 선택하세요. 선택자와 구체성, 브라우저에 적용된 글자색을 함께 확인합니다. 마지막 사례에서는 선언 순서를 뒤집어 결과를 비교합니다. 샘플 문단은 주변 페이지의 스타일과 분리해 위의 세 사례를 실제 CSS로 적용합니다.