버튼 만들어 주는 사이트(서식만들기)
- 퍼블리셔/도구
- 2011. 2. 25. 06:00
1.2편에 이어서 이번에는 서식으로 지정해서 이용하는 방법을 알아보겠습니다.
1편에서 여러개의 이미지름 만들어보세요.
우선 제가 몇개 만들어놓은 이미지를 한번 보세요.
녹색 라운드 사각버튼 : http://d1nu2rn22elx8m.cloudfront.net/buttons/resources/images/transparent-green.png
남색 라운드 사각버튼 : http://d1nu2rn22elx8m.cloudfront.net/buttons/resources/images/transparent-blue.png
노랑색 긴 라운드 사각버튼 : http://d1nu2rn22elx8m.cloudfront.net/buttons/resources/images/premier-yellow.png
녹색 긴 둥근 버튼 : //d1nu2rn22elx8m.cloudfront.net/buttons/resources/images/rounded-green.png
이제 이미지주소도 알았으니 서식으로 지정해놓고 사용해보기로 하겠습니다.
1.2 편을 안보신분은 보시고 오셔야 합니다.
글쓰기를 클릭하세요.
아래 이미지를 참고하세요.
서식에 체크, 제목에 적당한 이름을 적어둡니다.
코드입력후 저장을 합니다.
코드는 아래와 같습니다.
<style type="text/css">
.download_button {
width:300px;
}
.download_button p.button{
background:url("http://d1nu2rn22elx8m.cloudfront.net/buttons/resources/images/transparent-red.png") no-repeat 0 0;
width:170px;
height:50px;
padding-top:20px;
text-align:center;
color:#fff;
}
.download_button p.button:hover{
background-position:0 -70px;
color:#000;
}
</style>
<!--
녹색 라운드 사각버튼 : http://d1nu2rn22elx8m.cloudfront.net/buttons/resources/images/transparent-green.png
남색 라운드 사각버튼 : http://d1nu2rn22elx8m.cloudfront.net/buttons/resources/images/transparent-blue.png
노랑색 긴 라운드 사각버튼 : http://d1nu2rn22elx8m.cloudfront.net/buttons/resources/images/premier-yellow.png
녹색 긴 둥근 버튼 : //d1nu2rn22elx8m.cloudfront.net/buttons/resources/images/rounded-green.png
-->
<div class="download_button">
<p class="button">Download</p>
<p>이글을 드레그해서 파일업로드하세요.</p>
</div>
한가지 이글을 드레그......는 드레그해서 해당영력이 지정됐을때 파일업로드를 통해 파일을 업로드하면 자리가 딱 맞습니다.
한가지 팁.
제가 주석을 표시하고 이미지주소를 넣은것은 하나의 글을 쓸때도 여러개의 이미지를 사용할수 있습니다.
맨위 red.png 는 빨강 이미지구요.
그아래 다른 이미지를 사용할때는 class 에 1자만 붙여서 재사용하시고 배경만 바꿔서 사용하세요.
예제코드는 아래로. 코드를 잘보시면 class 에 1.2 요렇게 붙여서 재사용하는겁니다.