background-position을 이용한 버튼 방법.
예시
1.이미지준비 검정색버튼 - width:175px; height:45px; 주황색버튼 - width:59px; height:20px; 2.코딩방법 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>하나의 이미지로 버튼만들기</title> <style type="text/css"> a { display:block; margin:10px 0; padding:0; background:url(button.png); } .btn01 { background-position:0 0; width:150px; height:50px; } .btn02 { background-position:0 -50px; width:175px; height:45px; } .btn03 { background-position:0 -95px; width:59px; height:20px; } </style> </head> <body> <a href="http://jaguarkim2108.blogspot.kr/" class="btn01"></a> <a href="http://jaguarkim2108.blogspot.kr/" class="btn02"></a> <a href="http://jaguarkim2108.blogspot.kr/" class="btn03"></a> </body> </html> |
