안녕하세요 냥장판 입니다
티스토리 블로그에는 맨 위로가기 버튼이 없어요
그래서 한번 만들어 보도록 할게요
HTML 문서를 수정하면 되는데요.
HTML에서 Link 태그를 이용할 거에요
Link 태그를 사용해서 맨위로가기 만드는 건 아래 게시글 참고하세요
2020/01/11 - [놀고있네/HTML & CSS] - [HTML] Link 태그 사용하기 - 맨위로 이동
[HTML] Link 태그 사용하기 - 맨위로 이동
목표: Link 태그를 활용해서 맨위로 이동 구현하기 요약 id(아이디) 달아주기 href에 해당 id 링크하기 안녕하세요 냥장판 입니다 웹페이지를 쭉 내리다가 맨 위로(페이지 상단) 올라가고 싶을 때가 있죠? 웹서핑..
miaow-miaow.tistory.com
1. HTML 문서 수정 페이지 > 이미지 파일 업로드
블로그 관리페이지로 들어가면, 스킨 편집 메뉴가 있어요
우측에 스킨편집 > HTML 버튼을 누릅니다.
파일 업로드 메뉴로 들어가요
아래 추가 버튼을 클릭하고, 이미지를 업로드해요
이미지 파일명을 꼭 기억해두세요
제가 올린 이미지 파일은 up-arrow.png 파일입니다.
파일 주소는 images/up-arrow.png 입니다.
2. HTML에 소스 추가
HTML에 소스를 추가해야되요.
<!-- 맨 위로가기(Top) -->
<a style="display:scroll;position:fixed;bottom:15px;right:15px;" href="#" title=Top>
<img src=./images/up-arrow.png border="0"/>
</a>
<!-- 맨 위로가기(Top) 코드 끝-->
코드 설명해드릴게요
style 속성에서 사용한
display:scroll 스크롤하면서 보여주겠다
position:fixed 이미지 위치는 고정이다
bottom, right 오른쪽 아래에서 얼만큼 떨어져서 이미지를 표시하겠다
href="#"는 가장 위로 이동하겠다는 거에요.
만약에 특정 id를 가진 컨텐츠로 가고싶을 땐 #id 해주면 됩니다.
img src=./images/up-arrow.png
꼭 이미지 이름 맞춰주세요!
꼭 <body> </body> 사이에 코드 붙이세요!
결과 영상은 아래와 같고요.
결과 영상 아니더라도
오른쪽에 화살표 모양 보이시죠?
그럼 이만!
'🎸 기타' 카테고리의 다른 글
| [Tistory] Sitemap, 사이트맵 만들기 - XML Sitemap Generator (6) | 2020.01.17 |
|---|---|
| [Tistory] robots.txt 파일 수정 & 검색 엔진 & 메타 태그 (17) | 2020.01.14 |
| [Tistory] Sitemap, 사이트맵 등록 (NAVER - Webmastertool) (10) | 2020.01.08 |
| [Tistory] Sitemap, 사이트맵 등록 (Google - search console) (0) | 2020.01.08 |
| [Tistory] Sitemap, 사이트맵 만들기 & tistory 링크복사 하는법 (21) | 2020.01.07 |
댓글