브라우저에서 파일 업로드를 할 때
디자인을 입히지 않으면 화면이 부자연스럽습니다.
이런 경우 label을 사용하거나 before/after를 사용해서 디자인 하는데
저는 before/after를 사용하겠습니다.
css를 살펴보면 다음과 같이 작성했습니다.
input 태그에 "uploadBtn"이란 id를 주고 width를 100px로 했습니다.
아래부터 중요한 내용이 나오는데 "content"라는 속성을 사용했습니다.
content는 태그 앞 또는 뒤에 텍스트나 이미지를 추가할 수 있게 해주는 속성입니다.
before에는 content에 빈 문자열을 추가했고, 배경으로 "download.png"를 주었습니다.
after에는 content에 "파일첨부"라는 텍스트를 추가했습니다.
이렇게 css를 작성하고 나면 다음과 같이 화면이 출력됩니다.
위에서 작성한 디자인이 적용된 것을 확인할 수 있습니다.
파일을 첨부한 다음에 파일 이름을 content로 표출하고 싶다면
자바스크립트 "change" 이벤트 핸들러를 사용하면 됩니다.
'dev > css' 카테고리의 다른 글
| media query (0) | 2021.07.27 |
|---|---|
| css ... 처리 (0) | 2019.09.22 |
| css 우선 적용 (0) | 2019.03.13 |