CSS - 특이성
안녕하세요, 친애하는 학생 여러분, CSS 특이성의 세상으로 흥미로운 여정에 오신 것을 환영합니다! 여러분의 이웃 친절한 컴퓨터 교사로서 오랜 경험을 가진 저는 이 중요한 개념을 안내해 드리는 것을 기쁜 마음으로 생각합니다. 프로그래밍에 처음이라고 걱정하지 마세요 - 기본부터 시작해 차근차근 올라갈 테니까요. 그러니 커피(또는 차, 당신이 좋아하는 것이라면)를 한 잔 마시고, 이제 시작해봅시다!
CSS 특이성 - 선택자 중량 카테고리
CSS 특이성을 선택자 간의 인기 경쟁으로 상상해 봅시다. 각 선택자는 자신만의 "중량" 또는 중요도를 가지고 있으며, 가장 높은 중량을 가진 선택자가 요소를 스타일링할 권리를 얻습니다. 학교에서 인기 있는 아이처럼 - 더 인기가 많을수록 더 많은 영향력을 가지게 됩니다!
주요 선택자 중량 카테고리는 높은 것부터 낮은 것까지 다음과 같습니다:
- 인라인 스타일
- ID
- 클래스, 속성, 그리고 페스도 클래스
- 요소와 페스도 요소
이제 이들 중 하나씩 더 자세히 살펴보겠습니다.
CSS 특이성 - 각 선택자 유형의 점수
이해를 더 쉽게 하기 위해 각 선택자 유형에 점수를 부여할 수 있습니다. 이를 마치 게임처럼 생각해 보세요. 각 선택자가 자신의 중요도에 따라 점수를 얻습니다. 다음의 유용한 표를 기억해 두세요:
| 선택자 유형 | 점수 | 예시 |
|---|---|---|
| 인라인 스타일 | 1000 | <p style="color: red;"> |
| ID | 100 | #header |
| 클래스, 속성, 페스도 클래스 | 10 |
.button, [type="text"], :hover
|
| 요소와 페스도 요소 | 1 |
p, ::before
|
이제 몇 가지 코드 예제를 통해 이를 확인해 보겠습니다:
/* 특이성: 1 */
p {
color: blue;
}
/* 특이성: 10 */
.text {
color: red;
}
/* 특이성: 100 */
#main-heading {
color: green;
}이 예제에서, 만약 <p id="main-heading" class="text">Hello, World!</p>와 같은 요소가 있다면, 텍스트 색상은 녹색이 됩니다. ID 선택자가 가장 높은 특이성을 가하기 때문입니다.
CSS 특이성 - 예외 사례
이제 여러분이 생각할 수 있을 것은, "하지만 선생님, 이 규칙에 예외가 있나요?" 훌륭한 질문입니다! 사실, 하나의 주요 예외가 있습니다: !important 선언입니다.
속성에 !important를 추가하면, 특이성에 상관없이 최종 승자가 됩니다. 모노폴리에서 "출소 무료" 카드를 사용하는 것처럼 - 신중하게 사용하세요!
p {
color: blue !important;
}
#main-heading {
color: green;
}이 경우, ID 선택자가 더 높은 특이성을 가지지만, p 선택자에 !important 규칙이 적용되므로 텍스트 색상은 파란색이 됩니다.
CSS 특이성 - 문제 처리
때로는 특이성 문제에 걸리게 될 수 있습니다. 걱정하지 마세요; 우리 모두에게 일어날 수 있는 일입니다! 특이성 문제를 처리하는 몇 가지 팁을 제공해 드리겠습니다:
- 절대적으로 필요하지 않은 이상
!important를 사용하지 마세요. - 가능하다면 클래스 대신 ID를 사용하는 것을 피하세요.
- 선택자 구조에 주의를 기울이고 간단하게 유지하세요.
- 선택자의 중량에 대해 불확실하다면 특이성 계산기 사용해 보세요.
CSS 특이성 - 기억해 두어야 할 포인트
CSS 특이성에 대해 기억해 두어야 할 몇 가지 중요한 포인트를 요약해 보겠습니다:
- 특이성은 선택자의 구성 요소에 따라 계산됩니다.
- 인라인 스타일은 항상 가장 높은 특이성을 가집니다 (단,
!important에 의해 대체되지 않는 이상). - ID는 클래스보다, 클래스는 요소보다 더 높은 특이성을 가집니다.
- 선택자가 더 특정할수록 특이성이 높아집니다.
- 동일한 특이성을 가진 선택자는 선언의 순서에 따라 해결됩니다 (이에 대해 더 알아보겠습니다!).
CSS 특이성 - 동일 특이성 (최종 선언이 승리함)
두 개의 선택자가 동일한 특이성을 가질 때, CSS 파일에서 마지막에 오는 선택자가 승리합니다. 마치 레이스에서的照片결선처럼 - 마지막에 선을 넘는 사람이 상을 차지합니다!
.button {
background-color: blue;
}
.button {
background-color: red;
}이 경우, 버튼은 빨간색이 됩니다. 마지막 선언이 승리하기 때문입니다.
CSS 특이성 - 특이성 계층 (인라인 스타일)
인라인 스타일은 특이성의 중량왕입니다. 그들은 1000의 특이성을 가지고 있으며, 스타일시트에서 어떤 선택자보다 높습니다. 예를 들어:
<p style="color: red;" class="blue-text" id="green-text">What color am I?</p>#green-text {
color: green;
}
.blue-text {
color: blue;
}이 경우, 텍스트는 빨간색이 됩니다. 인라인 스타일은 ID와 클래스 선택자보다 우선합니다.
CSS 특이성 - 특이성 계층 (ID 선언)
인라인 스타일 다음으로 ID 선택자가 최고입니다. 그들은 100의 특이성을 가지고 있으며, 클래스와 요소보다 높습니다. 예를 들어:
<p id="special-paragraph" class="normal-text">I'm a special paragraph!</p>#special-paragraph {
color: purple;
}
.normal-text {
color: black;
}
p {
color: blue;
}이 경우, 텍스트는 보라색이 됩니다. ID 선택자가 가장 높은 특이성을 가하기 때문입니다.
CSS 특이성 - 특이성 계층 (클래스 선언)
클래스 선택자는 다음으로 특이성 계층에서 위치합니다. 그들은 10의 특이성을 가지고 있으며, 요소보다 더 특정하지만 ID보다는 덜 특정합니다. 예를 들어:
<p class="highlight">This is a highlighted paragraph.</p>.highlight {
background-color: yellow;
}
p {
background-color: white;
}이 예제에서, 퍼agraph는 노란 배경색을 가지게 됩니다. 클래스 선택자가 요소 선택자보다 더 높은 특이성을 가하기 때문입니다.
CSS 특이성 - 특이성 계층 ( !important 규칙)
마지막으로, 핵심 옵션에 대해 이야기해 보겠습니다: !important. 이 선언은 모든 다른 선언을 무시하고 승리합니다. CSS 덱에서 "트럼프 카드"를 가지는 것과 같습니다.
p {
color: blue !important;
}
#special-paragraph {
color: red;
}
.highlight {
color: green;
}만약 이 스타일을 퍼agraph에 적용하면, 텍스트는 파란색이 됩니다. !important 규칙이 적용되므로 ID와 클래스 선택자보다 우선합니다.
그렇게 해서, 여러분! 우리는 CSS 특이성의 내막을 다루었습니다. 강력한 특이성을 가지는 것은 책임이 따릅니다. 새로운 지식을 지혜롭게 사용하고, 스타일이 항상 특정하고 선택자가 명확하길 바랍니다!
Credits: Image by storyset