본문 바로가기
티스토리 툭탁툭탁

[html/css] 맨 위로 가기 버튼 만들기

by 지구별에 2014. 4. 14.
반응형

 

 

[html/css] 맨 위로 가기 버튼 만들기

 

 

웹 사이트에서 글을 읽다 보면, 글이 너무 길어질 때 맨 위로 가는 버튼이 있는 걸 보셨을 거예요.

 

오늘은 지금까지 배운 것을 바탕으로 html과 css를 이용해서 위로 가는 버튼을 간단히 만들어 보겠습니다...

 

먼저 흐름을 이해한 후에, 티스토리 화면에서 실제 적용시키 방법까지 같이 알아 볼게요.

 

 

 

 [html/css로 위로 가기 버튼 만들기 흐름 이해하기]

 

 

보통 웹사이트나 홈페이지는 다음과 같은 구성입니다.(아래 그림 참조)

 

머릿말(header), 본문(contents), 사이드바(sidebar), footbar

 

아래 그림에서 [TOP]은 위로 가기 버튼 이미지입니다.

 

 

 

그럼, 맨 위로 가기 버튼을 만들기 위해서 필요한 것은?

 

1. TOP을 클릭했을 때 올라갈 곳 지정하기(예: header)

 

2. TOP 버튼 만들기(이미지나 텍스트를 가진 링크)

 

3. TOP 버튼을 둘 곳 정하기

 

4. TOP 버튼을 html 안에 삽입하기

    

 

그럼 차례 차례 알아볼게요.

 

1. TOP을 클릭했을 때 올라갈 곳 지정하기

 

위 그림에서 header 쪽으로 올라가길 바라는 분이라면 링크 연결 시 #header

위 그림에서 contents 쪽으로 올라가길 바라는 분이라면 #contents로 링크를 거셔야 합니다.

 

 

2. TOP 버튼 만들기(이미지나 텍스트를 가진 링크)

 

텍스트로 만들 때 : <a href="#header">TOP</a>

 

이미지로 만들 때 : <a href="#header"><img src="top.png" title="위로 가기"></a>

 

 

 

3. TOP 버튼을 둘 곳 정하기

 

[TOP]버튼은 보통 스크롤을 내리면 맨 하단에 붙어 따라 다니는 형태인데요

 

여기서는 오른쪽 하단에 고정시키겠습니다.

 

<div style="position: fixed; bottom: 5px; right: 5px;">
<a href="#header"><img src="top.png" title="위로 가기"></a>

</div>

 

왼족 하단에 고정시키는 방법은

 

<div style="position: fixed; bottom: 5px; left: 5px;">
<a href="#header"><img src="top.png" title="위로 가기"></a>
</div>

 

*픽셀값 역시 원하는대로 조절 가능합니다.

 

position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)

 

문서를 연결하는 a 태그 (href, title, target 속성)

 

이미지를 넣는 img 태그(css로 이미지 중앙 정렬 방법)

 

 

 

 

4. TOP 버튼을 html 안에 삽입하기

 

html 작성 화면에서 바로 </body>앞에 위의 코드를 삽입하면 됩니다.

 

.

.

.

.

<div style="position: fixed; bottom: 5px; right: 5px;">
<a href="#header"><img src="top.png" title="위로 가기"></a>

</div>

</body>

</html>

 

 

실행화면과 html코드는  scroll.htm

 

 

 

 

 티스토리에서 위로 가기 버튼 만들기

 

티스토리에서 위로 가기 버튼 만드는 법은 위에서 배운 것과 다르지 않지만, 약간 추가 설명이 있습니다.

 

 

 

1. TOP을 클릭했을 때 올라갈 곳 지정하기(예: header)

 

대부분 #header로 링크를 걸면되는데요...

 

티스토리마다 이름이 다를 수 있으므로, #라고만 입력해도 맨 위로 올라갑니다

 

 

2. TOP 버튼 만들기(이미지를 가진 링크)

 

 

가. 다운 받은 이미지를 티스토리 스킨에 업로드하기

 

관리자 화면->스킨->[파일 업로드] 선택합니다.

 

 

나. [추가]버튼을 눌러 이미지를 업로드한 후 해당 파일에 대고 마우스 오른쪽을 눌러 [등록 정보]확인

 

 

 

다. 링크 만들기

 

위 등록정보에 나온 이미지의 주소를 적습니다. png이후는 적지 않음.

 

<a href="#header"><img src="http://cfs.tistory.com/custom/blog/163/1632216/skin/images/top.PNG " title="위로 가기"></a>

 

 

 

3. TOP 버튼을 둘 곳 정하기

 

여기서는 오른쪽 하단에 고정하겠습니다.

 

<div style="position: fixed; bottom: 5px; right: 5px;">
<a href="#header"><img src="top.png" title="위로 가기"></a>

</div>

 

 

4. TOP 버튼을 html 안에 삽입하기

    

관리지 화면->HTML/CSS-> skin.html 에서 ctrl+f 로 </body>를 찾아

 

아래 코드를 입력합니다.

 

<div style="position: fixed; bottom: 5px; right: 5px;">
<a href="#header"><img src="top.png" title="위로 가기"></a>

</div>

 

 

 

 

저장후 실행한 화면입니다. 화면 하단에 TOP 버튼이 생겼습니다..

 

 

 

 

반응형

댓글2