서근 개발노트

티스토리에 팔로잉

(티스토리) 블로그 하단에 원하는 버튼 기능 만드는 방법! (플로팅 버튼)

서근

2022. 3. 20. 11:59

QUOTE THE DAY

이번에는 블로그 하단에 원하는 기능을 넣을 수 있는 버튼을 생성하는 방법에 대해 알아보도록 하겠습니다. 이 버튼은 최하단에 고정됩니다. 이곳에 홈버튼, 방명록 버튼, 최상단으로 이동, 카카오톡 1:1 채팅 바로가기 등.. 다양한 기능을 넣을 수 있습니다.

블로그에 플로팅 버튼 만드는 방법

이 기능을 사용하기 위해서는 약간의 스킨 변경 지식이 있어야 합니다.

만약 티스토리 스킨 편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요!

(티스토리) 스킨 편집 기초 상식

안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스

seons-dev.tistory.com

HTML 사전 작업

FontAwsome 5 PRO 설치

먼저, 가장 중요한 FontAwsome 이라는 폰트를 설치해줘야 합니다. 설치법은 아주 간단 합니다. 아래 코드를 스킨 편집 <head> 바로 아래에 넣어줍니다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" />

<head>

   이곳에 추가
   
</head>

네이밍 설정 및 HTML 코드 작성

HTML에 사전작업을 하기 전에, 본인이 어떠한 기능을 넣을지 먼저 생각해야 합니다. 예를 들어 홈버튼이나 방명록 버튼이라면 클래스 이름을 move-home, move-guestBook 등으로 정해줄 수 있겠네요. 네이밍이 정해졌다면 아래 코드를 구성을 살펴보도록 하죠.

우선, floating-button 이라는 클래스는 '부모 클래스'입니다. 우리는 이 안에 원하는 클래스를 여러 개 생성해서 버튼을 늘려줄 것이기 때문에 floating-button은 절때 수정하시면 안 됩니다.

<!--하단 플로팅 버튼 시작-->
<div class="floating-button">
  
     이곳에 원하는 만큼 버튼을 생성할 예정
  
</div>

그럼 guest-book 버튼을 먼저 생성해보도록 하죠. 위에서 네이밍을 move-guestBook으로 정했었습니다. 아래와 같이 코드를 작성할 수 있습니다.

<!--하단 플로팅 버튼 시작-->
<div class="floating-button">
  
  <span class="move-guestBook">
     <a class="guest-btn" href="/guestbook"></a>
  </span>
  
</div>

span 태그에 move-guestBook 클래스를 생성했고, 그 아래 a태그에 guest-btn 클래스를 생성했습니다. 이 a 태그에는 링크를 넣을 수 있는데 href 키워드로 가능합니다.

href="/guestbook" : 현재 블로그의 방명록으로 이동하는 고유 링크
href="/" : 현재 블로그의 홈으로 이동하는 고유 링크
href="category" : 현재 볼로그의 카테고리로 이동하는 고유 링크

이런 식으로 고유 링크를 넣어줄 수도 있고, https:// 처럼 특정한 사이트 링크를 넣을 수 도 있습니다.

HTML 위치

이제 위 코드를 스킨 편집의 HTML안에 넣어줘야 합니다. 저는 편하게 <footer> 바로 위에 넣어주겠습니다. Ctrl + F로 footer 부분을 찾아서 바로 위에 코드를 넣어주세요.

사실 위치는 <body> 안쪽이라면 상관없을 것 같습니다. 어차피 CSS로 position Fixed로 넣어줄 거예요!

<!--하단 플로팅 버튼 시작-->
<div class="floating-button">
  <span class="move-guestBook">
     <a class="guest-btn" href="/guestbook"></a>
  </span>
</div>
<!--하단 플로팅 버튼 끝-->

<footer>
  ...
</footer>

CSS 추가

이제 CSS시트에 위 클래스의 스타일을 입혀주겠습니다. 주의 깊게 봐주세요.

우선 아래 CSS 코드는 공용 스타일입니다. 그대로 복사해서 CSS의 최하단부에 붙여 넣어 줍니다.

CSS를 다룰 줄 아시는 분들은 적절히 수정 가능하지만, 잘 모르시는 분들은 주석 처리한 부분의 텍스트를 잘 읽으시고 그 부분의 색상/테두리 두께 등을 수정해주시면 됩니다.

.floating-button은 HTML에서 부모 클래스라고 했고, .move-guestBook은 자식클래스, .guest-btn 클래스는 a태그로 .move-guestBook의 자식 클래스입니다. 구조를 잘 파악해주세요.

/*플로팅 버튼 수정X========*/
.floating-button {
  display: flex;
  position: fixed;
  right: 10px;
  bottom: 15px;
  z-index: 999;
}

/*플로팅 버튼 아이콘 공용 스타일 수정X========*/
.guest-btn::before {
   width: 100%;
   height: 100%;
   opacity: 1;
   border-radius: 50%;
   font-size: 1.15em;
   font-family: 'Font Awesome 5 Pro';
/*플로팅 버튼 아이콘 색상 수정O*/
	color: #b67700;
}

/*플로팅 버튼 스타일========*/
.move-guestBook {
  float: left;
  display: flex;
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
  /*사용자 설정 파트*/	
  font-weight: 700;
  background-color: #00000000;
  border: 2px solid #b67700;
}

사전작업에서 FontAwesome 5 PRO를 설치했었죠? 이것을 사용하여 플로팅 버튼의 아이콘을 넣어주겠습니다. 아이콘은 FontAwesome 사이트에서 원하는 아이콘을 찾아서 코드를 복사해주시면 됩니다.

만약 FontAwesome에 대한 사용법을 모르시면 구글링 해주세요!

아래에서 원하는 아이콘을 찾을 수 있습니다.

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

/*플로팅 버튼 아이콘 FontAwesome 사용자 설정*/
.guest-btn::before {
   content: '\f007';
}

이렇게 CSS까지 적용하면 아래와 같은 결과 화면을 확인할 수 있습니다.

버튼 추가하는 방법

위에 내용을 모두 이해하셨다면, 버튼을 추가하는 것도 아주 쉽습니다. 이번에는 제 블로그 홈페이지를 버튼에 추가해보도록 하겠습니다.

HTML

<!--하단 플로팅 버튼 시작-->
<div class="floating-button">
   <span class="move-guestBook">
      <a class="guest-btn" href="/guestbook"></a>
	  </span>
   <span class="move-myWebSite">
      <a class="myWebSite-btn" href="https://seons-dev.tistory.com/"></a>
	  </span>
</div>
<!--하단 플로팅 버튼 끝-->

CSS

.floating-button은 수정사항이 없기 때문에 아래에 추가하지 않았습니다.

/*플로팅 버튼 아이콘 공용 스타일 수정X========*/
.guest-btn::before, .myWebSite-btn::before {
   width: 100%;
   height: 100%;
   opacity: 1;
   border-radius: 50%;
   font-size: 1.15em;
   font-family: 'Font Awesome 5 Pro';
	 /*플로팅 버튼 아이콘 색상 수정O*/
	 color: #b67700;
}

/*플로팅 버튼 스타일========*/
.move-guestBook, .move-myWebSite {
  float: left;
  display: flex;
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
  /*사용자 설정 파트*/	
  font-weight: 700;
  background-color: #00000000;
  border: 2px solid #b67700;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/*플로팅 버튼 아이콘 FontAwesome 사용자 설정*/
.guest-btn::before {
	  content: '\f007';
}
.myWebSite-btn::before {
	content: '\f6b5'
}

구조가 이해되시나요?

이 아이콘을 클릭하면 정상적으로 작동하는 것을 확인할 수 있습니다.

이와 같이 HTML를 간단하게라도 이해하시면 아주 다양한 기능을 넣을 수 있습니다.

이렇게 오늘은 블로그 하단에 원하는 기능을 포함한 버튼을, 플로팅 버튼으로 만드는 방법에 대해 알아봤습니다. 만약 버튼을 넣으시다가 막히시는 부분이 있으시다면 언제든 댓글 남겨주시면 최대한 도와드리겠습니다.

해당 기능은 제 블로그 하단에도 적용되어있으니, 직접 보시고 마음에 드신다면 설정해보시는 걸 추천드립니다.

읽어주셔서 감사합니다🤟

저작자표시 비영리 변경금지

'FRONT-END > CSS' 카테고리의 다른 글

이미지 드래그 & 오른쪽 마우스 막는 방법 (37)	2022.07.05
(CSS) background-size에 hover transition animation 적용 안될때 해결방법 (3)	2022.07.03
(티스토리) 코드블럭에 클립보드로 복사 버튼 추가 (7)	2022.01.21
(티스토리) 코드블럭 - 언어명 표시 / 접기 / 펼치기 (6)	2021.04.16
(티스토리) 본문에 형광펜 효과 주는 방법 (3)	2021.04.15