'티스토리 나만의 버튼'에 해당되는 글 1건

수성비전자방입니다. 최근 수성비전자방의 스킨을 수정했습니다. 이번에 공감 버튼 쪽을 좀 건드려 보았는데요,

원래 이렇게 생긴 것을

이렇게 저만의 버튼을 넣었습니다. 오늘은 이렇게 나만의 버튼을 추가하는 방법을 알아보겠습니다.

이 방법은 특수합니다. 원래 티스토리 공감, 구독 버튼이 치환자가 따로 제공되지 않고 본문 치환자로 퉁쳐지는데요. 그렇기 때문에 공감 버튼과 구독 버튼 사이에 자신만의 버튼을 넣기가 까다롭습니다.

그래서 저는 자바스크립트를 사용할 건데요, HTML DOM을 사용하겠습니다. 그 전에 먼저 예제 파일을 제공해 드리겠습니다. 연습하실 분들은 사용하시기 바랍니다.

첨부파일을 압축해제 해주세요. 그러면 파일이 두 개 있을 것입니다. 그 중 index.html 파일을 소스코드 편집기로 실행하세요.

(실제 티스토리 스킨 수정하실 때에는 블로그관리→스킨 편집→HTML 편집으로 들어가시거나 스킨을 내려받아 압축해제 하신 후 skin.html을 소스코드 편집기로 실행하시면 되는 것 아시죠?)

그러면 소스코드가 보일텐데 </body> 바로 위에

를 입력하여 <script type="text/javascript>와 </script> 사이에 자바스크립트를 작성하겠습니다.

HTML DOM

DOM은 Document Object Model의 약자입니다. HTML DOM를 사용하면 자바스크립트를 이용해 본문을 수정할 수 있습니다. 이 글에서 설명하는 것이 대부분 HTML DOM이라고 생각하시면 되겠습니다.

createElement

createElement를 이용하여 HTML 요소를 만들 수 있습니다.  하나하나 알아보겠습니다.

var button = document.createElement("a");

우선 변수를 만듭니다. 변수 이름은 마음대로 하셔도 됩니다. 저는 button으로 해 보겠습니다.

괄호 안에는 태그 이름을 넣습니다. div를 입력하시면 div 요소가 생성되고, 저처럼 a를 입력하시면 a 요소(하이퍼링크)가 생성됩니다.

button.textContent = "구글 웹 접속";

지금부터 제가 빨간색으로 쓰는 것은 전부 다 위에서 선언한 변수 이름으로 합니다.

큰따옴표 안에는 웹페이지에서 표시할 텍스트(본문)를 넣습니다.

button.className = "mybutton";

class 이름을 적습니다.

button.href = "https://www.google.com";

제가 a 요소를 만들었기에 가능한 부분입니다. 웹 주소를 입력합니다.

button.target="_blank";

역시 제가 a 요소를 만들었기에 가능한 부분입니다. 이것을 붙이면 하이퍼링크를 클릭했을 때 새탭으로 열리게 합니다.

이렇게 스크립트를 작성하면 결과적으로 아래와 같은 HTML을 작성한 것과 동일한 효과가 발생됩니다.(물론, 아직 변수 상태이기 때문에 화면에 출력되지는 않습니다.)

이제 실제로 이것을 화면에 출력해 보겠습니다.

querySelector

화면에 출력하기 위해 querySelector를 출력하겠습니다. querySelector는 아래와 같이 사용합니다.

document.querySelector("tag또는ID또는class");

괄호 안에 CSS에서처럼

tag를 입력할 때는 그냥 입력하시면 되고(ex. document.querySelector("p"); ),

ID를 입력하실 때는 앞에 #을 붙이시고(ex. document.querySelector("#identification"); ),

class를 입력하실 때는 앞에 .을 붙이시면 됩니다(ex. document.querySelector(".classroom"); ).

실제 티스토리 공감 버튼도 그렇고, 제가 첨부해 드린 예제 파일도 그렇고 공감 버튼은 <div class="container_postbtn #post_button_group">와 </div> 사이에 들어 있습니다.(여기서 말하는 '실제 티스토리'는 2020년 12월 8일 기준으로 개발자 도구를 이용하여 확인했습니다.)

class 이름 사이에 공백이 들어 있는데 이는 container_postbtn라는 이름과 #post_button_group라는 이름을 둘 다 가진 것이라고 합니다.(사실 이 부분은 자세히 알아보지 못했습니다. 죄송합니다.)

저는 container_postbtn에 주목하겠습니다. 아래와 같이 소스코드를 작성하시면 됩니다.

document.querySelector(".container_postbtn").append(button);

이렇게 하면 자바스크립트로 작성한('코딩한'인가?) 내용이 웹페이지에서 출력됩니다.

방금 만든 하이퍼링크가 공감 버튼과 구독 버튼 사이에 쏙 들어갔습니다. 왜 그런 걸까요? (로딩 속도 차이인가?)

아! 그리고 아직 버튼 모양이 아니라서 실망하신 분들이 있을 수 있는데 그건 마지막으로 설명해 드릴 CSS를 사용하여 버튼 모양으로 만들면 됩니다.

버튼을 2개 이상 만들고 싶을 때

자신만의 버튼을 2개 이상 만드셔도 됩니다. 우선 소스코드를 보여드리겠습니다.

변수를 각각 만드시고, document.querySelector도 각각 입력하시면 됩니다.(물론 변수 이름은 바꿔서.)

className은 굳이 다르게 하실 필요는 없습니다.

CSS

버튼에 스타일을 지정하기 위해서는 CSS가 필요합니다. 원래 티스토리 스킨 수정할 때 블로그관리→스킨 편집→HTML 편집 으로 들어가 보면 CSS를 편집할 수 있는 탭이 따로 있습니다. 스킨을 내려받아서 수정하시는 경우 또는 제가 첨부해 드린 예제 파일을 사용하시는 경우 style.css 파일이 있을 겁니다. 거기서 수정하시면 됩니다.

이 소스 코드를 CSS 파일 소스코드에서 어디에 작성하시든 상관은 없습니다.(맨 아래 작성하셔도 됩니다.) 이번에도 하나하나 알아보겠습니다.

.container_postbtn .mybutton

'container_postbtn'이라는 class 안에 있는 'mybutton'이라는 class에 적용한다는 뜻입니다.

중괄호 안에 있는 것은 티스토리 공감 버튼의 스타일을 그대로 가져온 것입니다.(개발자 도구에서 확인할 수 있습니다.) 이 중 몇 가지만 알아보자면

border-radius: 30px;

이건 버튼을 둥글게 만듭니다.

border-color: rgba(185,185,185,0.5);

이건 버튼 테두리 색상입니다.

완성

위 사진은 예제 파일을 이용하여 만들었을 때의 결과입니다.

혹시나 하는 마음으로 완성 파일도 첨부해 드리겠습니다.

저의 글을 읽어 주셔서 감사합니다.

이렇게 티스토리 공감 버튼 뒤에 나만의 버튼 추가하기에 대해 알아보았습니다.

글에 오류가 있거나 질문이 있으시다면 댓글 달아주세요.

다음에 만나요!