티스토리 꾸미기 | HOME / TOP / BOTTOM 반응형 버튼 만들기

▸티스토리 이야기/•링크버튼 및 TOP버튼 만들기

티스토리 꾸미기 | HOME / TOP / BOTTOM 반응형 버튼 만들기

Galam. 2025. 1. 1. 21:14

HOME / TOP / BOTTOM 버튼 만들기 #2

HOME / TOP / BOTTOM 버튼의 장점

HOME 버튼: 사용자가 현재 페이지에서 빠르게 메인 화면으로 이동할 수 있도록 합니다. 특히 블로그 웹사이트가 여러 섹션으로 구성된 경우, 이 버튼을 통해 쉽게 접근할 수 있습니다.

TOP 버튼: 긴 페이지를 스크롤한 후 원래 맨 위로 돌아가야 할 때 유용합니다. 많은 스크롤이 필요한 페이지에서 사용자의 시간과 노력을 절약해줍니다.

BOTTOM 버튼: 긴 페이지에서 하단(예: 댓글 섹션, 푸터)으로 빠르게 이동할 수 있습니다. 사용자에게 특정 섹션(예: FAQ, PDF 정보)으로 바로 접근할 수 있는 방법을 제공합니다.

이번 HOME, TOP, BOTTOM 버튼 코드는 제가 기존에 만들었던 TOP 버튼을 조합하여 만든 것입니다.

이 버튼들은 테두리 스타일, 마우스 오버 시 색상, 크기 등을 자유롭게 조절할 수 있습니다.

HOME / TOP / BOTTOM 반응형 버튼 미리보기

See the Pen 반응형 HOME / TOP / BOTTOM 버튼 만들기 by Galam (@tserxuag-the-styleful) on CodePen.

HOME / TOP / BOTTOM 반응형 버튼 아이콘 업로드

1. 아래의 Zip파일을 다운로드 후 압축을 푼 뒤 3개의 투명 파일을 '파일 업로드'에 업로드해 줍니다.

btn_top-1.png / btn_home-1.png / btn_bottom-1.png

btn_top-1.zip

0.01MB

2. '관리자 홈의 꾸미기'에서 '스킨 편집 > html 편집 > 파일업로드'로 들어가 다운로드 한 '버튼 이미지'를 업로드합니다.

HOME / TOP / BOTTOM 반응형 버튼 HTML 편집

'파일 업로드'에 업로드된 HOME / TOP / BOTTOM 버튼을 화면에 표시하기 위해 HTML 코드를 넣어줘야 합니다.

1. '파일업로드' 좌측의 'HTML'탭을 '클릭'합니다.

2. HTML 탭에서 코드의 제일 아래쪽 </body> 위에 아래와 같이 코드를 넣어준 후 적용을 '클릭'합니다.

반응형 버튼 HTML 코드

아래의 HTML 코드를 복사 후 HTML 탭 하단 </body>위에 넣어주시면 됩니다.

<!-- HOME / TOP / BOTTOM 버튼 #4 -->
<!-- HOME 버튼 -->
<a href="내 블로그 주소" id="gohome" title="홈으로">
<img src="./images/btn_home-1.png" border="0" alt="home" /></a>

<!-- TOP 버튼 -->
<a href="#" id="gotop" title="맨위로">
<img src="./images/btn_top-1.png" border="0" alt="top" /></a>
<script>
$(function(){
  $("#gotop").hide();
   $(window).scroll(function(){
     if($(this).scrollTop() > 100){$("#gotop").fadeIn();}
     else{$("#gotop").fadeOut();}
  });
    });
</script>

<!-- BOTTOM 버튼 -->
<a href="#gofooter" id="nowfooter" title="아래로">
<img src="./images/btn_bottom-1.png" border="0" alt="bottom" /></a>
<script>
$(function(){
  $("#nowfooter").hide();
   $(window).scroll(function(){
     var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
     if(scrollBottom > 100){$("#nowfooter").fadeIn();}
     else{$("#nowfooter").fadeOut();}
  });
    });
</script> 
<div id='gofooter' />
<!--HOME / TOP / BOTTOM 버튼 #4 끝 -->}

- 코드수정 -

<a href="내 블로그 주소" ← 내 블로그의 주소

id="gohome" title="홈으로">

<img src="./images/btn_home-1.png" ←./images/ 업로드한 버튼 이름

border="0" alt="home" /></a>

<img src="./images/btn_top-1.png" ←./images/ 업로드한 버튼 이름

border="0" alt="top" /></a>

<img src="./images/btn_bottom-1.png" ←./images/ 업로드한 버튼 이름

border="0" alt="bottom" /></a>

728x90

HOME / TOP / BOTTOM 반응형 버튼 CSS 편집

버튼에 CSS 스타일을 적용해 보겠습니다.

스타일은 버튼에 투명도를 주고, 버튼에 그림자 효과와 마우스 오버 효과를 주는 코드입니다.

1. '관리자 홈의 꾸미기'에서 '스킨 편집 > html 편집 > CSS'로 들어갑니다.

2. 아래처럼 CSS 탭 하단에, 'CSS 코드'를 추가 후 '적용'을 클릭합니다.

반응형 버튼 CSS 코드

아래의 CSS 코드를 복사 후 CSS 탭 하단에 넣어주시면 됩니다.

/* HOME / TOP / BOTTOM 버튼 #4 */
/* 홈버튼 스타일 */
#gohome { 
position: fixed; /* 위치 고정 */
background-color: #fff; /* 기본 배경색 */
width: 40px;  /* 이미지 가로 크기 */
height: 40px;  /* 이미지 세로 크기 */
right: 10px; /* 버튼 우측 여백 */
bottom: 200px; /* 버튼 하단 여백 */
z-index: 999; /* 레이어 개념, 숫자가 클수록 위에 위치 */
opacity: 0.8; /* 이미지 투명도 */
border: 1px solid #bbb; /* 테두리 굵기, 스타일, 색상 */
border-radius: 30%;  /* 모서리 라운드 */
box-shadow: 0 0 8px rgba(0, 0, 0, .4);  /* 그림자 */
}

/* 탑버튼 스타일 */
#gotop {
position: fixed; /* 위치 고정 */
background-color: #fff; /* 기본 배경색 */
width: 40px;  /* 이미지 가로 크기 */
height: 40px;  /* 이미지 세로 크기 */
right: 10px; /* 버튼 우측 여백 */
bottom: 250px; /* 버튼 하단 여백 */
z-index: 999; /* 레이어 개념, 숫자가 클수록 위에 위치 */
opacity: 0.8; /* 이미지 투명도 */
border: 1px solid #bbb; /* 테두리 굵기, 스타일, 색상 */
border-radius: 30%;  /* 모서리 라운드 */
box-shadow: 0 0 8px rgba(0, 0, 0, .4);  /* 그림자 */
}

/* 다운버튼 스타일 */
#nowfooter {
position: fixed; /* 위치 고정 */
background-color: #fff; /* 기본 배경색 */
width: 40px;  /* 이미지 가로 크기 */
height: 40px;  /* 이미지 세로 크기 */
right: 10px; /* 버튼 우측 여백 */
bottom: 150px; /* 버튼 하단 여백 */
z-index: 999; /* 레이어 개념, 숫자가 클수록 위에 위치 */
opacity: 0.8; /* 이미지 투명도 */
border: 1px solid #bbb; /* 테두리 굵기, 스타일, 색상 */
border-radius: 30%;  /* 모서리 라운드 */
box-shadow: 0 0 8px rgba(0, 0, 0, .4);  /* 그림자 */
}

/* HOME / TOP / BOTTOM 버튼 마우스오버 */
#gohome:hover,
#gotop:hover,
#nowfooter:hover{
background-color: #fef7f7; /* 마우스오버 배경색 */
transition: 0.3s;  /* 효과 적용 시간 */
transform: scale(1.1);  /* 크기 확대 */
}
/* HOME / TOP / BOTTOM 버튼 #4 끝 */

/* HOME / TOP / BOTTOM 버튼 스크롤 부드럽게 */
html {scroll-behavior: smooth;}
/* HOME / TOP / BOTTOM 버튼 스크롤 부드럽게 끝 */

/* 기본 탑 버튼 숨기기 */
#footer .page-top {display: none;}
/* 기본 탑 버튼 숨기기 */

마무리

모바일에서 정상적으로 동작하기 위해서는 [티스토리 모바일웹 자동 연결을 사용하지 않습니다.]로 설정되어 있어야 합니다.

HOME / TOP / BOTTOM 버튼은 본문의 글을 읽을 때 매우 유용한 기능입니다. 하지만, 아이폰 등 일부 운영 체제에서는 자연스럽게 이동하지 않는 등 문제가 있을 수 있습니다. 그럼에도 불구하고 일반적으로 사용하는 데는 큰 문제가 없습니다.