Sen's Sitcom

<input type="file".../> 태그의 "파일 찾기" 버튼을 이미지로 대체하는 방법에 대해 소개하겠습니다.

1. 교체할 이미지의 크기와 일치하는 div 태그를 만듭니다. 

<div id="divFake" style="position:relative; left: 2px; width: 67px;height:27px; overflow:hidden;"></div>

위의 div 태그안의 width, height는 이미지 파일과 상관이 있고, left 속성은 이미지가 살짝 밀려서 위치가 뜨는(?) 문제로 지정한 것이니

경우에 따라 안해주셔도 됩니다.

overflow:hidden은 좀 있다가 설명 ㅋ

2. 만들어준 div 태그 안에 <input type="file".../> 태그를 넣어줍니다.

<input id="file" name="filea" type="file"

style="font-size: 23px; position: absolute;right:0px;top:0px; opacity:0; filter: alpha(opacity=0);cursor: pointer;"/>

폰트 사이즈를 크게하면 브라우저에서 지원하는 '파일찾기' 버튼의 크기가 커지게 됩니다.

div태그의 속성 중에서 overflow:hidden 으로 했으니 div를 벗어나는 부분은 보이지 않게 됩니다.

그럼 버튼부분만 보이게 됩니다. 그런데 이 부분에서도 주의해야하는게 폰트를 크게 했어도 버튼은 보이지 않고 오히려

빈칸만 보일 수가 있습니다. 그 이유는 그 이전 태그들의 정렬규칙을 따라가기 때문입니다. 따라서 버튼이 보이지 않고 파일 경로가

나오는 부분만 보일때 해당 경우가 있는지 확인해주셔야 합니다.

filter: alpha(opacity=0); 속성은 파일찾기 버튼의 기능이 수행되지만 모습은 보이지 않게 하는 역할을 해줍니다.

왜 그런지는 저도 공부를 더 해야....OTL

cursor: pointer; 속성은 위와 같이 <input type="file".../> 태그에 해줘도 되고 뒤에 붙일 이미지 태그에 해줘도 됩니다.

자. 여기까지 성공하셨으면 이제 마무리만 남았습니다.

3. 이미지 파일 입히기

<input type="file".../> 태그뒤에 이미지 태그를 붙여줍니다.

ex) <img src="/images/btn/btn_file_serch.gif" alt="찾아보기"/>

그래서 전체 html 코드는..!

<div id="divFake" style="position:relative; left: 1px; width: 67px;height:27px; overflow:hidden;">

   <input id="file" name="filea" type="file"

style="font-size: 23px; position: absolute;right:0px;top:0px; opacity:0; filter: alpha(opacity=0);cursor: pointer;"/>

   <img src="/images/btn/btn_file_serch.gif" alt="찾아보기"/>

</div>

여기에 추가로 원래 태그에 보이는 파일 경로를 다른 <input>태그에 넣어주는 것까지 하면 완벽하게 원래 기능을 대체할 수 있습니다.

사용자가 보는 부분만 변하고 실제 동작은 여전히 <input type="file"...> 태그가 하기 때문입니다.

- 2013.12.30 추가내용

'파일찾기'버튼을 이미지로 변경했다손 치더라도 원래의 파일 경로를 복사해주는 부분은

브라우져 보안이슈상 더이상 구현할 수 없는 부분입니다.

[출처] input type="file" 의 '파일찾기' 버튼을 이미지로 대체하기|작성자 moonv11

http://blog.naver.com/moonv11/60163211002

div 안에 텍스트를 수평중앙정렬하기 위해서는 text-align:center; 스타일을 주면 된다.

div 안에 텍스트를 수직중앙정렬을 하려면 vertical-align:middle; 스타일을 주면 될 것 같지만, 되지 않는다.

div 가 아닌 테이블의 경우 자동으로 수직으로도 정렬이 된다.

div 에서 수직으로 중앙정렬하기 위해서는 스타일에 display:table-cell; 속성을 주면 된다.

<div style="height:300px;text-align:right;display:table-cell;vertical-align:middle;">로그인 | 회원가입</div>

하지만 IE에서는 8.0 이상부터 위의 속성이 적용된다.

꼼수로는 div 의 height 값을 line-height 값과 동일하게 주면 된다.

<div style="height:300px;text-align:right;line-height:300px;">로그인 | 회원가입</div>

http://dantes.kr/410