티스토리 HTML 수정하여 방명록을 Github로 변경하기

티스토리 블로그 기본 템플릿은 글쓰기, 방명록, RSS, 관리로 구분되어 있다.

하지만 방명록은 아무도 작성하지 않아 필요성을 느끼지 못했기 때문에 이를 내 깃허브 페이지로 이어지도록 HTML을 수정하였다.

변경 전

변경 후

원하는 것은 방명록 아이콘 대신 흰색 깃허브 아이콘을 넣고, 마우스를 올리면 Github라는 글씨, 그리고 새 탭에서 깃허브 사이트로 연결되도록 하고 싶었다.

 

아이콘은 깃허브 페이지에서 가져왔다. 깃허브 메인 로고가 SVG로 되어 있어 코드를 가져왔다.

블로그 HTML 편집기로 들어가 guestbook을 찾는다.

<li><a href="https://greatsangho.tistory.com/guestbook" class="ico_skin link_memo" title="방명록">방명록</a></li>

이렇게 되어있는 곳을 찾을 수 있다.

이 부분을

<li><a href="https://github.com/greatsangho" title="Github" target="_blank"><svg class="github-icon" height="40" aria-hidden="true" viewBox="0 0 40 40" version="1.1" width="70" data-view-component="true" class="octicon octicon-mark-github v-align-middle color-fg-default">
                <svg height="24" aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github v-align-middle color-fg-default">
                <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z" fill="white">
                </path></svg>
                <style>
                  .github-icon {
                  position: relative;
                  top: 8px; /* Adjust this value as needed */
                }
                </style>
                </a></li>

이와 같이 바꾸어 준다.

herf=는 링크를, title은 마우스를 올렸을 때 뜨는 글자를, target="_blank"는 새 탭에서 열기를 의미한다.

그다음 svg 모양은 깃허브에서 복사한 코트를 가져온 뒤, 다른 요소가 박스 안에 아이콘이 들어있는 것을 확인하고,

첫 번째 svg에서는 간격을 주변과 맞추기 위해 height를 40, width를 70으로 바꾸고,

두 번째 svg에서는 아이콘 크기를 맞추기 위해 height, width를 24, viewBox를 0 0 24 24로 바꾸었다.

이 상태는 아이콘 색이 검은색으로 표시되므로 path의 마지막에 fill="white"를 추가한다.

미리 보기를 해보면 아이콘이 위로 올라가 있는 것을 볼 수 있는데, 이를 맞추려면 바깥쪽 박스를 기준으로 8px 내려주어야 한다.

첫 번째 svg 박스에 class="github-icon"을 추가하고, <style> 부분을 추가해 위에서 8px 띄어준다.

 

후기 : HTML의 tag들만 대략적으로 알고, 요소 분석 정도만 할 수 있는 수준이지만, 모르는 코드 부분은 GPT에게 물어보며 추가해 나가니 쉽게 수정할 수 있었다. 아이디어만 있다면 누구나 손쉽게 코딩할 수 있다는 점이 참 좋은 것 같다.