1. 첫번째 방법
<input type="image" src="images/btn_left_close2.gif" alt="닫기" /> 인풋에 바로 이미지경로를 넣어버리는 방법.
이 방법은 텍스트가 이미지에 박혀있어야해서 글자가 다른 모든 버튼을 만들어줘야한다.
2. 두번째 방법
<a href=""><img src="images/btn_calendar1.gif" alt="달력" /></a> 버튼이미지에 a태그걸어주는 방법.
테이블의 td에 인풋텍스트박스넣고 인풋버튼넣으면 같은라인인데도 들쭉날쭉 
다른방법도 있을테지만 td에 넣을땐 걍 맘편히 a태그로 걸어버리기도함둥!
(※ a태그로 버튼링크걸어서 만들면 키보드 엔터키로 버튼클릭안된다... 요런거 예민한 개발자님들 많으시당...
)
3. 세번째 방법
배경을 따로 만들고 글자를 value=""로 넣어주는 방법.
다만 글자수별로 버튼이미지와 css를 만들어줘야하는 수고는 있지만 일을 1/10로 줄일수 있따.
(※ BUT!!! 개발하기에 편리하고 입체효과 왕줘서 예쁘게하면 컨펌이 되긴하나... 액쎤 좋아하는 갑님이면 컨펌안된다.
마우스로 버튼을 클릭하기전 이미지, 마우스가 버튼에 올라갔을때 이미지, 마우스가 버튼을 클릭했을때의 3개의 이미지가 필요하다.
예를 들어 이 세번째 방법으로 버튼을 만들면 두글자인 모든 버튼은 이미지하나를 만들면 되지만 바로 윗글처럼 해야할땐 모~~~~든
버튼을 3개씩 만들어야하므로 버튼 이미지만드는데만도 하루가 걸린다능 노가다이야기...
그러므로 결론은!!! 프로젝트시 갑님의 성향을 후딱 파악하여 세번째의 울트라간단방법을 써도 되는지... 아니면 액쎤의 방법을 써야
하는지를 후딱 캐치하여 버튼에 삽질하지 않도록 한다.)
------------ style.css ------------------------------------------
.btn_txt2 { margin:0px; cursor: hand; font-size:11px; height: 18px; width: 52px; padding: 2px 0 0 15px; color:#ffffff; border: #ffffff 0 solid; background:#ffffff; background-image:url(../images/btn_txt2.gif); }
------------ 코딩시 버튼위치에 삽입 -------------------------------
<input name="button" type="button" value="두글">
4. 네번째 방법
세번째 방법을 알게된 이후 징그럽게 찾아본 방법이었는데... 앞에 이미지가 안나오는것이돠!!!!!! 내가 잘못한겐가!!! 아니면
이게 한계인 것인가!!! 흑 OTL
앞에 이미지도 나오게 방법 없을까효? ㅜ0ㅜ
button.gif: 
결과: 
------------ style.css ------------------------------------------
.button,.button a,.button button,.button input { position:relative; display:inline-block; text-decoration:none; border:0; height:18px; font:11px dotum,'돋움';line-height:18px; font-family:Tahoma, Sans-serif; white-space:nowrap; background:url(./image/button.gif) no-repeat; color:#fff;}
.button a:hover {line-height:18px;font:11px dotum,'돋움';}
.button a,.button button,.button input { left:2px; overflow:visible; padding:0 10px 0 8px; background-position:right top; cursor:pointer; _vertical-align:top; }
.button input {padding-top:1px;_padding-top:0;}
------------ 코딩시 버튼위치에 삽입 -------------------------------
<span ><input type="submit" value="저장하기" /></span>
5. 다섯번째 방법
버튼 액쎤! (마우스클릭전/마우스오버시/마우스클릭시)
좀 간단하게 만들 수 있는 소스 없을까효? 아시는분 손 번떡!
------------ script.js ------------------------------------------
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
------------ 코딩시 버튼위치에 삽입 -------------------------------
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseDown="MM_swapImage('Image1','','images/btn_modify_click.gif',1)"
onMouseOver="MM_swapImage('Image1','','images/btn_modify_.gif',1)"
onMouseUp="MM_swapImage('Image1','','images/btn_modify_.gif',1)"><img src="images/btn_modify.gif" alt="수정" name="Image1" border="0"></a>
--- 웹 표준 버튼 속성정리 ---
- 데이터 전송 및 취소 버튼 (input type="submit", input type="reset") : value 속성 대체
- 이미지 버튼 (input type="image") : alt 속성 대체
- button 요소 (button, input type="button") : 콘텐츠 자체를 요소로 가짐(텍스트 또는 이미지의 alt속성)
- 숨김 input (input type="hidden")