Develop/Web (1) 썸네일형 리스트형 css만 사용해서 입력시 버튼이 나타나게 만들기 (feat. :placeholder-shown, peer) input 태그가 있는 페이지를 만들다 보면 input 태그에 입력유무에 따라 다른 요소의 css가 변경되게 하고 싶을 때가 있다. 그 때 tailwindcss의 peer 클래스와 :placeholde-shown 가상 클래스를 함께 응용하여 css만으로 구현할 수 있다. 구체적인 예시를 가져왔다. 이메일을 '입력하는 칸'과 '계속' 버튼이 있다고 하자. 내가 하고 싶은건 '계속' 버튼은 입력이 없을 때에는 안보이게 하고 싶다. 즉, 사용자가 한글자라도 입력을 할 때 '계속'버튼을 활성화하고 싶다. 이 때 tailwindcss의 peer와 가상클래스 :placeholder-shown을 응용하여 구현할 수 있다. 먼저 TailwindCSS의 peer로 input 요소의 입력 상태를 관찰하고, input 요소.. 이전 1 다음
