[CSS] 가상 클래스(Pseudo-classes)와 UI 제어 기술

이번 포스팅에서는 [CSS 선택자 심화] 파트의 세부 주제인 상태와 순서를 감지하는 가상 클래스에 대하여 상세히 알아보겠습니다.

1. nth-child의 수식 계산 완벽 이해

표나 리스트에서 얼룩말 무늬(Zebra striping)를 넣거나, 특정 주기로 디자인을 다르게 줄 때 nth-child(an + b) 수식이 유용합니다.

• :nth-child(odd), :nth-child(even): 홀수, 짝수 선택
• :nth-child(3n): 3, 6, 9... 번째 선택 (3의 배수)
• :nth-child(3n + 1): 1, 4, 7... 번째 선택 (3으로 나눴을 때 나머지가 1)
• 노하우: 앞의 3개만 선택하기: :nth-child(-n + 3) (-1, 0, 1, 2, 3이 나오지만 인덱스는 1부터이므로 1, 2, 3번째만 적용됨)

2. 폼(Form) UI의 구원자: :focus-within

부모 요소(Form이나 Input 감싸는 Div)에 :focus 효과를 주고 싶을 때 사용합니다. 자식 중 어느 하나라도 포커스를 받으면 부모에게 스타일이 적용됩니다. JS 이벤트 리스너가 필요 없어집니다!

.search-box {
  border: 1px solid #ccc;
  transition: border-color 0.3s;
}

/* 돋보기 버튼이나 input 창 내부 아무 곳이나 클릭(포커스)되면 부모의 테두리 색상 변경 */
.search-box:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}

---

지금까지 nth-child 수학 수식과 :focus-within 상태 클래스에 대해 살펴보았습니다. 가상 클래스는 CSS만으로 반응형 인터랙션을 구현하는 가장 우아한 방법입니다.