:has()
자식 상태를 보고 부모가 바뀐다
입력이 맞으면 칸이 초록, 다 체크하면 카드가 완료 색, 이미지가 있으면 레이아웃이 바뀝니다. 전부 JS 없이 CSS :has() 한 줄로 처리해요.
(a) 실시간 검증 - 입력이 맞으면 칸이 초록
(b) 체크리스트 - 다 체크하면 카드가 완료 색
출시 전 점검
(c) 이미지 유무 - 있으면 카드 레이아웃이 바뀜
이미지 표시 켜기 / 끄기
'/%3E%3C/svg%3E)
미디어 카드
이미지가 있으면 가로 2단으로 펼쳐지고, 접어서 이미지를 숨기면 카드가 한 줄로 좁아져요. :has(img) 하나로 전환됩니다.
핵심은 부모가 자식의 상태를 본다는 것. 예전엔 JS로 onChange를 듣고 부모에 클래스를 붙였다 뗐다 했지만, :has()는 그 일을 CSS가 알아서 합니다 (Baseline 2024, 주요 브라우저 지원).