[CSS] CSS 기초 문법과 고급 선택자 (Selectors)

이번 포스팅에서는 [CSS 기초] 파트의 세부 주제인 CSS 기초 문법과 고급 선택자에 대하여 상세히 알아보겠습니다.

1. 명시도(Specificity) 점수 계산의 비밀

CSS를 작성하다 보면 내가 작성한 스타일이 무시되는 명시도(Specificity) 충돌 현상을 자주 겪습니다. 실무에서는 명시도 계산을 정확히 이해해야 !important를 남발하는 지저분한 코드를 방지할 수 있습니다.

• 인라인 스타일 (1000점): <div style="..."> 형태로 HTML 내에 직접 작성 (가장 강력함)
• ID 선택자 (100점): #header
• 클래스, 가상 클래스, 속성 선택자 (10점): .btn, :hover, [type="text"]
• 요소(태그) 선택자 (1점): div, p, ::before

2. 고급 선택자로 HTML 구조 수정 없이 스타일링하기

불필요한 클래스 추가 없이도 HTML 요소를 정밀하게 타겟팅하는 노하우입니다.

/* 자식 결합자(Child Combinator): 직계 자식만 선택 (부작용 최소화) */
.card > .title {
  color: #333;
}

/* 일반 형제 결합자(General Sibling Combinator): 특정 요소 뒤에 오는 모든 형제 선택 */
.label ~ .input-field {
  margin-top: 10px;
}

/* 인접 형제 결합자(Adjacent Sibling): 바로 뒤에 오는 단 하나의 형제만 선택 */
h2 + p {
  font-size: 1.1rem; /* 제목 바로 다음의 단락만 강조할 때 유용 */
}

/* 속성 선택자 심화: 특정 문자열로 시작(^=)하거나 끝나는($=) 속성 찾기 */
a[href^="https://"] {
  color: blue; /* 외부 링크만 파란색으로 처리 */
}

---

지금까지 CSS 기초 문법과 고급 선택자의 개념과 구체적인 활용 방안에 대해 살펴보았습니다. 명시도 관리를 습관화하여 깔끔한 CSS 아키텍처를 유지해 보세요.