TODOLIST
input 태그 커스텀
-
다자바스 프로젝트에서 input 태그를 커스텀을 시도헀다가 실패했었는데 이번 프로젝트에서 드디어 성공했다! 🚀🚀👊✨🌹🚀🚀 너무 기분 좋다. 생각보다 너무 쉬워서 이걸 왜 저번 플젝에서는 못한거지? 싶다. 다자바스 플젝 사진 수정하기에 들어가면 input태그의 긴 파일명이 보이는데 이게 s3에서 만들어준 주소라 꽤나 길어서 정말 보기 싫었었는데 조만간 고쳐야겠다 진짜 너무 기분좋다 !!!!!
-
로그인과 회원정보의 핵심은 input 태그에서 e.target.value인 부분인것 같다. e.target.value랑 디비에서 가져온 정보랑 비교하면서 유효성도 만들고 삼항연산자의 조건에도 계속해서 value값을 기준으로 브라우저에 뭘 보여줄지 결정하게 만들고 그러고 있다.
대강 데브로그에 기록한것.. // 블로깅 하자
- input 태그와 label태그를 id, for의 값으로 서로 연결시켜준다. (타입스크립트를 사용하는 경우 label의 태그 이름을 htmlFor으로 변경해서 사용한다)
<p>
<label for="team">hi</label>
<input type="text" id="team">
</p>label 태그인 hi를 클릭하면 input.current.focus()가 되는 데, input type='file' 인 경우에는 파일이 열린다. 이를 이용하여 label 태그 안에 수정 모양의 img태그를 넣어 hi대신 이미지를 나오게 했다. 그리고는 input태그에 visibility: hidden CSS 속성을 넣어 보이지 않게 만들었다.
