Tistory/Tistory Skin Edit

사이드 tag, 태그 꾸미기

별깡솔 2020. 10. 16. 11:06

안녕하세요 별깡솔입니다 : )

별깡솔 블로그를 방문하신 모든 분들 진심으로 감사드립니다


사이드 tag 꾸미기


별깡솔 html

<s_sidebar_element>
  <!-- 태그 -->
  <div class="box-tag">
      <h3 class="title-sidebar">Tag cloud</h3>
      <div class="box_tag">
          <s_random_tags>
              <a href="" class=""></a>
          </s_random_tags>
      </div>
  </div>
</s_sidebar_element>


h3 tag 안에 cloud 라는 문구를 추가하였습니다

다음에 , 쉼표는 삭제하였습니다

css를 이용해서 :before # 표시합니다


별깡솔 css

.area-aside .box-tag { // 공백 삭제
    font-size: 0;
}

.area-aside .box-tag h3 { // tag title
    font-size: 18px;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: 1px;
    font-family: 'Poppins', sans-serif;
    padding-bottom: 10px;
}

.area-aside .box-tag a { // tags 대문자
    font-size: 15px;
    text-transform: uppercase;
}

.area-aside .box-tag a:hover { // 마우스 효과
    color: #333;
}

.area-aside .box-tag a:before { // # 추가 오른쪽 간격 2px
    content: '#';
    padding-right: 2px;
}


Odyssey 별깡솔 css 적용








별깡솔 블로그를 방문하신 모든 분들 다시 한번 진심으로 감사드립니다

구독과 좋아요 감사합니다 : )