티스토리 공감 버튼 꾸미기. (좋아요) before, after 의사 요소 수정하는 방법

오늘은 간단한 스킨 편집으로 티스토리 공감 버튼을 꾸미기 해보는 시간이에요. before, after 가상 요소 셀렉터로 말풍선 모양을 만든 다음에 scale 애니메이션을 추가해 보았습니다. 기반이 되는 스킨은 오디세이인데, 다른 스킨도 충분히 가능하니 따라해 보세요~

공감 버튼 꾸미기 결과물은 위와 같습니다. 이제 차근차근 하나씩 해보도록 합시다.

크롬 브라우저를 사용하는 것이 기준입니다. F12 버튼을 눌러서 크롬개발자도구를 실행해 주세요. 그리고 도구 좌측상단의 "Select an element in the page to inspect it" (단축키 : Ctrl + Shift + C)을 누른 다음에 공감 버튼이 속한 요소의 값을 알아내 봅시다.

오디세이 스킨의 경우 div (division을 의미합니다) 태그 중에 클래스가 container_postbtn 인 엘리먼트에 공감 버튼이 속해 있는 것을 확인하였습니다.

티스토리 [블로그관리홈]으로 이동하여 [꾸미기]의 [스킨편집]을 선택합니다. 우측상단에서 [HTML] 옆의 [CSS]를 누릅니다. 그리고 .container_postbtn 을 검색해 봅니다. CSS에서 클래스 선택자는 점(dot)으로 시작합니다.

말풍선을 만들기 위해 before 가상요소를 사용하였고, 말풍선꼬리를 만들기 위해 after 가상요소를 사용하였습니다. 그리고 각각 요소에 애니메이션을 추가해 보았습니다. 그대로 붙여넣기 하셔도 되고, 입맛에 맞도록 적당히 꾸미셔도 됩니다.

.container_postbtn::before {
    content: '도움이 되었나요?😘';
    position: absolute;
    left: 0;
    top: 0;
    background: #ced2f5;
    padding: 8px 12px;    
    border-radius: 50px;
    animation: scalingPostBef 5000ms ease infinite;
}

.container_postbtn::after {
	position: absolute;
    left: 16px;
    top: 32px;
    border-top: 10px solid #ced2f5;
    border-bottom: transparent;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;           
    animation: scalingPostAft 5000ms ease infinite; 
}

@keyframes scalingPostBef {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.2);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.2);
  }
  70% {
    transform: scale(1);
  }
}

@keyframes scalingPostAft {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(2.4);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(2.4);
  }
  70% {
    transform: scale(1);
  }
}