[HTML/CSS] input type="file" 버튼 커스텀 해서 바꾸기

그냥 <input type="file" ...> 이렇게 하면 브라우저 마다 다른 모습으로 나오게 되는데

디자인 알못인 제가 봐도 구립니다.

그래서 커스텀 할 수 있는지 검색해봤는데 역시나 되더라고요.

label의 for 속성을 사용해서 label을 클릭해도 input이 클릭되도록 연동하는게 핵심입니다.

실제로 동작하는 예시:

코드와 디자인은 검색해서 봤던 코드를 썼는데 좀 밋밋해서

마우스 이벤트에 따라 색이 변하도록 제가 따로 넣었습니다.