HTML - input file 버튼 꾸미기
이번 글에선 HTML 에서 기본적으로 제공하는 input 태그의 file 속성일 때의 모양을 바꿔보려고 한다. 열심히 구글링을 해본 결과 보안상의 문제로 직접 input 태그에 변경을 가할 수는 없다고 한다. 따라서 input 태그에 속성을 넣는 게 아닌 약간의 편법?을 이용해서 업로드 버튼처럼 보이게 만들어야 한다. 먼저, 파일의 이름을 출력할 가짜 input 태그를 넣자. <input type= "text" id= "file_route" disabled= "disabled" value= "파일 선택" > value 에 안내 문구를 넣었고, disabled를 지정했기 때문에 커서를 옮겨도 아무 것도 할 수 없다. 잘 생성됐다. 이제 오른쪽 버튼과 "선택된 파일 없음" 문구를 없애고 새 버튼을 만들어야 하는데 label과 style 속성을 잘 활용해서 없애보자. <input type= "text" id= "file_route" disabled= "disabled" value= "파일 선택" > <label for= "upload_file" style= "border: solid 1px black;" > 업로드 </label> <input type= "file" id= "upload_file" accept= "image/*" required= true style= "position:absolute; clip:rect(0, 0, 0, 0);" > label 태그는 for 속성으로 연결한 id의 태그와 자신(라벨)을 연결해 준다. 즉, "업로드" 를 클릭해도 input 태그를 클릭한 것...
댓글
댓글 쓰기