======CSS Specificity====== * description : CSS Specificity * author : 오션 * email : shlim@repia.com * lastupdate : 2021-04-21 \\ =====What is Specificity?===== 동일한 요소를 가리키면서 충돌하는 %%CSS%% 규칙이 두 개 이상 있는 경우,\\ 브라우저는 몇 가지 규칙에 따라서 어떤 규칙이 가장 명확해서 우선할 지를 결정합니다.\\ \\ 명시도(specificity)를 어떤 스타일 선언이 궁극적으로 요소에 적용될 지를 결정하는 점수/순위로 생각하십시오.\\ \\ 전역 셀렉터(global selector) (%%*%%)는 명시도가 낮고, %%ID%% 셀렉터는 매우 구체적입니다!\\ \\ **Note:**\\ %%CSS%% 규칙이 일부 요소에 적용되어야 한다고 여길지라도,\\ 일부 요소에 적용되지 않는 일반적인 이유가 바로 명시도 때문입니다.\\ =====Specificity Hierarchy===== 모든 셀렉터는 명시도 계층(Specificity Hierarchy)에서 각자의 자리를 차지합니다.\\ 셀렉터의 명시도 수준을 정의하는 네 가지 범주가 있습니다.\\ \\ **%%Inline styles%%** - 인라인 스타일은 스타일을 지정할 요소에 직접 첨부됩니다.\\ 예: %%

.%%\\ \\ **%%IDs%%** - %%ID%%는 %%#navbar%% 처럼, 페이지 요소의 고유 식별자입니다.\\ \\ **Classes, attributes and pseudo-classes**\\ - 이 범주에는 %%.classes%%, %%[attributes]%% 및 %%:hover%%, %%:focus%% 등과 같은 의사 클래스(pseudo-classes)가 포함됩니다.\\ \\ **%%Elements and pseudo-elements%%**\\ - 이 범주에는 요소 이름과 %%h1%%, %%div%%, %%:before%% 및 %%:after%%와 같은 의사 요소(pseudo-elements)가 포함됩니다.\\ =====How to Calculate Specificity?===== 명시도를 계산하는 방법을 외우세요.\\ \\ 0에서 시작하고, 스타일 속성에 1000을 추가하고\\ 각 %%ID%%에 100을 추가하고, 각 속성과 클래스 또는 의사 클래스에 10을 추가하고,\\ 각 요소 이름 또는 의사 요소에 1을 추가하십시오.\\ 다음 세 가지 코드를 생각해보세요.\\ ====예제==== A: h1 B: #content h1 C:

Heading

 \\ A의 명시도 : 1개 요소(%%h1%%)가 있으므로 A의 명시도는 1\\ B의 명시도 : 1개의 ID와 1개 요소가 있으므로 B의 명시도는 101\\ C의 명시도 : %%inline styling%% 이어서, C의 명시도는 1000\\ \\ 1 < 101 < 1000이므로, 세 번째 규칙 (C)이 더 높은 수준의 명시도를 가지므로, 규칙 (C)가 적용됩니다.\\ =====Specificity Rules===== **동일한 명시도: 가장 마지막 규칙이 인정됩니다.**\\ - 동일한 규칙이 외부 스타일 시트에 두 번 작성되면, 스타일 시트의 하위 규칙이 스타일을 지정할 요소에 더 가까워서 적용됩니다.\\ ====예제====

This is heading 1

 \\ 상기 예제에서 %%CSS%%에서 후자의 규칙이 항상 적용됩니다.\\ \\ **%%ID%% 셀렉터는 속성 셀렉터보다 더 높은 명시도를 가집니다.** - 다음 세 코드 줄을 살펴보세요.\\ ====예제====
This is a div.
 \\ 상기 예제에서, %%CSS%%의 첫 번째 규칙이 나머지 두 개의 규칙보다 더 구체적이어서 적용됩니다.\\ \\ **컨텍스추얼 셀렉터(Contextual selectors)는 단일 요소 셀렉터보다 더 구체적입니다.**\\ %%html%% 파일 내부에 작성된 스타일시트가 해당 요소에 더 가까이 있어,\\ 해당 요소는 내장된 스타일시트에 따라서 스타일이 적용됩니다.\\ \\ ====예제==== From external CSS file: #content h1 {background-color: red;} In HTML file: \\ 상기 예제에서는 %%HTML%% 내부의 %%CSS%%가 적용됩니다.\\ \\ **클래스 셀렉터는 어떤 요소 셀렉터도 능가합니다**\\ %%.intro%%와 같은 클래스 셀렉터는 %%h1%%, %%p%%, %%div%% 등을 능가합니다.\\ ====예제====

This is a heading

 \\ **전역 셀렉터(universal selector)와 상속된 값의 명시도는 0 입니다**\\ - %%*%%, %%body *%% 및 유사 항목의 명시도는 0입니다. 상속된 값의 명시성도 0입니다.\\ {{tag>오션 CSS Specificity}}