:valid 와 :invalid 는 HTML 입력 요소의 유효성 검사 상태를 기반으로 스타일을 적용하는 CSS 가상 클래스 입니다.
:valid
입력값이 유효할때 적용됩니다. 사용자가 입력한 값이 HTML5에서 요구하는 형식에 맞는 경우 입니다. 사용자가 올바른 값을 입력했을때 특정 스타일을 적용하고, 필요한 경우 사용자에게 피드백을 제공하는데 사용됩니다.
:invalid
입력값이 유효하지 않을 때 적용됩니다. 사용자가 입력한 값이 HTML5에서 요구하는 형식에 맞지 않거나, 필수 입력 필드가 비어있는 경우 입니다. 사용자가 올바르지 않은 값을 입력했을 때 특정 스타일을 적용하고, 오류 메세지나, 시각적 피드백을 제공하는데 사용됩니다.
:valid 와 :invalid 를 통해 사용자가 올바른 입력을 하도록 유도하고, 잘못된 입력에 대해 즉각적인 피드백을 제공할 수 있습니다. 이러한 기능은 사용자 경험을 향상시키는데 큰 도움이 됩니다. 😃