어제, 파일찾기를 만들었는데 난관에 봉착했다;

사실 파일찾기를 처음 코딩해 보는 입장이니; 대충 다른데서 많이 사용하는 방법을 이용했는데;

아오....익스에서 안먹힘 ㅠㅠ;; 몇 시간을 씨름하다가 검색을 통해; 한줄기 빛을 발견;


<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안에서 항상 텍스트 정렬이 내 맘대로 되지 않는 것에 대한 해결책;

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


아아 너무 감사합니다;


alt와 title의 차이점

둘 다 커서를 올리면(hover) 설명이 나오도록 해주지만


title은 일반적인 링크나 텍스트 등에 부가설명을 달 때 달아주고

<a href=" " title="이런 저런 이야기입니다">


이미지 설명에는 alt를 단다.

<img src=" " alt="이 그림입니다">

신고

'designband™ > web' 카테고리의 다른 글

구글링 잘하는 방법.txt  (0) 2014.05.29
[css] 파일찾기 이미지 버튼 넣기 & 정렬  (0) 2014.05.29
포털들의 새로운 디자인들..  (24) 2009.07.01
Tag // , , ,


|  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  10  |  ···  |  710  |