CSS :invalid와 :valid 의사 클래스의 역할은?
쉬움 MDN Web Docs해설
:valid는 input의 값이 type, pattern, required 등의 제약 조건을 만족할 때, :invalid는 만족하지 않을 때 매칭됩니다. 예: input:invalid { border-color: red; }로 잘못된 입력에 빨간 테두리를 표시합니다. JavaScript 없이 CSS만으로 실시간 유효성 피드백이 가능합니다.
:valid는 input의 값이 type, pattern, required 등의 제약 조건을 만족할 때, :invalid는 만족하지 않을 때 매칭됩니다. 예: input:invalid { border-color: red; }로 잘못된 입력에 빨간 테두리를 표시합니다. JavaScript 없이 CSS만으로 실시간 유효성 피드백이 가능합니다.
