CSS 적용 우선순위

CSS 적용 우선순위

 

CSS 우선순위는 웹 페이지에서 스타일이 적용되는 순서를 결정하는 규칙입니다. 이를 이해하는 것은 CSS를 효과적으로 사용하고 웹 페이지의 스타일을 조절하는 데 매우 중요합니다. CSS 우선순위는 다음과 같은 요소에 의해 결정됩니다.

1. **명시도(Specificity)**:
   명시도는 CSS 규칙에 지정된 선택자의 특정성을 나타내는 값입니다. 일반적으로 명시도는 아래의 요소에 따라 계산됩니다.
   - 인라인 스타일: 가장 높은 명시도를 가지며, HTML 요소에 직접 스타일을 적용합니다.
   - ID 선택자: `#id`로 지정된 선택자의 명시도는 100점입니다.
   - 클래스 선택자, 속성 선택자, 가상 클래스 선택자: `.class`, `[attribute]`, `:hover` 등의 선택자의 명시도는 10점입니다.
   - 요소 선택자: `div`, `p`, `a` 등의 요소 선택자의 명시도는 1점입니다.
   - * 선택자: `*` 선택자의 명시도는 0점입니다.

 

   명시도가 높을수록 해당 스타일이 우선적으로 적용됩니다. 즉, ID 선택자가 클래스 선택자보다 우선합니다. 그러나 선택자의 명시도가 동일한 경우에는 나중에 선언된 스타일이 우선합니다.

2. **중요도(Importance)**:
   CSS 속성 값 뒤에 `!important`를 붙이면 해당 스타일 규칙에 대한 중요도가 증가합니다. 이를 통해 다른 모든 규칙을 무시하고 해당 스타일이 우선적으로 적용됩니다. 하지만 `!important`는 남용되면 코드를 이해하기 어렵게 만들 수 있으므로 신중하게 사용해야 합니다.

 

3. **소스 순서(Source Order)**:
   동일한 명시도와 중요도를 가진 스타일이라면 나중에 선언된 스타일이 우선적으로 적용됩니다. 이는 CSS 파일이나 `<style>` 태그에 스타일을 선언한 순서에 따라 결정됩니다.

 

 

 

 

 

 

이러한 우선순위 규칙을 통해 CSS에서의 스타일 충돌을 해결할 수 있습니다. 예를 들어, 두 개의 CSS 규칙이 동일한 요소에 적용되는 경우 다음과 같은 방식으로 우선순위가 결정됩니다.

 

1. **명시도(Specificity)**:
   - `.classA`로 선택된 요소에 대한 스타일이 `.classB`로 선택된 요소에 대한 스타일보다 우선적으로 적용됩니다.
   - `#id`로 선택된 요소에 대한 스타일이 클래스나 요소 선택자로 선택된 요소에 대한 스타일보다 우선적으로 적용됩니다.
   - 인라인 스타일은 모든 다른 스타일을 무시하고 우선적으로 적용됩니다.

 

2. **중요도(Importance)**:
   - `!important`가 지정된 스타일이 다른 모든 스타일보다 우선적으로 적용됩니다.

 

3. **소스 순서(Source Order)**:
   - 나중에 선언된 스타일이 이전에 선언된 스타일보다 우선적으로 적용됩니다.

예를 들어, 다음과 같은 CSS가 있다고 가정해봅시다.

 

반응형

p {
    color: blue;
}

#special {
    color: red !important;
}

.blue-text {
    color: blue;
}


이 경우 `<p>` 요소에는 두 가지 스타일이 적용됩니다. `#special` ID가 있는 요소에는 중요한 빨간색 텍스트가 적용되고, `.blue-text` 클래스가 지정된 요소에는 파란색 텍스트가 적용됩니다. 그러나 `.blue-text` 클래스가 `.classA`로 선택된 요소에 지정된 스타일보다 우선되지 않는 한 `.classA` 요소에는 두 가지 스타일이 모두 적용됩니다.

이러한 CSS 우선순위 규칙을 잘 이해하면 웹 페이지의 스타일을 효과적으로 관리하고 충돌을 해결할 수 있습니다. 그러나 종종 스타일이 예상한대로 적용되지 않는 경우가 있으므로 디버깅을 통해 문제를 식별하고 해결하는 데 시간을 할애해야 합니다.