hELLO 스킨으로 되어있는 블로그들을 염탐(?)하다보면, 자신만의 링크들을 프로필 영역 밑에 보여주고 있는 경우가 있다.
프로필 하단에 나와 관련된 정보들이 있으면 접근도 쉽고, 나만의 허브를 갖는다는 점도 좋다는 생각해 추가해보고 싶었다.
링크 추가
일단 티스토리에서 제공해주는 '링크'에 원하는 링크를 추가해본다.
티스토리 블로그 설정 > 링크 탭 > 나의 링크
예시로 내 GitHub 주소를 넣었는데, 원하는 주소를 넣으면 된다.
이제 블로그를 확인해보면, 사이드바에 추가한 링크가 보인다!
링크 위치 변경
이제 사이드바에서 링크 위치를 프로필 하단으로 변경한다.
이것도 티스토리에서 제공해주기 때문에 쉽게 변경이 가능하다.
티스토리 블로그 설정 > 꾸미기 탭 > 사이드바
Drag & Drop 으로 위치를 바꿀 수 있으니 프로필과 링크가 붙어있도록 변경한다.
저장하고 다시 확인해보면, 내 프로필 밑에 링크가 보이게 된다 :)
링크 꾸미기
마지막으로 스킨을 편집해서 꾸미는 일만 남았다.
티스토리 블로그 설정 > 꾸미기 탭 > 스킨 편집 > (우측 상단) HTML 편집
앞으로 우리가 해야할 건 세 가지이다.
- 링크 타이틀 제거하기
- 아이콘 변경하기
- 가운데 정렬하기
<s_sidebar_element><!-- 링크-->
<li class="el" id="my-links">
<h2 class="tit">링크</h2>
<ul class="links flex flex-col gap-y-4">
<s_link_rep>
<li class="link">
<div class="txt leading-none"><i class="ico fa-solid fa-link mr-2 text-xs"></i><a class="link text-sm" href="" target="_blank"></a></div>
</li>
</s_link_rep>
</ul>
</li>
</s_sidebar_element>
'링크'를 검색하면 다음과 같은 영역을 찾을 수 있다.
이 부분만 수정하면 원하는 걸 전부 할 수 있다!
1. 링크 타이틀 제거하기
<!-- <h2 class="tit">링크</h2> 👈 ‼️이 부분 주석 or 제거‼️ -->
h2 태그를 제거하면 타이틀이 보이지 않는다!
나중에 복구할 수도 있어, 나는 편집 시 대부분 원본 내용은 주석 처리하고 추가된 내용을 넣고 있다.
2. 아이콘 변경하기
현재 아이콘은 fa-solid, fa-link를 쓰고 있는데, 이런 식의 사용은 Font Awesome의 사용 패턴이다.
원하는 아이콘을 검색해서 눌러보면 자세한 사용방법이 나온다. (나는 github를 검색했다.)
현재 적용되어있는 아이콘인 fa-solid, fa-link를 fa-brands, fa-github-alt로 바꿔준다!
<li class="link">
<!-- <div class="txt leading-none"><i class="ico fa-solid fa-link mr-2 text-xs"></i><a class="link text-sm" href="" target="_blank"></a></div> 👈 ‼️이 부분 주석 or 제거‼️ -->
<div class="txt leading-none"><i class="ico fa-brands fa-github-alt mr-2 text-xs"></i><a class="link text-sm" href="" target="_blank"></a></div> <!-- 👈 ‼️이 부분 추가‼️ -->
</li>
이러면 아이콘도 쉽게 변경이 된다 ㅎㅎ
3. 가운데 정렬하기
여기까지 완료하면 왼쪽에 링크가 있을텐데, 프로필이 가운데있으니 같이 정렬을 해서 안정감을 주도록 한다.
Tailwind CSS를 사용하고 있어, 클래스명 고민없이 바로 적용이 가능하다.
<s_sidebar_element><!-- 링크-->
<li class="el" id="my-links">
<!-- <h2 class="tit">링크</h2> -->
<!-- <ul class="links flex flex-col gap-y-4"> 👈 ‼️이 부분 주석 or 제거‼️ -->
<ul class="links flex justify-center gap-x-4">
<s_link_rep>
<li class="link">
<div class="txt leading-none"><i class="ico fa-brands fa-github-alt mr-2 text-xs"></i><a class="link text-sm" href="" target="_blank"></a></div>
</li>
</s_link_rep>
</ul>
</li>
</s_sidebar_element>
flex-col을 제거하면 기본적으로 flex-row가 적용된다.
gap-y-4는 y축 여백을 띄우는건데, 가로 정렬이니 x축 여백을 띄우도록 수정했다.
justify-center를 추가해 가운데 정렬을 할 수 있게 됐다.
결과
비교적 쉽게(?) 원하는대로 수정됐다.
다음엔 또 어딜 꾸미지?
2026.02.17 내용 변경
링크를 하나 더 넣으려고 하니, 같은 아이콘만 설정하는 구조가 되버렸다..
그래서 티스토리의 링크 기능을 부분적(?)으로만 사용하려한다.
링크 위치 변경
제일 처음에 할 일은 티스토리 사이드바 설정에서 링크 위치를 프로필 하단으로 변경한다.
티스토리 블로그 설정 > 꾸미기 탭 > 사이드바
Drag & Drop 으로 위치를 바꿀 수 있으니 프로필과 링크가 붙어있도록 변경한다.
저장 후 확인 시, 내 프로필 밑에 링크가 보이게 된다 :)
링크 삭제
설정되어 있는 링크가 보이지 않는다면 다음으로 넘어가주세요 ㅎㅎ
나는 설정해둔 링크가 있어서, 프로필 밑에 GitHub 링크가 보인다.
우리는 직접 코드에 링크를 넣을거라서, 있다면 삭제가 필요하다.
티스토리 블로그 설정 > 링크 탭 > 나의 링크
저장 후 확인해보면, 이제 링크 타이틀만 있고 링크는 보이지 않는다.
링크 꾸미기
마지막으로 스킨을 편집해서 꾸미는 일만 남았다.
티스토리 블로그 설정 > 꾸미기 탭 > 스킨 편집 > (우측 상단) HTML 편집
앞으로 해야할 건 크게 네 가지이다.
- 링크 타이틀 제거하기
- 링크 추가하기
- 아이콘 변경하기
- 가운데 정렬하기
<s_sidebar_element><!-- 링크-->
<li class="el" id="my-links">
<h2 class="tit">링크</h2>
<ul class="links flex flex-col gap-y-4">
<s_link_rep>
<li class="link">
<div class="txt leading-none"><i class="ico fa-solid fa-link mr-2 text-xs"></i><a class="link text-sm" href="" target="_blank"></a></div>
</li>
</s_link_rep>
</ul>
</li>
</s_sidebar_element>
'링크'를 검색하면 다음과 같은 영역을 찾을 수 있다.
이 부분만 수정하면 원하는 걸 전부 할 수 있다!
이걸 수정하면 나중에 복구를 못 할 수 있으니, 이 부분을 밑에 복붙해두고, 원본은 주석처리를 한다. (삭제하고픈 분들은 삭제 ㄱㄱ)
<!-- s_sidebar_element 태그 옆에 주석이 따로 있었을텐데, 그 주석은 중첩돼서 삭제해주세요 ㅎㅎ
<s_sidebar_element>
<li class="el" id="my-links">
<h2 class="tit">링크</h2>
<ul class="links flex flex-col gap-y-4">
<s_link_rep>
<li class="link">
<div class="txt leading-none"><i class="ico fa-solid fa-link mr-2 text-xs"></i><a class="link text-sm" href="" target="_blank"></a></div>
</li>
</s_link_rep>
</ul>
</li>
</s_sidebar_element>
-->
<s_sidebar_element> <!-- 링크 -->
<li class="el" id="my-links">
<h2 class="tit">링크</h2>
<ul class="links flex flex-col gap-y-4">
<s_link_rep>
<li class="link">
<div class="txt leading-none"><i class="ico fa-solid fa-link mr-2 text-xs"></i><a class="link text-sm" href="" target="_blank"></a></div>
</li>
</s_link_rep>
</ul>
</li>
</s_sidebar_element>
1. 링크 타이틀 제거하기
첫 번째로는 '링크' 타이틀을 제거한다.
`h2` 태그 영역만 제거하면 된다.ㅎㅎ
2. 링크 추가하기
`<li class="link">` 태그가 있는데, 이 영역을 통해 링크를 화면에 보여준다.
li 내부 `div` 태그를 보면,``과 ``가 있다.
원래 티스토리의 링크 설정이 해당 부분에 들어가는데, 우리는 미사용하기 때문에 이 값들을 변경해야한다.
``는 실제 url 링크, ``는 화면에 표시될 이름을 적는다.
<li class="link">
<div class="txt leading-none"><i class="ico fa-solid fa-link mr-2 text-xs"></i><a class="link text-sm" href="https://github.com/gingaminga" target="_blank">GitHub</a></div>
</li>
여러개의 링크를 보여주려면, 이 영역 자체를 복사해서 밑에 붙여넣고 같은 방식으로 수정하면 된다. ㅎㅎ
3. 아이콘 변경하기
`i` 태그를 보면 `fa-solid`, `fa-link`가 보이는데, 이런 식의 사용은 Font Awesome의 사용 패턴이다.
원하는 아이콘을 검색해서 눌러보면 자세한 사용방법이 나온다. (나는 github를 검색했다.)
현재 적용되어있는 아이콘인 fa-solid, fa-link를 fa-brands, fa-github-alt로 바꿔준다!
<li class="link">
<div class="txt leading-none"><i class="ico fa-brands fa-github-alt mr-2 text-xs"></i><a class="link text-sm" href="https://github.com/gingaminga" target="_blank">GitHub</a></div>
</li>
이러면 아이콘도 쉽게 변경이 된다 ㅎㅎ
4. 가운데 정렬하기
여기까지 완료하면 왼쪽 정렬로 링크가 보일거다.
가운데 정렬을 해서 프로필 영역과의 안정감을 주도록 한다.
링크를 감싸고 있는 `ul` 태그를 수정하면 된다.
Tailwind CSS를 사용하고 있어, 클래스명 고민없이 바로 적용이 가능하다.
<ul class="links flex justify-center gap-x-4"> <!-- 👈 여기 수정 -->
<s_link_rep>
<li class="link">
<!-- 생략 -->
</li>
</s_link_rep>
</ul>
flex css는 기본적으로 `flex-row`를 지원하기 때문에, `flex-col`을 제거하면 가로로 정렬한다.
`gap-y-4`는 y축 여백을 띄우는건데, 가로 정렬이니 x축 여백을 띄우도록 수정했다.
`justify-center`로 가운데 정렬을 하면 끝!
어라 근데 왜 안보이지..?
링크가 안 보이는 문제
DOM을 보니 링크 영역은 그려졌지만 안의 세부 내용이 그려지지 않았다.
정확한 원인은 모르겠지만, hELLO 스킨 or 티스토리 태그에서 해당 부분을 그리는 과정에서 덮어쓰는 것 같다.
그러려면 JS로 처리할테고, 특정 id 속성이나 태그가 영향을 끼칠 수 있다고 판단했다.
다시 스킨편집으로 이동해 의심스러운 부분은 찾아보니, `s_link_req`가 아주 의심스러웠다.
이 부분을 지우고 적용하니 드디어 원하는대로 됐다..!
결과
다음엔 어딜 꾸미지?
'BLOG' 카테고리의 다른 글
| [Blog] 티스토리 꾸미기 (+ hELLO스킨) (0) | 2025.12.20 |
|---|---|
| [hELLO 스킨] 이전/다음 글 팝업 안 뜨게 하기 (0) | 2025.12.02 |
| 블로그 유목민의 다짐 (0) | 2025.11.23 |