[CSS] input:valid

1. :valid , :invalid

• 가상클래스

• input에 입력된 값이 규칙에 맞으면 valid, 맞지 않으면 invalid

• 체크하고자 하는 input에 required 속성을 함께 주어 빈칸인지 아닌지로 유효성 기준을 줄 수 있음

2. input required

input 태그의 필수값을 지정할 수 있는 속성.

input 값을 빈칸인 상태로 submit을 하려하면 경고창을 띄워준다.

필수 입력사항에는 required 속성을 넣어 쉽게 체크할 수 있음

3. A + B

• : 인접 선택자, 앞의 요소 바로 뒤에 있는 요소만 선택함.

활용

• input 의 입력 여부에 따라 오른쪽에 [x] 버튼을 Show 하기 (앵귤러를 살짝 곁들여 기능 간단하게 추가)
• input이 invalid한 상태라면, 바로 뒤에 있는 요소 중 특정 클래스를 가진 요소에 display:none을 주어 숨김처리

➡️ 검색창에 검색어 입력했을 때, 입력된 검색어를 초기화 시킬 수 있는 버튼같은걸 구현할 때 편리할 것 같다.