[웹 UI 개발] 폼 - 3 / 폼 커스텀 (파일 찾기 버튼)

2023. 3. 29. 12:36

파일을 업로드 하거나 이미지를 업로드할 때 사용하는 file 타입의 input을 커스텀하는 방법에 대해 알아본다.

 

file 타입의 input의 기본 모양은 위 이미지와 같은 모습을 하고 있다.

파일 선택 버튼 영역과 선택된 파일명이 노출되는 부분은 css로 스타일링할 수 없는 부분이다.

 

그렇기 때문에 기능만 남겨두고 모양은 직접 만들어 커스텀하는 방법을 사용할 것이다.

 

 

기본형 커스텀

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>파일 찾기</title>
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/input_file.css">
    </head>
    <body>
        <h1>file 기본형 커스텀</h1>
        <div class="file_form">
            <input type="file">
            <span class="text">filename</span>
        </div>
    </body>
</html>

 

@charset "UTF-8";

body {
    padding: 50px;
}

h1 {
    margin: 50px 0 20px;
    font-size: 20px;
    font-weight: bold;
}

/*여기서부터 기본형 커스텀*/

.file_form {
    position: relative;
    display: inline-block;
    width: 198px;
    height: 38px;
    line-height: 38px;
    border: 1px solid blue;
}

.file_form::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 38px;
    background-color: blue;
    color: #fff;
    font-size: 12px;
    text-align: center;
    content: "파일찾기";
}

.file_form .text {
    display: block;
    padding: 0 50px 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file_form input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 38px;
    opacity: 0;
}

 

브라우저 화면

 

.file_form {
    position: relative;
    display: inline-block;
    width: 198px;
    height: 38px;
    line-height: 38px;
    border: 1px solid blue;
}

file_form에 커스텀하고자 하는 적당한 크기를 지정하고 꾸며준다.

 

.file_form::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 38px;
    background-color: blue;
    color: #fff;
    font-size: 12px;
    text-align: center;
    content: "파일찾기";
}

after 가상요소를 사용해서 file_form에 파일찾기 버튼을 만든다.

 

.file_form .text {
    display: block;
    padding: 0 50px 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

선택된 파일명이 보이게 되는 text에는 한 줄 말줄임처리가 되도록 한다.

그리고 after 가상요소에 의해 만들어진 버튼에 텍스트가 가려지기 때문에 오른쪽 padding을 50px 둔다.

 

.file_form input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 38px;
    opacity: 0;
}

마지막으로 원래 file 타입의 input은 position을 absolute로 두고 상우하좌를 모두 0으로 둬서 file_form을 꽉 채우도록 한다.

그리고 z-index를 10 정도로 둬서 요소들 중에 가장 앞에 있도록 한다.

opacity를 0으로 줘서 눈에 보이지 않도록하면 커스텀이 끝난다.

 

 

 

이미지형 커스텀

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>파일 찾기</title>
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/input_file.css">
    </head>
    <body>
        <h1>file 이미지형 커스텀</h1>
        <div class="file_form_img">
            <div class="img">
                <!-- <img src="" alt=""> -->
            </div>
            <div class="file">
                <input type="file" name="" value="">
            </div>
        </div>
    </body>
</html>

 

@charset "UTF-8";

body {
    padding: 50px;
}

h1 {
    margin: 50px 0 20px;
    font-size: 20px;
    font-weight: bold;
}

/*여기서부터 이미지형 커스텀*/

.file_form_img {
    width: 100px;
}

.file_form_img .img {
    position: relative;
    width: 100px;
    height: 100px;
    background: url(../img/default.png) no-repeat 50%;
    background-size: 100px auto;
    border-radius: 50%;
}

.file_form_img .img::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid #000;
    border-radius: 50%;
    content: "";
}

.file_form_img .file {
    position: relative;
    width: 82px;
    height: 24px;
    margin: 20px auto 0;
    background: url(../img/btn_file.jpg) no-repeat;
}

.file_form_img input {
    position: absolute;
    width: 100%;
    height: 24px;
    opacity: 0;
}

 

브라우저 화면

 

.file_form_img .img {
    position: relative;
    width: 100px;
    height: 100px;
    background: url(../img/default.png) no-repeat 50%;
    background-size: 100px auto;
    border-radius: 50%;
}

file_form_img의 img div를 가로세로 100px 크기의 원형("border-radius: 50%")으로 커스텀한다.

background에 이미지를 사용한다. 속성은 반복 x, 항상 중앙에 오도록 포지션 값을 50%로 둔다.

background-size는 가로 100px을 기준으로 보이도록 한다.

이렇게 설정해두는 이유는 지금은 css만을 다루지만 결국에는 js를 통해 사용자가 입력한 이미지를 보여주어야 하기 때문이다.

 

.file_form_img .img::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid #000;
    border-radius: 50%;
    content: "";
}

file_form_img의 img div에 가상요소 after를 이용해서 테두리를 그려준다.

 

.file_form_img {
    width: 100px;
}

.file_form_img .file {
    position: relative;
    width: 82px;
    height: 24px;
    margin: 20px auto 0;
    background: url(../img/btn_file.jpg) no-repeat;
}

file_form_img의 file div를 원하는 크기로 커스텀하고 backgroun에 준비한 이미지를 넣는다.

이 div가 중앙정렬("margin: 20px auto 0;")되도록 file_form_img의 width 값을 지정해주어야 한다.

 

.file_form_img input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 24px;
    opacity: 0;
}

마지막으로 file타입의 input을 커스텀한 file div 크기에 맞게 absolute로 조정해준다.

opacity를 0으로 줘서 보이지 않게 하면 끝이다.

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/web344

 

웹 UI 개발

부스트코스 무료 강의

www.boostcourse.org

'공부 > 웹 UI 개발' 카테고리의 다른 글

[웹 UI 개발] 반응협 웹 - 0  (0) 2023.03.30
[웹 UI 개발] 폼 - 4 / 폼 커스텀 (셀렉트 메뉴)  (0) 2023.03.29
[웹 UI 개발] 폼 - 2 / 폼 커스텀 (체크 박스, 라디오 버튼)  (0) 2023.03.27
[웹 UI 개발] 폼 - 1 / 폼 커스텀 (텍스트 박스)  (0) 2023.03.27
[웹 UI 개발] 폼 - 0  (0) 2023.03.27

BELATED ARTICLES

more

티스토리툴바