CSS 선택자 별 점수 계산 방법

적용 순서:

• 특이성(specificity): 아이디 선택자가 가장 높은 우선순위를 가지며, 그 다음으로 클래스, 속성, 가상요소, 마지막에 태그 선택자 순입니다.
• 소스 순서: 동일한 특이성을 가진 규칙은 CSS 파일 내에서 나중에 작성된 규칙이 우선 적용됩니다.
• 예를 들어, 위 코드에서 .logo와 #header .logo가 모두 적용될 수 있다면, 더 구체적인 #header .logo가 우선되어 노란색 테두리가 적용됩니다.

---

1. 기본 CSS 초기화 (Universal Selector)

• 목적: 모든 요소의 기본 마진과 패딩을 제거하여 일관된 스타일링의 출발점을 제공합니다.
• 예시:

/* 전체 선택자: CSS 초기화에 사용 (모든 요소의 margin, padding 제거) */
* {
  margin: 0;
  padding: 0;
}

─────────────────────────────
2. 아이디 선택자 (ID Selector)

• 특징:
  • 아이디 선택자는 높은 특이성(specificity)을 가지며, 문서 내에서 유일해야 합니다.
  • 여기서는 #header가 대상이며, 100점의 특이성 점수를 부여받는다고 가정합니다.
• 예시:

/* 아이디 선택자 (#header): 우선순위가 매우 높음 (예: 100점) */
#header {
  border: 3px solid red;
  height: 150px;
}

─────────────────────────────
3. 클래스 선택자와 하위 선택자 (Class & Descendant Selector)

• 하위 선택자:
  • 선택자 앞에 부모 선택자(예: #header)를 붙이면, 그 내부의 자식 또는 후손 중 지정된 클래스(예: .logo)만 선택할 수 있습니다.
  • 여기서는 #header .logo가 110점 정도의 특이성을 가진다고 가정합니다.
• 일반 클래스 선택자:
  • 단순히 .logo만 사용하면 특이성이 낮은 (예: 10점) 선택자가 됩니다.
  • 만약 두 규칙이 모두 적용된다면, 더 구체적인(특이성이 높은) 선택자가 우선합니다.
• 예시:

/* 하위 선택자: #header 내부의 .logo 요소에 적용 (예: 110점) */
#header .logo {
  border: 1px solid yellowgreen;
}

/* 단순 클래스 선택자: 모든 .logo 요소에 적용 (예: 10점) 
   - 특이성이 낮으므로 위의 #header .logo 규칙에 의해 덮어질 수 있음 */
.logo {
  border: 5px solid red;
}

─────────────────────────────
4. 자식 선택자 (Child Selector)

• 특징:
  • 부모 요소 바로 아래의 자식 요소만 선택합니다.
  • 예시에서는 #header .gnb > li를 통해, #header 내의 .gnb 요소의 직접 자식인 li만 선택합니다.
• 예시:
   

/* 자식 선택자: #header 내의 .gnb 요소의 자식 li (예: 111점) */
#header .gnb > li {
  border: 2px solid yellow;
}

─────────────────────────────
5. 가상요소 선택자 (Pseudo-element Selector)

• 특징:
  • 가상요소는 실제 DOM에 존재하지 않는 추가 콘텐츠(예: 장식용 박스)를 삽입할 때 사용합니다.
  • 여기서는 .tit 요소의 뒤에 빈 블록 요소를 추가하여 스타일링합니다.
• 예시:
   

/* 가상요소 선택자: .tit 요소의 ::after에 콘텐츠 삽입 (예: 1점) */
.tit::after {
  content: '';
  width: 50px;
  height: 50px;
  background: red;
  display: block;
}

─────────────────────────────
6. 복합 선택자 (Descendant + 자식 선택자)

• 특징:
  • 여러 선택자를 조합하여 더 세밀하게 요소를 선택할 수 있습니다.
  • 예시에서는 #header .gnb > li > a를 사용해, #header 내의 .gnb의 자식 li의 자식 a 요소를 선택합니다.
  • (예: 112점 정도의 특이성)
• 예시:

/* 복합 선택자: #header 내부의 .gnb > li의 a 요소에 적용 */
#header .gnb > li > a {
  color: red;
}

---

/* 전체 선택자: CSS 초기화 (모든 요소의 margin, padding 제거) */
* {
  margin: 0;
  padding: 0;
}

/* 아이디 선택자 (#header): 높은 특이성 (예: 100점) */
#header {
  border: 3px solid red;
  height: 150px;
}

/* 하위 선택자: #header 내부의 .logo 요소 (예: 110점) */
#header .logo {
  border: 1px solid yellowgreen;
}

/* 단순 클래스 선택자: 모든 .logo 요소 (예: 10점) */
.logo {
  border: 5px solid red;
}

/* 자식 선택자: #header 내의 .gnb의 자식 li 요소 (예: 111점) */
#header .gnb > li {
  border: 2px solid yellow;
}

/* 가상요소 선택자: .tit 요소의 ::after에 빈 블록 추가 (예: 1점) */
.tit::after {
  content: '';
  width: 50px;
  height: 50px;
  background: red;
  display: block;
}

/* 복합 선택자: #header 내의 .gnb > li의 자식 a 요소 (예: 112점) */
#header .gnb > li > a {
  color: red;
}