웹 페이지 디자인을 위해 스타일 적용 대상을 지정하는 CSS 선택자(Selectors)를 정리했다.
기본 선택자부터 조합 선택자까지의 활용법을 분석했다.
타겟팅 기술 분석
요소 간 관계와 상태를 활용하여 정교한 스타일링을 수행할 수 있다.
/* 1. 복합 선택자: 요소 간 관계 활용 */
section p { color: #555; } /* 하위 선택자 */
div > span { font-weight: bold; } /* 자식 선택자 */
/* 2. 가상 클래스: 요소 상태 반응 */
a:hover { text-decoration: underline; } /* 호버 상태 */
li:nth-child(even) { background: #f9f9f9; } /* 구조적 선택 */
/* 3. 가상 요소: 시각적 요소 추가 */
p::before { content: "📌 "; } /* 콘텐츠 삽입 */
nth-child는 반복 구조 디자인 효율을 높이며, ::before와 ::after는 HTML 구조 변경 없이 디자인 효과를 추가할 수 있게 한다.
명시도와 우선순위 규칙
스타일 충돌 시 브라우저는 명시도(Specificity)에 따라 적용 순위를 결정한다.
아이디(#) > 클래스(.) > 태그 순의 우선순위를 가진다.
!important 사용을 지양하고 선택자 설계를 통해 우선순위를 제어하는 것이 바람직하다.
구조적 스타일링 전략
구조적 선택자를 활용하면 HTML 내 클래스 명칭 사용을 최소화할 수 있다.
HTML은 문서 구조에 집중하고 CSS는 스타일 정의에 집중하는 분리 구조를 통해 유지보수성을 확보해야 하는 것 같다.
