디자인검색
Home > 고객센터 > 자료실

자료실

자료실 위로 아래로 가기 링크걸기 태그
2019-11-14 23:45:43
하나솔루션 조회수 400
1.245.146.49
위로/ 아래로 가기 태그

<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>

HANASOLUTION

SERVER LOCATION

서울시 서초구 서초동 1710-1 SK 브로드밴드 IDC 1층

이미지명

WORKING HOURS

NAME SERVER

 1    ns1.webit.kr
  211.215.17.210
 2    ns1.webit.kr
  211.215.17.212
상단으로 바로가기