저의 경우 다운로드를 많이 제공하다보니 이것 저것 신경을 많이 씁니다. 
어떻게하면 자연스럽고 깔끔하고 다른 사이트와 차별화되고 ...등등의 효과를 낼수 있을까?

최근에서야 롤오버효과를 내서 다운로드 이미지에 마우스를 올리면 이미지가 바뀌는 그런 링크를 제공했었습니다. 

이런글을 찾고자 하시는 분들이 혹시나 있을까싶어 일단 올려봅니다.
CSS HTML 에 저는 초보자격이니 이점은 알아두세요.

마우스 롤 오버 효과 내기

 

마우스 롤 오버효과내는 방법에는 몇가지가 있는걸로 알고 있습니다. 우선 제가 사용하는 이미지를 한번 보세요. 마우스를 올려보세요.

  • 프로그램명 다운로드
다운로드창으로 이동합니다


우선 HTML 에서 <head> 와 </head> 사이에 아래 소스를 추가합니다.
!! 치환자의 경우 ##_치환자_## 는 #\#_치환자_## 로 표시됩니다.!!
<!-- 마우스 오버효과 -->
<style type="text/css">
a.rollover img { border-width:0px; display:block; }
a.rollover img.rollover { display:none; }
a.rollover:hover { position:relative; }
a.rollover:hover img { display:none; }
a.rollover:hover img.rollover { display:block; }
</style> 
<!-- //마우스 오버효과 끝 -->
 
소스는 아래와 같습니다. 저의경우 프로그램명이 들어가야 보기좋기때문에 UL 을 썻습니다. 필요없는 분은 <UL ~ </UL> 까지 삭제하시고 사용하셔도 됩니다.
글쓰기하실때 HTML에 체크를 하고 입력하시면 됩니다.
대충 보시면 뭐가 뭔지 아실겁니다.
!! 치환자의 경우 ##_치환자_## 는 #\#_치환자_## 로 표시됩니다.!!
<!-- 롤오버효과 다운로드 이미지 시작 -->
<UL style="LIST-STYLE-TYPE: disc">
  <LI>프로그램명 다운로드</LI></UL>
<DIV id="downimg">
 <A class=rollover href="다운로드주소" target="_blank" /><IMG border="0" hspace="10" align="middle" src="첫번째 이미지주소" width="200" height="50" /><IMG class=imgover border="0" hspace="10" alt="다운로드창으로 이동합니다" align="middle" src="두번째 이미지 주소" width="200" height="50" /></A>
</DIV>
<!-- 롤오버효과 다운로드 이미지 끝 -->

소스는 공개했으니 초보자들도 금방 사용하실수 있을겁니다. 일단 다른 브라우져들도 이상없이 작동됩니다.
그냥 이미지에 링크를 거는것도 나쁘지 않습니다.
다운로드를 사용하실때 이미지를 가지고와서 그냥 사용하셔도 되고 저처럼 포토샵이나 그래픽툴로 약간 변경하신후 사용하셔도 됩니다.
우선 제가 사용하는 이미지를 올려드릴테니 사용하셔도 됩니다.


다운로드에 사용되는 이미지들입니다. 아래 이미지들도 활용가치가 있으니 사용하세요. 스크롤의 압박으로 더보기를 합니다.
전부 PNG 파일이며 배경색이 없는것입니다.



아이콘이나 그림은 ICON FINDER 를 사용하세요. 좋은 그림이 많습니다.

서식활용하기

 

위와같은 서식을 활용하는것은 cdmanii 님의 글을 보고 참고한것입니다.

블로그 서식 꾸미기 #1
블로그 서식 꾸미기 #2

저의 경우도 이런 방식으로 만들었습니다. 대략 사용하는것은 demun 이라는 서식이고 다운로드 라는 서식도 만들었습니다.
우선 demun 이라고 적힌거 소스를 보여드리겠습니다.
!! 치환자의 경우 ##_치환자_## 는 #\#_치환자_## 로 표시됩니다.!!
<!-- demun 서식 -->
<div style="border: 1px solid rgb(142, 142, 142); background-color: rgb(71, 71, 71); padding: 10px;" class="txc-textbox-download">
<br />
<br />
<br />
<br />
</div>
<style type="text/css">
 .txc-textbox-download{
 background: url(이미지 주소) no-repeat right top;
 color: rgb(232,232,232);
}
</style>

저의 경우 글을 중간에 쓸수 있게끔 아예 <br /><br /><br /><br /> 을 이렇게 넣었습니다. 그래야 demun 이라는 글이 나옵니다. 안그럽 공간이 좀 좁아서 demun 이라는 글이 안나오고 어차피 쓰게되면 한줄로 끝나는일이 거의 없습니다.

다운로드 받을때 사용하는 서식입니다.
우선 이미지로 보여드립니다. 서식을 같이 사용할경우 위에거와 동일하게 작동하더군요. 그래서 서식을 직접 보여드리지 못하고 이미지로 보여드립니다. 이건 왜 그런지는 저도 모르겠네요. 이 부분에 대해서 아시는분은 알려주세요.


이 다운로드 서식도 소스 공개합니다. 이미지 주소까지 모두 공개하니 필요하신분은 사용하세요.
!! 치환자의 경우 ##_치환자_## 는 #\#_치환자_## 로 표시됩니다.!!
<DIV style="BORDER-BOTTOM: rgb(142,142,142) 1px solid; BORDER-LEFT: rgb(142,142,142) 1px solid; BACKGROUND-COLOR: rgb(71,71,71); BORDER-TOP: rgb(142,142,142) 1px solid; BORDER-RIGHT: rgb(142,142,142) 1px solid" class=txc-textbox-download><br />
<br /><br />
<UL style="LIST-STYLE-TYPE: square; PADDING-LEFT: 150px">
<LI>프로그램명을 여기에 적습니다.<br />
</LI></UL><br />
</DIV><br />
<STYLE type=text/css>
 .txc-textbox-download{
 background: url(https://t1.daumcdn.net/cfile/tistory/1923971A4B062F0063) no-repeat center top;
 color: rgb(232,232,232);
}
</STYLE>

<br /> 이나 <ul> 은 제가 추가해서 사용한것입니다. 글을 쓰면서 한줄 띄고 , 띄고 그런것이기에 수정해서 사용하셔도 됩니다.
아마도 이렇게 사용하시면 수정없이도 사용이 가능합니다.
위의 서식을 얼마든지 만들고 수정 편집해서 본인이 원하는 스타일로 만들수 있습니다.
대체적으로 어두운색 배경에 밝은 글씨를 쓰는것이 보기에는 더 좋아보이더군요.