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

[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>

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

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

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

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

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

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

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

</div>

</body>

</html>

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

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

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

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

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

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

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

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

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

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

다. 링크 만들기

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

3. TOP 버튼을 둘 곳 정하기

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

</div>

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

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

아래 코드를 입력합니다.

</div>

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

'티스토리 툭탁툭탁' 카테고리의 다른 글

[html/css]공란을 입력하는 와   차이 (1)	2014.04.17
[html/css] 화면 상단/하단에 애드센스 광고 1개 넣기 (0)	2014.04.16
인터넷에서 분수 입력 방법(티스토리 블로그 포함) (2)	2014.04.13
워드 분수 입력 세 가지 방법 (0)	2014.04.11
블로그(티스토리 포함) 네이버에 사이트 등록(검색 등록)되지 않는 이유 (0)	2014.02.22