티스토리 카카오 로그인 버튼 CSS 재스타일링: 기본 디자인을 내 브랜드에 맞게 바꾸는 방법 4가지
티스토리 블로그에 댓글 기능을 쓰다 보면 카카오 로그인 버튼이 기본 상태로 떡하니 자리를 차지하고 있다. 노란 배경에 카카오 로고가 박힌 기본 버튼인데, 어떤 스킨에서는 블로그 전체 분위기와 전혀 어울리지 않아 거슬린다. 마치 모노톤으로 정성껏 꾸민 방에 형광 노란 의자 하나가 들어온 느낌이었다. 처음에는 저게 바꿀 수 있는 건지도 몰랐다. 개발자 도구로 요소를 클릭해보다가 클래스 이름을 발견했고, CSS 덮어쓰기로 충분히 스타일을 바꿀 수 있다는 걸 알게 됐다.
첫 번째: 개발자 도구로 카카오 버튼 클래스명 정확히 찾기
어떤 요소를 바꾸려면 먼저 그 요소의 이름을 알아야 한다. 마치 사람을 부를 때 이름을 알아야 부를 수 있는 것처럼. F12를 눌러 개발자 도구를 열고 Elements 탭에서 커서 아이콘으로 카카오 로그인 버튼을 클릭하면 해당 요소의 클래스명이 표시된다. 티스토리 댓글 영역의 카카오 로그인 버튼은 스킨마다 다소 다르지만 주로 아래 구조에서 찾을 수 있다.
/* 개발자 도구 Elements 탭에서 확인하는 카카오 버튼 관련 선택자 예시 */ /* 티스토리 기본 댓글 카카오 로그인 버튼 */ .kakao-login-btn .btn-kakao-login #kakao-login-btn .comment-kakao-login /* 실제 내 블로그에서는 F12 > Elements 탭 > 버튼 클릭으로 직접 확인 필수 */ /* 스킨마다 클래스명이 다를 수 있음 */
클래스명을 확인했으면 개발자 도구 내 Styles 탭에서 현재 어떤 스타일이 적용돼 있는지도 같이 볼 수 있다. 어떤 속성이 걸려 있는지 파악해야 제대로 덮어쓸 수 있다.
두 번째: 티스토리 스킨 CSS에서 직접 덮어쓰기
클래스명을 파악했으면 티스토리 스킨 편집에서 CSS 탭을 열고 맨 아래에 커스텀 스타일을 추가한다. 기존 스타일 위에 덮어쓰는 것이기 때문에 !important를 함께 쓰는 경우가 많다. 기존 집 페인트 위에 새 페인트를 덧칠하는 것과 같다. 덧칠이 충분히 두꺼우면 기존 색이 안 보인다. !important는 그 두꺼운 덧칠을 강제로 올리는 역할이다.
/* 티스토리 스킨 CSS 편집창 맨 아래에 추가 */ /* 카카오 로그인 버튼 기본 노란색을 어두운 톤으로 변경 */ .kakao-login-btn { background-color: #2c2c2c !important; color: #ffffff !important; border: 1px solid #444 !important; border-radius: 4px !important; font-size: 14px !important; padding: 8px 16px !important; cursor: pointer !important; } .kakao-login-btn:hover { background-color: #444444 !important; color: #eeeeee !important; }
세 번째: 카카오 로그인 버튼을 완전히 숨기고 대체 요소 만들기
어떤 경우에는 기본 버튼 스타일이 너무 강하게 적용돼 있어서 CSS 덮어쓰기가 일부만 먹히고 나머지는 계속 카카오 스타일이 남는 경우가 있다. 수채화 위에 유화를 덧칠하면 번지는 것처럼, 기반이 워낙 강하면 덮기가 안 된다. 이럴 때 쓰는 방법이 기존 버튼을 display:none으로 숨기고 JavaScript로 클릭 이벤트를 연결한 새 버튼을 만드는 것이다. 새 버튼의 스타일은 완전히 자유롭게 짤 수 있다.
/* 스킨 CSS에 추가 */ .kakao-login-btn { display: none !important; } /* 스킨 HTML 또는 포스트 하단에 추가 */ <button id="my-kakao-btn" style="background-color:#1a1a2e; color:#ffffff; border:none; padding:10px 22px; font-size:14px; font-weight:bold; border-radius:5px; cursor:pointer;" type="button"> 카카오로 댓글 작성 </button> <script> document.getElementById('my-kakao-btn').addEventListener('click', function() { // 원래 카카오 버튼의 클릭 이벤트를 트리거 var originalBtn = document.querySelector('.kakao-login-btn'); if (originalBtn) { originalBtn.style.display = 'block'; originalBtn.click(); originalBtn.style.display = 'none'; } }); </script>
네 번째: 카카오 버튼 주변 댓글 영역 전체를 함께 스타일링하기
버튼 하나만 바꾸면 버튼은 예뻐졌는데 주변 댓글 입력창이나 구분선이 따로 놀 수 있다. 드레스는 새것으로 바꿨는데 신발이 낡은 운동화인 것처럼 균형이 안 맞는다. 버튼과 함께 댓글 영역 전체 톤을 맞춰주는 게 완성도를 높인다. 개발자 도구에서 댓글 전체를 감싸는 상위 요소의 클래스를 찾아서 아래처럼 함께 스타일을 정리한다.
/* 댓글 영역 전체 톤 통일 예시 */ /* 실제 클래스명은 개발자 도구에서 확인 후 교체 */ /* 댓글 섹션 전체 */ #comments, .comment-area, .comment-wrap { background-color: #f9f9f9 !important; padding: 24px !important; border-radius: 6px !important; } /* 댓글 입력창 */ .comment-area textarea, .comment-input { border: 1px solid #cccccc !important; border-radius: 4px !important; padding: 10px !important; font-size: 14px !important; width: 100% !important; box-sizing: border-box !important; } /* 댓글 작성 버튼 */ .comment-submit-btn, .btn-comment-submit { background-color: #333333 !important; color: #ffffff !important; border: none !important; padding: 8px 18px !important; border-radius: 4px !important; cursor: pointer !important; } /* 카카오 로그인 버튼을 댓글 버튼과 같은 톤으로 */ .kakao-login-btn { background-color: #444444 !important; color: #ffffff !important; border: none !important; padding: 8px 18px !important; border-radius: 4px !important; cursor: pointer !important; }
버튼 하나만 고치는 게 아니라 그 주변 영역까지 같이 작업하면, 전체 블로그 분위기에 댓글 영역이 자연스럽게 녹아든다. 이 차이가 눈에 생각보다 크게 들어온다.
느낀점
카카오 로그인 버튼 하나를 바꾸려고 시작했는데, 결국 개발자 도구로 요소를 찾는 법, CSS 우선순위, 이벤트 위임까지 손에 익히게 됐다. 형광 노란 의자 하나를 바꾸려다가 방 전체 가구 배치를 다시 생각하게 된 것처럼, 하나를 건드리면 주변이 같이 눈에 들어오기 시작한다. 처음엔 그냥 버튼 색상이나 바꾸는 잔일 정도로 생각했는데, 직접 해보니 CSS 우선순위의 작동 방식을 몸으로 이해하는 실습이었다. !important가 언제 필요하고 언제 오남용인지도 이 작업을 반복하면서 감각으로 잡혔다. 작은 버튼 하나인데 그 안에서 배운 것들이 이후 스킨 수정 전반에 쓰이게 됐다는 게 지금 생각하면 흥미롭다.
- 카카오 로그인 개발자 가이드: developers.kakao.com
- 티스토리 스킨 편집 가이드: tistory.com
- MDN - CSS ::before: developer.mozilla.org