PC나 태블릿 환경에서 가로로 나열돼 있는 구성요소들이, 모바일 환경에서는 세로로 쭉 이어지기 때문에 스크롤이 길어지기 일쑤이다. 그래서 '맨 위로 가기' 버튼을 만들어 넣기도 하고, 스크롤을 내려도 상단에 고정되는 기본 메뉴바를 마련하기도 한다. 여기서는 우선 티스토리 블로그를 기준으로, 가장 간단한 방법의 '맨 위로 가기' 버튼 적용 방법을 소개한다.
적용 소스
HTML(skin) 마크업
티스토리 블로그 관리자 모드로 접속해 skin.html에 다음 두 가지 소스를 넣어주어야 한다.
먼저 아래 코드를 <body>와 </body> 사이에 삽입한다. </body> 바로 앞에 넣는 것도 괜찮다.
이 코드는 'images/up-arrow-icon.png'라는 가로 55픽셀, 세로 55픽셀의 이미지를 '맨위로' 버튼으로 사용하겠다는 뜻이다.
<a id="toTop" href="#"><img src="./images/up-arrow-icon.png" width="55" height="55" alt="맨 위로"></a> 그 다음 아래 코드를 역시 </body>에 넣는다. 실제 스크립트를 구현해 주는 코드이다. 맨 위로 이동하는 속도를 조절하고 싶다면 'speed:1000'의 숫자를 조정하면 되고, 버튼이 나타나는 지점을 조절하고 싶다면 'start:400'의 숫자를 조정하면 된다. 아래 코드대로라면 스크롤을 400px만큼 내리면 '맨 위로' 버튼이 나타나게 된다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="./images/jquery.scroll.pack.js"></script>
<script src="./images/jquery.easing.js"></script>
<script>
//<![CDATA[$(function(){$("#toTop").scrollToTop({speed:1000,ease:"easeOutBack",start:400})});//]]> 버튼 이미지 파일 업로드
버튼 이미지 파일을 만들거나 무료 이미지 중에서 골라 '파일업로드'를 통해 업로드한다.
아래는 직접 만든 버튼 이미지이다. 만일 다른 이미지경로를 사용하거나 다른 이름의 파일을 사용하고 싶다면 맨 처음에 마크업한 내용에서 파일경로, 가로크기, 세로크기 등을 알맞게 수정해야 한다.
CSS 적용
두 가지 코드를 모두 넣었다면 style.css에 아래 코드를 추가하면 완성이다. 실제 적용 모습을 보고 적당히 bottom 여백과 right 여백 수치를 조절해 나가는 것이 좋다.
#toTop{background:none; position:fixed; bottom:1px; right:1px; cursor:pointer; text-decoration:none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:5px} 완성 화면
전체 코드 및 버튼이미지 내려받기
'열린노트 > IT·SW·디자인' 카테고리의 다른 글
| [마감] 티스토리 초대장 10장 배포합니다. (21) | 2015.03.01 |
|---|---|
| 네이버에서 티스토리 블로그 검색되게 하기 : 네이버 웹마스터 도구 (0) | 2015.02.28 |
| 웹 코딩에 필요한 CSS 단위와 사이즈 비교 표 (0) | 2015.02.24 |
| html의 기본 표(table) 코드 공유 (0) | 2015.02.21 |
| 티스토리에서 div 태그만으로 첨부파일 다운로드 버튼 꾸미기(CSS) (1) | 2015.02.05 |
이 글의 댓글