HTML A tag: 글자(텍스트)로 버튼 만들기: DIV, SPAN
사용법어찌
특정한 위치에 간단하게 링크를 걸 때, 그림으로 만든 버튼 아이콘을 사용하지 않고, 간단하게 글자(텍스트)에 배경색과 테두리 속성 등을 주어 만들 수도 있겠다.그림으로 만드는 것에 비해 예쁘지는 않을 수 있겠지만 잘 꾸미면 그림에 못지 않게 할 수 있을 것 같다. 가장 좋은 점은 간단하다는 것 말고도 그림이 불러 올려지지 않아 보기에 좋지 않은 일이 없다는 것이다.
예제의 위쪽과 아래쪽의 차이는 한 가지 뿐이다. 위쪽은 <div> 태그를 썼고 아래쪽은 <span> 태그를 썼다.
[위 예제의 실제 코드 모양: 위쪽 버튼]
<a
href="http://howways.blogspot.com/"
onfocus="this.blur()"
rel="nofollow"
style="text-decoration:none; color: white; display: scroll; left: 20px; position: absolute; top: 50px;"
target="_blank"
title="Home"
>
<div
align="center"
style="background: #41A641; border-radius: 17px; font-family: 굴림; font-size: 22px; font-weight: bold; height:auto; padding:5px 0px 5px 0px; width:150px; border-bottom:2px double gold;
">
사용법어찌
</div>
</a>
href="http://howways.blogspot.com/"
onfocus="this.blur()"
rel="nofollow"
style="text-decoration:none; color: white; display: scroll; left: 20px; position: absolute; top: 50px;"
target="_blank"
title="Home"
>
<div
align="center"
style="background: #41A641; border-radius: 17px; font-family: 굴림; font-size: 22px; font-weight: bold; height:auto; padding:5px 0px 5px 0px; width:150px; border-bottom:2px double gold;
">
사용법어찌
</div>
</a>
href="http://howways.blogspot.com/" <= 링크 목적지 주소
onfocus="this.blur()" <= 클릭했을 때 링크 주의의 점선 표시 안함
rel="nofollow" <= 검색엔진이 링크를 참조 추적하지 않음
style="text-decoration:none; color: white; display: scroll; left: 20px; position: absolute; top: 50px;" <= 버튼의 위치와 글자 색상 등
target="_blank" <= 링크 새창에서 열기
title="Home" <= 마우스가 버튼에 올라 갈 때 띄움말
align="center" <= 버튼안에서 글자의 가로 정렬
style="background: #41A641; border-radius: 17px; font-family: 굴림; font-size: 22px; font-weight: bold; height:auto; padding:5px 0px 5px 0px; width:150px; border-bottom:2px double gold; <= 버튼의 배경색, 가로 세로 길이, 테두리, 여백, 글자의 크기, 굵기, 글꼴 등
사용법어찌 <= 버튼에 표시될 글자
position:absolute; top:50px <= 이 속성은 버튼 위치를 지정하는 것이므로, 굳이 없어도 상관이 없다. 모니터 화면을 기준으로 하여 특정한 위치에 고정을 시키고자 할 때에만 쓰고, 그렇지 않으면 필요 없다.
[위 예제의 실제 코드 모양 : 아래쪽 버튼]
속성을 주는 방법은 위에서와 같다.
<a
href="http://howways.blogspot.com/"
onfocus="this.blur()"
rel="nofollow"
style="text-decoration:none; color: white; display: scroll; left: 20px; position: absolute; top: 85px;"
target="_blank"
title="Home"
>
<span
align="center"
style="padding:5px 18px 5px 18px; background: #41A641; border-radius: 15px; font-family: 굴림; font-size: 22px; font-weight: bold; height: 30px; width:150px; border-bottom:2px double gold;
">
사용법어찌
</span>
</a>
href="http://howways.blogspot.com/"
onfocus="this.blur()"
rel="nofollow"
style="text-decoration:none; color: white; display: scroll; left: 20px; position: absolute; top: 85px;"
target="_blank"
title="Home"
>
<span
align="center"
style="padding:5px 18px 5px 18px; background: #41A641; border-radius: 15px; font-family: 굴림; font-size: 22px; font-weight: bold; height: 30px; width:150px; border-bottom:2px double gold;
">
사용법어찌
</span>
</a>
참고: 구글 블로그에서는 위의 코드를 넣으면 흩어져 제대로 되지 않는다.
해결방법은, 글쓰기(Post) 창의 HTML 모드에서 코드를 넣고, 작성(Compose)모드로 바꾸지 말고, HTML 모드에서 그대로 저장을 하고 발행을 하면, 코드가 흩어러지지 않고 제대로 된다.
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...