[리액트] input [type='file'] 폼 꾸미기_🎵 / 버튼으로 파일 첨부

 

<React_ input[type='file]>

 

input 파일 첨부 폼 꾸미는 법에 대해 알아보자

 

---

 

<STUDY>

 

 

파일을 첨부하고 싶은 경우에 input 태그에 있는 type='file'을 사용한다.

<input type='file' />

 

그러면 아래 사진처럼 기본 폼이 나타난다.

하지만 이렇게 나타나는 것은 예쁘지 않으니 label을 사용하여 꾸며보자

 

 

1. label로 감싸고 htmlFor를 이용하여 input과 연결하기

<label className='inputFileLabel' htmlFor='inputForm'>
  업로드 // 버튼에 들어갈 원하는 글자
  <input className='inputFile' type='file' id='inputForm' />
</label>

 

   💡 input : 반드시 label 안에 들어갈 필요는 없음 - 원하는 위치에 놓으면 됨

 

   ❗ 주의할 점 : label의 htmlFor과 input의 id를 동일하게 입력해야 함

 

 

2. CSS로 label을 버튼처럼 꾸미기

 

   - 예시

.inputFile {
  display: none;
}

.inputFileLabel {
  color: #2E7D32;
  border: 1px solid rgba(46, 125, 50, 0.5);
  border-radius: 8px;
  background-color: rgba(46, 125, 50, 0.1);
  cursor: pointer;
  width: 90px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inputFileLabel:hover {
  background-color: rgba(239, 245, 241, 0.5);
}

 

   💡 input 에서 display: none 으로 보이지 않게 숨긴다

 

   💡 버튼 (label) 은 원하는 모양으로 커스텀

 

 

3. 결과

 

버튼이 예쁘게 커스텀 되었다

---

업로드한 파일을 미리보기 하는 방법은 다음 포스팅에서 정리해 볼 것이다.

 

---

 

내가 보려고 정리하는 리액트🔆

 

👉ez1n github 구경하기👈 

 

ez1n - Overview