2010. 9. 11. 22:13ㆍIT/Tistory Tips
블로그를 돌아다니다 보면 화면 오른쪽 아래에 '맨 위로'나 'Top', 또는 
일단 같은 페이지에서 특정 위치로 이동하는 원리를 살펴보면 div나 a name 태그로 특정 위치의 명칭을 지정하고 그다음 a href에 경로 대신 "#위치 이름"을 입력해서 해당 글자나 그림을 클릭하면 지정한 위치로 이동하게 하는 방식이다. 간단히 이야기하면 링크를 거는데 다른 사이트가 아닌 현재 페이지의 특정 위치로 링크를 건다고 생각하면 된다. 정리하면 이미지를 올리고 그 이미지에 링크를 거는데 그 링크 대상이 특정 사이트가 아니라 같은 페이지의 특정 위치라는 이야기다.
그런데 이렇게 그냥 링크만 걸면 아이콘을 클릭했을 때 정말 지정한 위치로 뿅 하고 날아간다. 1초도 안 걸린다. 순식간.
앗, XX네 블로그 가서 눌러보니 쓔~우~웅~ 하면서 천천히 멋지게 이동하던데!!!
그건 여러 방법이 있는데 다른 분이 미리 만들어둔 자바스크립트를 사용하면 간단히 해결할 수 있다. 전체를 정리해보면
1. 그림을 올리고
2. 천천히 이동하도록 하는 자바스크립트를 올리고
3. 스킨을 수정한다. 끝!!
 |
 |
일단 사용할 그림을 찾아서 올려야 한다. G글이나 N이년에 무료 아이콘을 검색해서 원하는 그림을 선택한다. 아이콘은 보통 ICO나 PNG 파일로 배포될 텐데 PNG 파일을 내려받는다. 그다음 smoothscroll.js 파일을 내려받는다. 이제 티스토리 관리자로 이동해서 [스킨] - [HTML/CSS 편집]을 클릭한다. HTML/CSS 편집 창이 나타나면 파일 업로드 탭으로 이동하고 [파일 업로드] 단추를 눌러서 준비한 그림과 smoothscroll.js 파일을 올린다.
</body>
자, 이제 절반은 끝났다. 이제 HTML/CSS 탭으로 이동한 다음 skin.html을 수정한다. 위의 붉은 글씨 부분을 </body> 바로 위에 붙여 넣는다. (이미지의 >/head>는 무시) 앞에서 올린 smoothscroll.js를 사용하겠다고 선언하는 것이다. 이 줄이 들어가지 않으면 클릭하는 순간, 뿅 하고 순간 이동이다. 부드럽게 스르륵 움직이려면 이 줄을 꼭 추가해야 한다. (smooth scroll을 구현하는 방식은 다양하지만, 그냥 그 중 하나를 선택한 것일 뿐이다.)
이제 skin.html을 좀 열심히 들여다봐야 한다. </head> 조금 아래를 찾아보면 <body ~~~~~~> 바로 아래 <div id=XXXXXX>라는 부분이 있을 것이다. 위 그림에서는 <div id="header">라고 되어 있다. 여기서 id= 뒤에 있는 header가 이 위치에 대한 주소다. 또 조금 아래를 보면 <div id="top">이라고 된 부분도 보일 것이다.
위의 소스를 살펴보면 내 블로그 스킨에서 header와 top의 위치는 위 그림처럼 규정되어 있다는 것을 알 수 있다. 이것이 이동할 위치가 되는 것이다. 태그를 모르더라도 일반적으로 페이지 제일 위가 header고 글 제목부터가 content, 페이지 가장 아래가 footer다. top은 스킨에 따라 있을 수도 없을 수도 있다. 그냥 제일 위로 가는 기능을 지정하려면 header로 하면 대부분 OK다.
여기서 잠깐, 젤 위로 가는 건 #을 써서 <a href="#">TOP</a>이라고 하면 간단히 해결되는데 왜 복잡하게 스킨 파일을 뒤지고 있느냐고? 앞의 TOP이란 글자를 클릭해보면 안다. 단순한 이유다. #만 입력하면 맨 위로 가지만 smooth scroll이 안된다. 다른 방법이 있겠지만, 나는 모르니 pass.
이제 skin.html의 맨 끝으로 이동한다. 끝 부분을 잘 찾아보면 <div id="footer">란 부분이 있고 거기서 계속 따라 내려가다 보면 </div>가 나오면서 footer 부분이 닫히는 것을 확인할 수 있다. 스킨에 따라선 <!--/footer -->와 같은 주석 처리로 footer가 끝났다고 표시하기도 한다. 바로 그 아래에 다음의 내용을 추가하면 된다.
<a href="#header"><img src="그림 전체 경로" style="width:32px; height:32px"/></a>
</div>
위의 태그 내용을 간단히 살펴보면, div id는 이 부분을 구분 짓는 명칭을 지정하는 것이다. 원하는 이름을 입력하면 되는데 이전에 나왔던 header나 content, footer 등 겹치는 이름은 안된다. 그다음 style은 div로 지정할 영역의 스타일을 설정하는 부분이다. position: fixed; 는 스크롤 할 때 화면과 같이 스크롤되는 것이 아니라 계속 똑같은 자리에 고정한다는 의미다. 마치 웹사이트가 아니라 모니터에 붙여놓은 것처럼 스크롤을 해도 항상 같은 자리를 유지한다. bottom: 10px; right: 10px;는 아래에서 10픽셀, 오른쪽에서 10픽셀 떨어진 위치에 표시한다는 의미다. 즉, 화면 오른쪽 구석에 위치하게 된다. 만약 bottom, right 대신에 top : 200px; left: 30px; 이렇게 입력하면 왼쪽 위에 자리 잡는데 화면 꼭대기에서 아래로 200픽셀, 왼쪽 끝에서 30픽셀 떨어진 곳에 표시한다.
cursor: pointer; 는 지정한 위치에 마우스 커서를 올렸을 때 마우스 커서 모양이
opacity는 IE에선 적용되지 않으니 IE는 opacity를 적용하면 그림이 뭉게지는 현상이 나타나고 FF나 오페라, 크롬, 사파리 등에서는 흐릿하게 표시되는 것을 확인할 수 있다.
<a href="#header">는 header라는 id를 갖는 부분까지 이동한다는 의미인데 앞에서 이야기한 것처럼 보통 화면 맨 위로 이동하게 된다. 그다음은 아이콘으로 사용할 그림을 표시하는 부분이다. <img src="그림 전체 경로" style="width:32px; height:32px"/>라고 되어 있는데, 그림 전체 경로는 위 그림처럼 스킨 수정 화면에 올린 그림 파일을 선택하고 왼쪽의 미리 보기 화면에 마우스 오른쪽 단추로 클릭해서 [그림 주소 복사]를 하면 쉽게 알아낼 수 있다. 상대 경로(,/images/top.png 등)를 입력하면 제대로 인식되지 않을 수 있으니 반드시 그림 전체 경로를 입력한다. 그 뒤의 width:32px; height: 32px;는 그림의 너비와 높이이다. 그림의 가로와 세로를 입력하면 된다. 그림 크기를 조정하지 않으려면 입력하지 않아도 상관없다. </a>와 </div>는 태그를 닫는 부분으로 반드시 빠뜨리지 말고 입력해야 한다.
이제 수정한 스킨을 저장해야 한다. 스킨 수정 화면을 아래로 내리면 [미리 보기]와 [저장] 단추가 있다. 여기서 [저장]을 누르고 저장하겠느냐는 물음에 [예]를 선택한다. 저장하지 않으면 지금까지 작업한 내용이 다 날아가니 주의한다. 스킨을 저장하고 다시 블로그로 돌아와 보면 화면 오른쪽 또는 사용자가 지정한 위치에 새로운 그림이 생긴 것을 확인할 수 있다. 이 그림에 마우스를 올리면 마우스 커서가 손가락 모양(
모든 글에 적용하지 않고 특정 글에 적용하려면 스킨을 수정하는 대신 글을 작성할 때 HTML 방식으로 전환하고 위의 태그를 그대로 입력하면 된다. 그럼 이 글에서처럼 블로그 전체에는 적용되지 않는 다른 위치로의 이동 아이콘이 해당 글을 읽을 때만 표시된다. 또 이동하는 중에 아이콘을 다시 클릭하면 속도가 느려진다. 클릭할수록 점점 느려진다.
