0. 목표

이번 스킨은 다 마음에 들었지만, 한 가지 아쉬웠던 점이 바로, 피드의 Summary 부분 이었다.

Velog와 달리 요약문을 본문의 태그에 맞게 띄어쓰기 해주지 않는다. 따라서 위 그림 처럼 모든 내용이 한 줄로 쭉 주어져서 예쁘지도 않고 가독성도 떨어진다.

RSS를 활용한다면, 본문 전문과 스크립트별 태그를 받을 수 있지만, 내부 치환자로 티스토리 서버에서 직접 내용을 받아오는 것보다 속도가 현저히 떨어질 것 같다. (+ 내가 귀찮아서 그리 못하겠다.)

그래서 이번 목표는 글 요약부분을 해당 글의 TAG로 바꾸기 이다.

1. 티스토리 치환자 살펴보기

티스토리 공홈의 태그 클라우드 치환자를 살펴보면

<!-- 스킨 -->
<s_tag>
    <div class="taglog">
        <h3>태그</h3>
        <ul>
            <s_tag_rep>
            <li>
                <a href="" class=""></a>
            </li>
            </s_tag_rep>
        </ul>
    </div>
</s_tag>

이 형식으로 적으면,

<!-- 변환 예 -->
<div class="taglog">
    <h3>태그</h3>
    <ul>
        <li>
            <a href="/tag/tistory" class="cloud1">tistory</a>
        </li>
        <li>
            <a href="/tag/kakao" class="cloud4">kakao</a>
        </li>
        <li>
            <a href="/tag/blog" class="cloud5">blog</a>
        </li>
    </ul>
</div>

위와 같이 변환 된다고 한다.

이걸 그대로 긁어서, 의 부분과 바꾸었더니 다음과 같이 화면이 깨졌다.

내가 추정했을 때 이유는

1️⃣ 티스토리가 자체적으로 만든 tag_class를 쓰다보니 나의 기존 스킨의 CSS와 충돌이 일어났다.
ul 태그가 block 요소라서 기존 CSS와 충돌을 일으킴

2. 내 티스토리 식으로 바꾸기

그래서 해당 부분을

<s_tag_rep>
        <span  class="feed-tag"> </span>
</s_tag_rep>

span 형태로 바꾸었다. 나는 list로 한 줄씩 처리할 필요도 없고, 링크 타고 해당 해시태그로 들어가게 하고 싶지도 않아서 나열 형식으로 바꾸었다.

다음은 feed-tag라는 내가 새로 만든 class에 해당하는 CSS 이다.

.feed-tag {
        background-color: #FFCDCD;
    display: inline-block;
    padding: 5px 10px;
    color: #fff;
    border-radius: 12px;
    font-size: 12px;
    margin: 5px 5px 0 0;
    text-decoration: none;
    white-space: normal; /* 줄바꿈 허용 */
    overflow-wrap: anywhere; /* 긴 단어를 줄바꿈 */
    word-break: keep-all; /* 단어 단위로 묶음 */
}



.feed-tag:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 그림자 강조 */
    transform: translateY(-2px); /* 살짝 위로 올라가는 효과 */
}