input box animation

🚨 코딩을 시작한지 얼마 되지 않았지만 역대 최고 삽질이였다^^
분명 어느 유투버의 동영상을 그대로 따라해서 기능을 구현한 블로그를 보고 따라했는데 1차 실패 후 계속 그냥 실패.
다 지우고 다시 차근 차근 따라했는데 '오, 애니메이션이 먹힌다!!!!!!!!! 근데 유효성 확인에서 실패^^' 진짜 머리 뽑을뻔 ㅎㅎㅎㅎㅎㅎㅎ
새로운 몸과 마음으로 한숨 푹 자고 운동하고 다시 차근차근 도전..!
응. 돌아가 또 실패 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ근데 어떡해 포기할 수 없잖아?
또 도전 ㅎㅎㅎㅎㅎㅎㅎ드디어 성공!!! 레알 소리질렀다 ㅎㅎ

요렇게 생긴 inputbox를 만들면서 label을 달아줬었고 실패한 두 번의 동영상 모두 label을 달고 해당 부분 css를 사용하여 애니메이션을 만들어줬는데 마지막에 참고한 영상에서는 label이 아닌 span을 사용하더라..!

요렇게 만들기 성공!
참고한 동영상에 있는 css는 내가 원하는 틀이랑 조금 달라서 첨부해서 만들고 내가 원하는 모양으로 조정만했다.
코드는 아래 동영상에서도 확인 할 수 있기에 참고 주소 첨부!

https://www.youtube.com/watch?v=PTGnpXbMU1U