사용법어찌 : HTML A tag

HTML A tag: A 링크 태그에 직접 스타일 속성 지정하는 방법 - 색상 글꼴 밑줄 배경 온마우스

2019-05-01T05:12:00.006-04:00

블로그나 웹페이지에서, <A> 링크 태그의 속성은 헤드(head)에서 설정하여 일괄적으로 적용되는 것이 일반적이지만, 특정한 링크에만 다른 속성을 줄 필요가 있을 때는 아래와 같이 해당 링크에 직접 속성을 줄 수 있습니다.

[<A> 링크에 직접 스타일 속성 주기]

<a href="ojji.wayful.com" style="속성 지정">사용법어찌</a>

스타일 속성에는 여러가지가 있고, 원하는 속성을 지정하면 됩니다.
예)
글자 색상 속성 => color: red;
글자 꾸밈 속성 => text-decoration: none;
글자 크기 속성 => font-size: 1.5em;
글자 굵기 속성 => font-weight: bold;
배경색상 속성 => background: #eee;

[<A> 링크에 직접 스타일 속성을 준 태그 모양]

<a
href="ojji.wayful.com"
style="
color: orange;
font-size: 2.0em;
font-weight: bold;
background: #efefef;
"
>사용법어찌</a>

[위와 같이 <A> 링크에 직접 스타일 속성을 준 실제 모습]

사용법어찌

[참고: 개별적으로 속성을 주지 않고, <A> 링크에 기본 속성이 적용된 모습]

사용법어찌

[특정 페이지 안에서 여러 개의 링크에 같은 속성을 주는 방법]

특정한 하나의 페이지 안에, 여러 개의 <a>링크가 있고, 해당 페이지 안의 여러 개의 링크에 일괄적으로 같은 속성을 줄 필요가 있을 때는, 페이지 맨 위에 CSS로 클래스(class)를 설정하여 적용하면 편합니다.

아래에서, 빨강색으로 표시된 soksung 은 클래스 이름이고, 이름은 다른 클래스나 아이디(ID) 이름과 중복되지 않게 임으로 붙이면 됩니다. 클래스 이름 앞에는 점(.)을 찍어 줍니다.

[CSS로 같은 속성을 준 <A> 태그 모양]

[위와 같이 CSS로 같은 속성을 준 실제 모습]

블로그 브라우저 인터넷 메타트레이더 드라이브 애드센스

위에서,
<style type="text/css">
.....
</style>
부분은 해당 페이지 맨 위에 두고,

각각의 <A> 태그는 원하는 위치에 놓으면 됩니다. 그러면, 지정한 속성이 class="soksung" 가 포함되어 있는 <A>링크 태그에는 모두 적용이 됩니다.

HTML A tag / Button tag : 페이지 새로 고침 링크 / 버튼

2018-03-22T13:02:00.000-04:00

데이타를 새로 불러 오는 경우와 같이, 페이지를 새로 고칠 필요가 있는 경우가 있습니다.

방문자가 브라우저의 '새로고침' 버튼으로 할 수도 있지만, 그러한 기능이 필요한 페이지의 편리한 위치에 [새로 고침] 링크나 버튼을 두면, 페이지를 보는 방문자가 편할 것 같습니다.

방법은 여러가지가 있을 수 있을 것입니다. 아래와 같이, <A> 링크 태그와 <Button> 태그를 사용하여, 간단하게 [새로 고침] 기능을 할 수 있습니다.

페이지 새로 고침 <A> 링크

[실제로 적용한 모습]

[ 새로 고침 ]

페이지 새로 고침 <A> 링크 오른쪽 위치

페이지 새로 고침 <A> 링크 가운데 위치

페이지 새로 고침 <A> 링크 아이콘 버튼

[실제로 적용한 모습]

페이지 새로 고침 <Button> 태그

[실제로 적용한 모습]

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...
도움이 되기를 바랍니다.

HTML A tag: 글자(텍스트)로 버튼 만들기: DIV, SPAN

2015-04-18T09:04:00.001-04:00

사용법어찌

사용법어찌

특정한 위치에 간단하게 링크를 걸 때, 그림으로 만든 버튼 아이콘을 사용하지 않고, 간단하게 글자(텍스트)에 배경색과 테두리 속성 등을 주어 만들 수도 있겠다.

그림으로 만드는 것에 비해 예쁘지는 않을 수 있겠지만 잘 꾸미면 그림에 못지 않게 할 수 있을 것 같다. 가장 좋은 점은 간단하다는 것 말고도 그림이 불러 올려지지 않아 보기에 좋지 않은 일이 없다는 것이다.

예제의 위쪽과 아래쪽의 차이는 한 가지 뿐이다. 위쪽은 <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" <= 마우스가 버튼에 올라 갈 때 띄움말

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>

참고: 구글 블로그에서는 위의 코드를 넣으면 흩어져 제대로 되지 않는다.
해결방법은, 글쓰기(Post) 창의 HTML 모드에서 코드를 넣고, 작성(Compose)모드로 바꾸지 말고, HTML 모드에서 그대로 저장을 하고 발행을 하면, 코드가 흩어러지지 않고 제대로 된다.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML A tag: name=" " 같은 페이지(문서) 또는 다른 페이지의 특정 위치로 이동하기

2015-04-10T22:53:00.000-04:00

블로그나 웹페이의 특정한 위치로 이동하는 링크를 넣는 방법은, 이동하고자 하는 위치에 이름을 붙여 지정하는 일과 그 지정한 이름이 있는 위치로 가는 링크를 거는 일 두 가지로 나누어 생각할 수 있다.

1) 위치 지정하기
HTML 편집창에서, 아래와 같이 이름(name)을 붙인 <a>태그를 원하는 위치에 넣어 주면 된다.
"~~"부분은 이동할 목표지점에 붙인 임의의 이름이며, 숫자와 알파벳으로 적어 주면 된다. 여기서는 장미꽃 그림으로 가도록 하려고 이름을 쉽게 "jangmi"라고 붙였다.

2) 지정한 위치로 가는 링커 걸기
지정한 위치로 가는 링크는 두 가지를 생각할 수 있다. 하나는 링크와 같은 페이지 안의 특정한 위치로 가는 것이고, 둘은 다른 페이지 또는 다른 사이트의 특정한 페이지의 특정한 위치로 가는 것이다.

(1) 같은 페이지 안에서 이동할 때
같은 페이지 안의 특정한 위치로 가고자 할 때는 아래와 같이 <a> 태그의 이동할 위치 참조(href)에 #과 위치를 지정한 이름을 붙여 쓰면 된다.
아래는 같은 페이지 안에서 이름(name)이 jangmi로 붙여진 위치로 이동하는 태그 모양이다.

<a href="#jangmi">장미 구경하세요</a>

(2) 다른 페이지 또는 다른 사이트의 특정 페이지의 특정 위치로 이동할 때
위의 같은 페이지 안에서 이동할 때와 다른 점은 사이트나 페이지의 주소(URL)를 함께 적어 주는 것 뿐이다.

<a href="이동할 페이지의 주소(URL)#jangmi">장미 구경하세요</a>

실제 적용한 모습

구글 블로그의 다이나믹 템플릿에서는 이 기능이 제대로 작동하지 않는다.
구글 블로그의 다른 템플릿에서는 아래의 참고1과 같은 문제점과 해결방법이 있으므로 가능하다.
실제 적용한 예제 페이지 보기 >>

참고1: 구글블로그에서의 주의 사항

구글블로그에서는 <a>태그를 넣으면, 자동으로 href="~~~" 인자가 추가 되어, 이 기능이 제대로 작동하지 않는다. 아래의 보기에서 빨강색 부분이 자동으로 추가된 부분이다.

HTML 모드와 Compose 모드 사이를 이동을 하면 자동으로 주소 인자가 들어가서 오류가 생긴다.
해결 방법은, HTML 편집모드에서 태그를 넣은 다음, Compose 모드로 창을 바꾸지 말고, 그 상태에서 바로 저장후 발행을 하면 정상 작동한다.
이렇게 하더라도 다이나믹뷰에서는 되지 않는다.

그리고, 위치를 지정할 때 <a name="이름"> 다음에 </a>를 붙여서 마무리 해 주어야 한다.
즉, <a name="이름"></a> 와 같이 해야 한다.

<a name="jangmi"> 태그가 아래와 같이 바뀐다.

<a href="#jangmi">장미를 보세요</a> 태그가 아래와 같이 바뀐다

<a href="https://www.blogger.com/blogger.g?blogID=1234567890123#jangmi">장미 구경하세요</a>

참고 2: 구글 안내 페이지의 실제 태그 모양
아래는 구글의 블로그 안내 페이지에서 특정 위치로 이동하는 코드부분만 뽑은 예이니 참고 하면 도움이 되겠다.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML A tag: 다른 페이지의 특정 위치로 이동하기 예제 페이지

2015-04-10T22:30:00.003-04:00

이 블로그에 적용된 다이나믹뷰 템플릿에서는 이 기능이 제대로 작동하지 않으므로, 일반 템플릿에 예제를 만들어 두었으니 참고 하면 되겠다.
예제 페이지로 가기

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML A tag : 페이지의 특정 위치나 맨 아래로 가기(Go to Bottom) 둥근 버튼 만드는 방법

2015-03-31T01:00:00.000-04:00

페이지가 길 때는 페이지의 맨 위로 또는 특정한 위치나 맨 아래로 가기 버튼이 있으면 편할 경우가 많다. 맨 위로가기 버튼을 만드는 방법은 앞서 설명하였고, 이번에는 특정한 위치나 페이지 맨아래로 가기 버튼을 만드는 방법이다. (맨 위로가기 버튼 만드는 방법은 링크 페이지 참조)

버튼을 눌렀을 때 스크롤이 되는 위치를 지정하는 일과 버튼을 만들어 원하는 위치에 붙이는 일 두 가지로 나누어 설명한다.

1. 스크롤 위치 지정
=> 버튼을 누르면 어느 위치로 스크롤이 되게 하려는 지를 정한다.
=> 블로그나 웹페이지의 HTML 편집창에서 원하는 위치에 아래의 코드를 추가하고 저장한다.

ㅇ id 이름 (위 예에서는 gotobottom) 은 기억하기 쉬운 것으로 하면 된다. 다만, 다른 곳에서 이미 지정한 이름과 중복되면 안된다.
ㅇ 버튼을 누르면, 브라우저는 id가 'gotobottom'인 곳까지 스크롤다운 또는 스크롤업을 하게 된다.

아래의 그림은 구글블로그의 HTML편집창을 예로 든 것이며, 페이지의 맨 아래까지 스크롤 되도록 하고자 </body>태그 바로 위에 위치지정 코드를 넣었다.

2. 버튼 만들어 넣기
=> 아래에서 보는 것처럼, 버튼으로 쓸 그림을 다루는 <IMG> 태그와 링크를 걸 <A> 태그를 묶어서 만든다.
=> 만든 버튼 코드를 페이지나 블로그의 원하는 위치에 붙인다.

구글블로그에서는, 블로그의 HTML가젯으로 추가하면 되고, HTML가젯의 위치는 어디에 두든 상관이 없다. 다만, 다른 가젯 보다 위에 놓으면 다른 가젯보다 시간적으로 먼저 표시된다.

[지정한 위치로 스크롤되게 하는 코드]

<A>태그
ㅇ href="여기에 위에서 만든 id의 이름을 적는다" id의 이름 앞에 샾(#) 기호를 붙인다.
ㅇ title="~" 부분은 알기 쉽게 적어도 되고, 없어도 된다

ㅇ style=" ~" 에서, bottom과 right의 숫자를 페이지에 어울는 위치로 조정하면 된다. bottom은 브라우저의 맨 아래선으로부터 위쪽으로의 거리이고, right는 브라우저의 맨 오른쪽으로부터의 거리이다.

fixed는 위치를 고정시켜서, 페이지가 스크롤되어도 버튼은 같이 스크롤되지 않고 항상 그자리에 있게 하는 속성이다. 경우에 따라서는 같이 스크롤되도록 할 필요가 있을 수 있다. 그럴 때는 absolute나 relative 속성을 쓰면 된다. 이에 대한 자세한 설명은 링크 페이지에 자세히 설명되어 있다.

ㅇ rel="~" 부분은 없어도 되고 적어 주어도 된다. 검색엔진에게 이 링크는 따라가지 말라고 알려 주는 속성이다
ㅇ onfocus="this.blur()'은 버튼을 눌렀을 때, 버튼 둘레에 점선이 나타나지 않도록 한 속성이다. 없어도 되지만, 테두리 점선이 표시되면 다소 번잡하다면 넣어 주면 된다

<IMG> 태그
ㅇ src="여기에 버튼으로 쓸 그림 이미지의 URL주소를 적는다"
ㅇ style="~"에서 width는 그림의 가로길이, height는 그림의 세로길이를 말하고, border-radius는 테두리를 둥글게 하는 속성이다. 숫자를 조정하면서 잘 어울리도록 맞추면 된다

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML A tag: 맨위로가기(Go to the Top) 둥근 이미지 버튼 만들기

2015-02-23T19:25:00.001-05:00

*
페이지가 긴 경우에는 맨위로 올라가는(Go to the Top) 버튼이나 텍스트 링크가 있으면 편하다.

옆의 그림에서 보이는 맨위로 가기 버튼에 주어진 속성은 크게 두 가지다.
1) 페이지가 스크롤 되어도 브라우저 창의 특정한 위치에 고정되어 있다
2) 이미지의 크기를 적당히 줄이고, 둥글게 한다

단, 그림에서 보듯이, 둥글게 하는 속성은 크롬과 파이어폭스에서는 제대로 작동하지만 익스플로러에서는 작동하지 않는다.

그림과 같은 버튼은 이미지를 다루는 <img>태그와 링크를 거는 <a>태그 두 가지로 이루어져 있다.

곧, <img>태그로 이미지 크기와 둥근 모양을 만들고, <a>태그로 맨위로 가는 기능을 주고 브라우저의 특정위치에 고정되게 한다.

1. <img> 태그

1) src="이미지 주소(URL)" : 이미지가 저장되어 있는 주소, 곧 이미지를 불러올 수 있는 주소(URL)를 지정한다

2) style 속성에서
a) 이미지의 가로(width) 및 세로(height) 크기를 지정한다
b) border-radius 로 이미지를 둥글게 만든다. 수자를 적당히 조절하여 모양이 예쁘게 되도록 하면 된다.

2. <a> 태그

1) href 에 링크의 목적지를 "#"으로 지정하여, 링크가 클릭되면 현재 페이지의 맨 위로 이동하도록 한다
2) title은 링크의 이름을 지정하는 것이므로, 쓰지 않아도 되고 쓰도 된다

3) style 속성에서
     a) display: scroll을 추가하여 링크가 클릭되면 목적지 ("#")로 스크롤 되게 한다

     b) position을 fixed로 지정하여 페이지가 스크롤 되더라도 링크는 스크롤되지 않고 고정되어 있도록 한다
bottom은 브라우저의 맨 아래 선으로 부터의 거리이고, right는 브라우저의 맨 오른쪽 선에서 부터의 거리이다. 링크를 브라우저 창의 왼쪽에 두려면 left로 지정하면 된다

이 예에서는 링크의 위치를 브라우저의 맨 아래선에서 위쪽으로 30픽셀 지점과 브라우저의 오른쪽 선에서 왼쪽으로 5픽셀이 만나는 지점으로 지정한 것이다. 실제 적용했을 때의 위치는 위의 그림에서 보는 것과 같다

     c) onfocus에 'this.blur()'를 주어, 링크가 클릭되었을 때,테두리 점선이 나타나지 않도록 한다. 이 속성은 주지 않아도 되지만 테두리 점선이 나타나면, 보기에 따라 다르겠지만, 좀 어수선한 느낌이 들어 추가한 것이다

3. <img> 태그를 <a>태그로 둘러 싸기

위에서 만든 <img ~~ /> 태그를 <a> </a>태그로 싼다.
완성된 태그를 적용하면, 맨위 그림에서와 같은 위치에 맨위로가기 버튼이 만들어 진다.

참고로, 다이나믹뷰 템플릿에서는 제대로 작동되지 않는다.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML A tag : 링크의 글자색(font color on text link)을 지정하는 방법

2015-01-25T08:38:00.005-05:00

블로그나 웹페이지에서, <A> 링크 태그 속성은 <head> 영역에서 설정하여, 모든 링크에 일괄 적용되도록 하는 것이 일반적입니다.

경우에 따라서는, 특정한 링크에는 특정한 색상으로 표시할 필요가 있을 때가 있습니다. 그럴 때는, 아래와 같이 <A>태그에 색상을 지정해 주면 됩니다.

이 때, 두 가지 경우를 생각해 볼 수 있습니다.
1) 특정한 색상을 적용할 <A> 링크 태그가 하나 또는 두 개 정도라면, 아래 첫 번째 방법처럼, 해당 <A> 링크 태그에 직접 색상을 설정하는 것이 편합니다.

2) 특정한 색상을 적용할 <A> 링크 태그가 여러개인 경우에는, 아래 두 번째 방법처럼 클래스(class)를 사용하는 것이 간편합니다.

0. 색상을 지정하지 않은 예
이 경우는, 특정한 색상 설정을 하지 않았으므로, <head> 영역에서 기본으로 설정한 파랑색으로 표시 됩니다.

[링크의 글자에 색상을 지정하지 않은 예]

<a href="https://ojji.wayful.com">사용법어찌로 가기</a>

[실제 적용한 모습]
사용법어찌로 가기

1. <A> 링크 태그에 직접 색상을 설정한 예
이 경우는, <A> 링크 안에 직접 스타일(style)로 색상을 설정한 것입니다.

[링크에 직접 글자 색상을 빨강색(red)으로 지정한 예]

<a href="https://ojji.wayful.com" style="color: red">사용법어찌로 가기</a>

[실제 적용한 모습]
사용법어찌로 가기

2. <A> 링크 태그에 색상을 일괄 설정한 예
이 경우는, <A> 링크에 클래스(class)로 색상을 설정하여, 해당 클래스가 들어 있는 모든 <A> 링크에 동일한 색상이 표시되도록 한 것입니다.

[해당하는 모든 링크에 일괄적으로 빨강색(red)으로 지정한 예]

[실제 적용한 모습]
사용법어찌로 가기
사용법어찌 둘러보기

위에서, .glanlink 는 클래스(class) 이름이고, 클래스 이름은 기억하고 사용하기 편하게 만들면 됩니다. 이 예에서는 "글 안에 있는 링크" 라는 뜻에서 "gl an link" 라고 임의로 붙인 것입니다. 클래스 이름 앞에는 점(.)을 찍습니다.

위에서,
<style type="text/css"> .glanlink {color: red;} </style> 부분은 클래스가 적용된 첫 번째 <A> 태그 보다 위에 두면 됩니다.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML A tag: 링크 테두리 점선 없애기 : onfocus='this.blur()'

2014-02-14T01:38:00.001-05:00

사용법과 팁: 구글블로그, 텀블러, 크롬, 파이어폭스, 애드센스, HTML...

<A>태그로 링크가 걸려 있는 글자나 그림(이미지)을 클릭하면, 왼쪽의 앞쪽 그림과 같이, 주위에 링크영역을 표시하는 테두리 점선이 나타난다.

왼쪽 위에 있는 파랑색 트위터 그림은 테두리 점선을 없애는 속성을 주지 않았을 때의 모습이고, 오른쪽의 트위터 그림은 테두리 점선을 없애는 속성을 준 뒤에 클릭한 모습이다.

테두리 점선이 표시되지 않는 것이 깔끔한 장점도 있지만, 글 제목 등과 같이 글자로 된 경우, 여러줄에 하나의 링크가 걸려 있을 때는 테두리 점선이 표시 되는 것이 더 편리할 때가 있다.

[링크 영역 테두리 점선 없애기]

아래는 글자에 링크를 걸었을 때의 예이다.

[태그 모양]

<a href="링크 주소" >이 곳에는 속성을 주지 않았습니다</a>
<a href="링크 주소" onfocus='this.blur()'>이 곳에는 속성을 주었습니다</a>

[적용한 모양새: 클릭을 해 보세요]

이 곳에는 속성을 주지 않았습니다

이 곳에는 속성을 주었습니다

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML A tag: 위로 / 아래로 가기 버튼 달기 - 가장 간단한 방법

2013-10-28T00:01:00.000-04:00

블로그의 위아래 길이가 긴 때에는 마우스바퀴(휠)를 움직이거나, 오르내림막대(스크롤바)를 끌면 되지만, 한 번에 위로/ 아래로 갈 수 있는 단추가 있으면 좀 더 편한 것 같다.

여기서는 가장 단순하지만, 편한 방법을 설명한다.
작동 방식도 간단하지만,단추를 다는 방법도 간단하니 누구나 쉽게 할 수 있을 것이다.
아래의 태그를 적당한 위치에 넣어주면 된다.

구글블로그에서는
=> 블로그 대시보드 > 레이아웃(Layout) > 가젯넣기(Add Gadget) > HTML/Java Script 를 선택> 아래의 코드를 복사하여 넣고 > 저장하면 된다.

[아래의 코드를 넣은 뒤의 단추 모습]

위로/ 아래로 가기 태그

<a style="display:scroll;position:fixed;bottom:30px;right:3px;" rel="nofollow"
href="#" title="Back to Top" style="font-size:2.0em">위로↑</a>
<br />
<a style="display:scroll;position:fixed;bottom:10px;right:3px;" rel="nofollow"
href="#scrollbottom" title="Go to Bottom" style="font-size:2.0em">아래↓</a>

태그 설명

<a style="display:scroll;position:fixed;bottom:30px;right:3px;" rel="nofollow"
href="#" title="Back to Top" style="font-size:2em">위로↑</a>

속성 지정

bottom: 30px <= 블로그 창의 맨 아래에서 위쪽으로 30px
right: 3px <= 블로그 창의 맨 오른쪽에서 왼쪽으로 3px. 위치는 블로그에 잘 어울리고 방문자를 성가시게 하지 않는 곳에 정해 주면 된다.

href="#" <= 이동할 지점을 말하며, "#"으로 지정하면 보통의 경우 페이지의 맨위로 이동한다. 웬만한 템플릿에서는 잘 작동하는 것 같다. 아래로 가기에서는 위치를 지정해 주어야하는대 아래에서 설명한다.

font-size:2.0em <= [위로↑]의 글자크기를 본문 글자크기의 2배로 지정한 것인데, 템플릿에 따라 적용이 안되는 경우도 있다.

아래로 가기

'아래로 가기'의 경우도 기본적으로는 위로가기와 같지만, '아래로 갈 지점'을 정해 주어야 한다. 아래와 같은 방법으로 하면 된다.

=> 블로그 대시보드 > 템플릿 > HTML편집 창으로 간다

=> [컨트롤 + F ]키로 찾기상자를 열어 </body> 위치로 간다.
=> </body>바로 위에 <div id="scrollbottom"></div> 등과 같이 아래로 갈 위치를 지정해주고 템플릿을 저장한다.

예)
<div id="scrollbottom"></div>
</body>

※ <div id="scrollbottom"></div>에서 따옴표 안에 들어 있는 scrollbottom 부분은 규칙이 있는게 아니고 자기가 알아볼 수 있는 이름을 붙이면 된다.

정리하면 아래와 같이 되는 것이고, [아래↓]를 누르면 <div id="scrollbottom"></div>이 있는 곳까지 아래로 내려가는 뜻이다.

<div id="scrollbottom"></div>
</body>

<a style="display:scroll;position:fixed;bottom:10px;right:3px;" rel="nofollow"
href="#scrollbottom" title="Go to Bottom" style="font-size:2.0em">아래↓</a>

[아래↓]를 누르면 <div id="scrollbottom"></div>이 있는 곳까지 아래로 내려가는 뜻이다.

그림(이미지) 버튼 넣기

위의 예에서는 [ 위로↑ ]와 같이 그냥 글자와 기호를 넣었다. 이곳에 그림을 넣고 싶으면,
[ 위로↑ ]자리에 이미지 주소를 넣어 주면 된다.

아래의 예에서 그림주소URL 부분을 실제 이미지 주소로 바꾸어 주면 된다.

예)
<a style="display:scroll;position:fixed;bottom:30px;right:3px;" rel="nofollow"
href="#" title="Back to Top" style="font-size:2em">위로↑</a>

<a style="display:scroll;position:fixed;bottom:30px;right:3px;" rel="nofollow"
href="#" title="Back to Top" style="font-size:2em"><img src="그림주소URL" border="0"/></a>

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...