상담문의 010-2343-0702

Home > 고객센터 > 자료실

자료실

자료실

위로 아래로 가기 링크걸기 태그

  • 하나솔루션
  • 2019-11-14 23:45:43
  • hit948
  • 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>
게시글 공유 URL복사
댓글[0]

열기 닫기

빠른상담 신청현황

  • 하**님이 문의하셨습니다.
    상담신청
  • 하**님이 문의하셨습니다.
    상담신청
  • 하**님이 문의하셨습니다.
    상담신청
  • 하**님이 문의하셨습니다.
    상담신청
  • 한**님이 문의하셨습니다.
    상담신청
  • 한**님이 문의하셨습니다.
    상담신청
  • 한**님이 문의하셨습니다.
    상담신청
  • 고**님이 문의하셨습니다.
    상담신청
  • 박**님이 문의하셨습니다.
    상담신청
  • 한**님이 문의하셨습니다.
    상담신청
  • 대**님이 문의하셨습니다.
    상담신청
  • 성**님이 문의하셨습니다.
    계약완료
  • 숙**님이 문의하셨습니다.
    계약완료
  • 만**님이 문의하셨습니다.
    계약완료
  • 주**님이 문의하셨습니다.
    상담완료
  • 성**님이 문의하셨습니다.
    상담완료
  • 현**님이 문의하셨습니다.
    상담완료
  • 하**님이 문의하셨습니다.
    상담완료
  • 이**님이 문의하셨습니다.
    상담완료
  • 정**님이 문의하셨습니다.
    상담완료

무통장 계좌번호

하나은행 : 661-910388-38207
예 금 주 : 하나솔루션(정지혜)

네임서버

1차 ns1.webit.kr 211.215.17.210
2차 ns2.webit.kr 211.215.17.212

서버 호스팅 주소

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

커뮤니티

  • 042-362-0702

  • 업무시간 : 월~금 오전9시 ~ 오후 6시

  • 점심시간 : 오후 12시 ~ 오후 1시

  • 토,일,공휴일, 국경일 : 휴무

상단으로 바로가기