CSS

[CSS] 파일 업로드 버튼 예쁘게 바꾸기

2023. 2. 12. 21:07
목차
  1. 예시 코드

자 오늘은 파일 업로드 버튼에 관련된 이야기다. 사실 파일 업로드 버튼의 기본 style은 보기 좋지 않다.

그렇기 때문에 오늘 준비한 내용! CSS로 파일 업로드 버튼을 예쁘게 바꾸는 방법.

 

예시 코드

자 일단 HTML파일에서 

<label for="file">
        Add Photo
        <input type="file" accept="image/*" id="file" />
</label>

이렇게 작성해 준다. 일단 여기서 중요한 점은 label안쪽에 텍스트와 함께 파일 업로드 input를 배치해 주면 되는데, label의 for과 파일 업로드 input의 id가 같아야 한다. 

 

자 이제 CSS에서 

input#file {
  display: none;
}

이렇게 작성해 주자. 위 코드는 file의 id를 가진 input의 display를 none로 해서 보이지 않도록 하는 작업이다.

label {
  all: unset;
  padding: 10px; /*padding를 주어 텍스트를 바탕으로 주변이 10px만큼 떨어지도록 설정*/
  text-align: center; /*버튼에서 텍스트가 가운데 있도록 설정*/
  background-color: royalblue; /*배경 색을 설정(원하는 걸로 바꿔도 됨)*/
  color: white; /*글자 색*/
  font-weight: 500; /*폰트 사이즈를 500으로 바꿈*/
  cursor: pointer; 
  border-radius: 10px; /*버튼의 둥근 정도를 설정*/
  transition: opacity linear 0.1s;
}

자 여기까지 잘 만들었다면 아래와 같이 멋진 파일 업로드 버튼을 만들 수 있다

파일 업로드 버튼 완성 이미지

이 글의 내용 중 일부는 '노마드코더' 의 강의를 참고했음을 알립니다.
저작자표시 비영리 변경금지 (새창열림)
  • 예시 코드
'CSS' 카테고리의 다른 글
  • 애니메이션이 흔들리거나 이상하게 나올 때 대처법 [will-change]
  • CSS 마우스 포인터 지정(예.마우스 올렸을 때 클릭 모양으로 바꾸기) - 코딩 너마저
코딩 너마저
코딩 너마저
HTML, CSS, 자바스크립트(프론트엔드, 백엔드) 에 대해 쉽게 풀어서 알려줍니다.
코딩 너마저
코딩 너마저
코딩 너마저
  • 분류 전체보기 (7)
    • HTML (0)
    • CSS (3)
    • JavaScript(프로트엔드) (0)
    • JavaScript(백엔드) (2)

블로그 메뉴

  • 홈

공지사항

태그

  • 쿠키
  • 마우스포인터
  • 로그인
  • iron-session
  • CSS
  • session

최근 댓글

최근 글

hELLO · Designed By 정상우.
코딩 너마저
[CSS] 파일 업로드 버튼 예쁘게 바꾸기
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.