ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 블로그 하단에 버튼 만들기 (플로팅 버튼)
      IT-Information/Blog-operation 2022. 7. 28. 05:00

      블로그 하단에 원하는 기능을 포함하는 버튼을 생성하는 방법을 알아봅니다. 이 버튼은 최하단에 고정되며 이곳에 홈버튼, 최상단 이동, 카카오톡 1:1 채팅 바로가기 등등 기능을 넣을 수 있다.

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

      HTML 사전 작업

      FontAwesome5 pro 설치하기

      가장 중요한 FontAwsome 폰트를 설치해줘야 한다. 설치법은 간단한데 아래의 코드를 스킨 편집에서 <head> 사이에 넣어주면 된다.

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

      네이밍 설정과 HTML 코드 작성

      HTML에 사전작업을 하기 전에, 본인이 어떤 기능을 넣을지 먼저 생각해야 한다. 예로 홈버튼이나 방명록 버튼이라면 이름을 move-home, move-guestBook 등 정해주는 작업이 네이밍이다.

      먼저, Floating-button 이라는 클래스는 '부모 클래스'다. 이 안에 원하는 클래스를 여러 개 생성해서 버튼을 늘려줄 수 있다.

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

      먼저 방명록 버튼은 아래같이 작성해 볼 수 있다.

      <!--하단 플로팅 버튼 시작-->
<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로 위치를 설정한다.

      CSS 추가

      CSS 시트에 위 클래스의 스타일을 입혀준다.
      우선 아래 CSS 코드는 공용 스타일이다. 그대로 복사하여 CSS의 최하단부에 붙여 넣어 준다.
      CSS를 다루는데 익숙하다면 적절히 수정하여 사용하면 된다. 그렇지 않다면 주석 처리한 부분의 텍스트를 통해서 색상/테두리 뚜께 등 수정하면 된다.

      .flating-button은 html에서 부모 클래스라고 하며, .move-guestBook은 자식클래스, .guest-btn 클래스는 a 태그로 .move-guestBook의 자식 클래스다. 구조를 이해하여 다른 버튼과 작업에 응용할 수 있다.

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

/*플로팅 버튼 아이콘 공용 스타일*/
.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 사이트에서 원하는 아이콘을 찾아서 코드를 복사해주면 된다.

      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';
}

      이렇게 까지 적용하면 아이콘 생성 결과를 확인해볼 수 있다.

      버튼 추가

      위에 내용을 바탕으로 버튼을 추가한다. 이것 또한 그리 어렵지 않다.
      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://goldsystem.tistory.com/"></a>
	  </span>
</div>
<!--하단 플로팅 버튼 끝-->

      CSS
      .floating-button은 수정사항이 없기 때문에 아래 추가로 작성하지 않음

      /*플로팅 버튼 아이콘 공용 스타일*/
.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'
}
      버튼 생성한 모습
      버튼 생성한 모습

      관련글 관련글 더보기

    Copyright 2024

    티스토리툴바