CSS-L4-021 / 상태 기반 UI
has 폼 오류 감지
고급문제
오류 입력을 포함한 .field만 :has로 골라 배경을 rgb(255,230,230)으로 만드세요. 정상 field 배경은 rgb(255,255,255)입니다.
준비된 HTML은 그대로 사용합니다. 선택자와 스타일을 작성하세요. 결과 화면과 조건을 함께 확인하세요.
확인할 조건
- 오류 부모
- 정상 부모
준비된 HTML
<!doctype html> <html lang="ko"> <head><meta charset="utf-8"><title>실습</title></head> <body> <div class="field" id="good"><input></div><div class="field" id="bad"><input aria-invalid="true"></div> </body> </html>
목표 화면
힌트
자손의 상태로 부모를 선택하는 :has를 사용하세요.
해설·정답 보기
DOM에 별도 오류 클래스를 추가하지 않고 자식의 접근성 상태를 스타일에 반영합니다.
.field{background:white}.field:has([aria-invalid="true"]){background:rgb(255,230,230)}style.css화면·구조 확인
코드는 이 브라우저에 자동 저장돼요.
풀이 결과
코드를 작성하고 채점하기를 눌러보세요.
학습용으로 제공된 조건을 확인해요. 알고리즘 사용 방식·설계 의도는 해설과 함께 비교해보세요.