들어가기 전에

input에는 텍스트나 문자뿐만 아니라 파일을 업로드하거나 이미지를 업로드할 때 사용하는 file 타입이 있습니다. file 타입의 기본 모양은 아래와 같은 모습을 하고 있습니다.

파일 선택 버튼과 선택된 파일의 파일명이 나오는 영역으로 되어 있는데요. 버튼영역과 파일명이 노출되는 영역은 css로 따로 스타일링 할 수 없는 영역입니다. 그래서 이번 강의에서는 파일 찾기 버튼의 기본 기능만 이용하면서 모양을 바꿀 수 있는 지 알아보겠습니다.

파일 선택 버튼의 커스텀

파일 선택 버튼이 커스텀된 사이트들

• 네이버 타르트 - 댓글 사진첨부
• 네이버 프로필 이미지 변경
  

주요 기능 

• 파일 선택 버튼의 스타일링
• 파일 선택 버튼의 본래 기능 (파일 선택 창 오픈)

스타일 정보

• 기본 파일 선택 버튼의 스타일링
• 이미지 등록 버튼의 스타일링

주요 태그 및 속성 

• HTML
  • input:file
    
• CSS
  
  • opacity
    
  • position: absolute

제작하기  

1. CSS만을 이용한 파일 선택 버튼 커스텀

HTML 실습

<div class="file_form">
  <input type="file">
  <span class="text">filename..</span>
</div>

input의 file 타입을 커스텀하기 위해서는 앞에서도 설명했다시피 '파일 선택' 버튼영역과 '파일명' 이 나오는 영역은 따로 컨트롤이 불가능합니다. 거기에 '파일명'이 나오는 영역을 스타일링 할 수 있는 방법이 없어서 기능 자체를 남기고 커스텀하기 위해서는 텍스트가 노출되는 영역을 <span class="text">로 대체합니다. 이렇게 한다면 기본 기능만으로는 파일 선택을 구현할 수 없고 css 적용 후에 스크립트 후처리 작업으로 선택된 파일의 파일명이 해당 영역에 노출되도록 해야 합니다.

우리는 이번 실습에서 스크립트 후처리 작업 직전까지 html과 css만으로 표현하는 방법을 알아보겠습니다.

CSS 실습

1. input 가리기

input[type='file'] {
    display: none;
}

우선은 기본 input:file의 내용을 임시로 보이지 않도록 처리 하겠습니다. 이 부분은 뒤에서 다시 한번 수정을 하여 완성을 하겠습니다. 현재는 디자인에 영향을 끼치지 않게 하기 위해 편의상 아예 노출이 되지 않도록 했습니다.

2. file_form 커스텀과 텍스트 말줄임처리

input[type='file']{
    display: none;
}
.file_form { /* 기본 틀 구현 */
    display: inline-block;
    width: 198px;
    height: 38px;
    line-height: 38px;
    border: 1px solid cornflowerblue;
    font-size: 12px;
}
.file_form .text { /* 텍스트영역 말줄임 처리 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    padding: 0 50px 0 10px;
    white-space: nowrap;
}

감싸고 있는 file_form에 커스텀하고자 하는 적당한 크기를 지정 후에 border를 넣어 테두리를 지정했습니다. 

후에 텍스트가 노출되어야 하는 크기 만큼을 자리잡게 만들고 한줄 말줄임 처리합니다.

3. '파일 선택' 버튼 만들기

input[type='file']{
    display: none;
}
.file_form {
    position: relative; /* position 기준 */
    display: inline-block;
    width: 198px;
    height: 38px;
    line-height: 38px;
    border: 1px solid cornflowerblue;
    font-size: 12px;
}
.file_form .text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    padding: 0 50px 0 10px;
    white-space: nowrap;
}
.file_form .text:after { /* 버튼형태 구현 */
    position: absolute;
    top:0;right:0;
    width: 50px;
    background-color: cornflowerblue;
    text-align: center;
    color: #fff;
    content:'파일찾기';
}

여기 까지 소스가 작성된다면 우리가 원하는 모습의 아무런 기능이 없는 파일 선택의 형태가 만들어졌습니다. 여기에서는 :after를 이용해서 파일찾기 버튼을 만들어 줬는데요. 동일한 방법으로 버튼형태의 어떤 방식으로 구현해도 상관없습니다.

4. 기본 동작 구현하기

.file_form {
    position: relative; /* position 기준 */
    display: inline-block;
    width: 198px;
    height: 38px;
    line-height: 38px;
    border: 1px solid cornflowerblue;
    font-size: 12px;
}
.file_form .text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    padding: 0 50px 0 10px;
    white-space: nowrap;
}
.file_form .text:after { /* 버튼형태 구현 */
    position: absolute;
    top:0;right:0;
    width: 50px;
    background-color: cornflowerblue;
    text-align: center;
    color: #fff;
    content:'파일찾기';
}
.file_form input[type='file'] {
    background-color: rgba(0, 0, 0, 0.5);
}

우선은 가려두었던 input을 노출시키고 input 자체의 커스텀이 어떻게 되는지 이해를 돕기 위해 배경색을 넣어보겠습니다. 위와 같이 배경색을 넣는다면 불투명한 배경색이 길게 노출되고 있는 것을 확인 할 수 있습니다. 이제 이 input의 영역을 file_form 영역에 꽉차게 만들겠습니다.

.file_form {
    position: relative; /* position 기준 */
    display: inline-block;
    width: 198px;
    height: 38px;
    line-height: 38px;
    border: 1px solid cornflowerblue;
    font-size: 12px;
}
.file_form .text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    padding: 0 50px 0 10px;
    white-space: nowrap;
}
.file_form .text:after { /* 버튼형태 구현 */
    position: absolute;
    top:0;right:0;
    width: 50px;
    background-color: cornflowerblue;
    text-align: center;
    color: #fff;
    content:'파일찾기';
}
.file_form input[type='file'] {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 10;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

위처럼 position: absolute 속성을 이용해서 file_form에 꽉차도록 만들어줬습니다. 이제 file_form의 영역 어느 곳이나 눌러도 input이 클릭되도록 하여 마무리 해보겠습니다.

.file_form {
    position: relative; /* position 기준 */
    display: inline-block;
    width: 198px;
    height: 38px;
    line-height: 38px;
    border: 1px solid cornflowerblue;
    font-size: 12px;
}
.file_form .text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    padding: 0 50px 0 10px;
    white-space: nowrap;
}
.file_form .text:after { /* 버튼형태 구현 */
    position: absolute;
    top:0;right:0;
    width: 50px;
    background-color: cornflowerblue;
    text-align: center;
    color: #fff;
    content:'파일찾기';
}
.file_form input[type='file'] {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 10;
    width: 100%;
    opacity: 0;
}

확인용으로 넣어줬던 배경색을 삭제하고 opacity 값을 0으로 부여해서 input의 기능은 그대로 두고 형태는 감추는 것으로 마무리 됐습니다.

위와 같은 소스를 차례대로 따라 한다면 아래와 같은 변화를 보실 수 있습니다.

 2. 이미지 버튼을 이용한 프로필 등록 만들기

HTML 실습

<div class="file_form_img">
  <span class="img"><img src="default.png" alt="프로필 이미지"></span>
  <label class="file"><input type="file"></label>
</div>

이번에 만들 내용은 이미지 파일을 input으로 선택하여 업로드할 수 있는 프로필 이미지 등록과 같은 형태입니다.

먼저 이미지를 담을 수 있는 <span class="img">를 만들어 주고 input은 label로 감싸서 이미지버튼처럼 보이도록 꾸밀 것입니다. 파일명을 텍스트로 했던 것처럼 이미지를 선택했을 때 미리보기 형식으로 그 내용을 보여주는 것은 스크립트 개발로 처리 해야 하기 때문에 우리는 여기에서 label을 버튼 형식으로 꾸며서 기본 기능이 동작하도록 만들어 보겠습니다.

CSS 실습

1. img 영역 커스텀

.file_form_img .img {
    overflow: hidden;
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    border:1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}
.file_form_img .img img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

이미지 영역을 만들어 줬고 그 안에 들어오는 이미지 파일의 크기를 지정해 줬습니다. 이미지는 파일 선택으로 지정되는 이미지가 들어오게 될 것 입니다.

2. '파일 선택' 버튼 만들기 & 기본 input 가리기

.file_form_img .img {
    overflow: hidden;
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    border:1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}
.file_form_img .img img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}
.file_form_img .file {
    position: relative;
    display: block;
    margin: 10px 0 0;
    background:url(btn_file.jpg) no-repeat;
    width: 82px;
    height: 24px;
}
.file_form_img .file input[type=file] {
    position: absolute;
    z-index: 10;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    opacity: 0;
}

버튼 영역을 배경 이미지로 label에 대체하고 텍스트때와 마찬가지로 label의 영역 기준으로 input을 그 위에 꽉차게 하여 label을 눌렀을 때 기본 동작이 가능하게 만들어 주었습니다. 

3. 완성하기

.file_form_img {
    width: 100px; /* 프로필 등록 사이즈 지정 */
}
.file_form_img .img {
    overflow: hidden;
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    border:1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}
.file_form_img .img img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}
.file_form_img .file {
    position: relative;
    display: block;
    margin: 10px auto 0; /* 버튼 가운데 정렬 */
    background:url(btn_file.jpg) no-repeat;
    width: 82px;
    height: 24px;
}
.file_form_img .file input[type=file] {
    position: absolute;
    z-index: 10;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    opacity: 0;
}

최종적으로 간격등을 조정하여 완성하겠습니다.

위의 단계로 따라한다면 아래 순서와 같은 형태로 변화합니다.

요약정리 

opacity의 활용

이번 강의에서 css로 컨트롤 할 수 없는 input의 file 타입을 커스텀하는 다양한 방법에 대해서 알아봤습니다. 세부적인 컨트롤이 불가능 하다면 opacity값을 0으로 부여해서 가시적으로는 요소가 보이지 않지만 클릭 등의 기본 동작은 남아 있는 특성을 이용하여 대체 텍스트나 이미지 등으로 교체 하는 방법을 이용 할 수 있었습니다.

z-index의 이해

input을 position:absolute 를 부여해서 레이어화 시켜서 클릭하는 방법을 사용했습니다. 하지만 레이어화와 동시에 생각해야 할 것이 z-index 값입니다. z-index는 레이어화 된 요소들의 우선순위를 정해주는 속성입니다. 이 속성을 제대로 사용하지 않는다면 우리가 만들고자 했던 예제들이 이미지나 다른 요소들에 가려져서 제대로 클릭되지 않을 수 있기 때문에 이 속성을 제대로 알고 사용해야 합니다.

참고 링크