티스토리 썸네일 이미지 배지 다는 방법

티스토리 썸네일 이미지 배지 다는 방법 - 스타일을 활용한 방법

티스토리 스킨을 꾸밀 때, 상상했던 것들이 실제로 구현되면 그만큼 또 재밌는 경우가 없다. 내 경우에도 여러 가지 방법으로 티스토리 디자인을 수정하곤 하는데, 각 티스토리 콘셉트에 맞는 요소가 다를 수밖에 없다. 기존에 썸네일 치환자로 Post-item이 뿌려지기 때문에 해당 요소에 클래스를 추가해서 간단하게 배지를 다는 방법이다. 이렇게 배지 요소를 추가한 다음에는 자바스크립트로 인기글이나 최신 글에만 적용하는 방법을 활용할 수 있을 것이다.

다만, 일단은 썸네일 이미지에 뱃지 요소를 추가하거나 기타 다른 요소를 추가하는 방법은 매우 간단하게 구현할 수 있으며, 이를 응용해서 다양한 이미지를 구현할 수 있을 것이다.

썸네일 뱃지 요소 추가 예시

<div class="post-item badge"> <!-- badge 클래스 추가-->
    <a href="/2720" title="썸네일">
        <span class="thum">
            <s_article_rep_thumbnail>
                <img src="//i1.daumcdn.net/thumb/C230x230/?fname=https://blog.kakaocdn.net/dn/Mj8bl/btq89MmlIbR/oIjeVqBThXtpR53yl5wzDK/img.png" width="230px;" height="230px;" title="썸네일" alt="썸네일">
            </s_article_rep_thumbnail>
        </span>
        <span class="title">티스토리 썸네일 이미지 배지 다는 방법</span>
        <span class="excerpt">티스토리 썸네일 이미지 배지 다는 방법 - 스타일을 활용한 방법 티스토리 스킨을 꾸밀 때, 상상했던 것들이 실제로 구현되면 그만큼 또 재밌는 경우가 없다. 내 경우에도 여러 가지 방법으로 티스토리 디자인을 수정하곤 하는데, 각 티스토리 콘셉트에 맞는 요소가 다를 수밖에 없다. 기존에 썸네일 치환자로 Post-item이 뿌려지기 때문에 해당 요소에 클래스를 추가해서 간단하게 배지를 다는 방법이다. 이렇게 배지 요소를 추가한 다음에는 자바스크립트로 인기글이나 최신 글에만 적용하는 방법을 활용할 수 있을 것이다. 다만, 일단은 썸네일 이미지에 뱃지 요소를 추가하거나 기타 다른 요소를 추가하는 방법은 매우 간단하게 구현할 수 있으며, 이를 응용해서 다양한 이미지를 구현할 수 있을 것이다. 썸네일 뱃지 요소 추가..</span>
    </a>
</div>

위와 같이 배지를 추가하면 이미지 위에 또 하나의 이미지나 스타일 요소를 추가할 수 있게 된다. 이미지를 추가하는 방법도 있지만, 스타일시트로 직접 수정하는 방법 또한 나쁘지 않다. 이러한 배지 요소는 일반적으로 쇼핑몰 등에서 자주 활용되지만, 경우에 따라서는 새로운 콘텐츠에 대한 신규 발행 표시로 배지를 활용할 수 있을 것이다.

.badge {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 1px;
}
.badge:after {
        content: "";
    position: absolute;
    z-index: 1;
    width: 100px;
    height: auto;
    background: red;
    content: "인기글";
    text-align: center;
    color: #fff;
    padding: 5px 10px;
    left: -27px;
    top: 6px;
    transform: rotate(-45deg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    text-indent: -18px;
    font-weight: bold;
    font-size: 13px;
}

CSS로 요소를 추가하는 것이기 때문에 활용방법은 간단하다. 각 썸네일 클래스에 badge를 추가하고 아래의 요소를 스타일 시트에 추가하면 된다. 컬러나 색상, 텍스트 등은 취향에 맞게 수정하면 된다.