[티스토리 꾸미기 꿀팁 6탄] 해시태그 박스를 감성 있게 꾸미는 법 (HTML+CSS 포함)

📁 이 글은 📍 블로그 꾸미기 팁 카테고리에 저장되어 있어요 :)

안녕하세요 여러분💗
블로그 꾸미기에 진심인 찌니언니입니다 :)
오늘은 블로그 꾸미기 시리즈 중에서도 여러분들이 정말 많이 요청해주셨던 꿀팁! 바로 ‘해시태그 박스를 감성 있게 꾸미는 법’을 알려드릴게요~단순히 이건 꾸미기만 예쁜 게 아니라, 독자 분들의 머무는 시간도 늘려주는 효과가 있어서 티스토리 블로그 꾸미기 팁 중에서도 정말 찌니언니가 강력 추천하는 요소예요! ✨

 

💡 해시태그 박스란?

보통 티스토리에서는 글 하단에 자동으로 태그가 붙지만,
그건 디자인이 제한적이라 내 감성 블로그와 어울리지 않을 때가 많아요 😢그래서 저는 직접 HTML + CSS로 감성 박스를 만들어서, 내가 원하는 해시태그를 자유롭게 디자인해 보여주고 있답니다 💬
이 해시태그 박스를 활용하면 블로그 분위기도 한층 통일되고, 독자분들에게도 "이 블로그 정성있다!"는 인상을 줄 수 있어요. 뿐만 아니라 자주 쓰는 태그를 고정해서 노출해둘 수 있으니, 블로그 내 검색 유입 흐름을 자연스럽게 유도할 수 있다는 장점도 있어요!

💡 CSS는 어디에 넣나요?

꾸미기를 처음 해보는 분들이 가장 헷갈려하는 부분이 바로 CSS 넣는 위치예요! CSS는 관리 > HTML 편집 > style 안에 넣어야 제대로 적용되는데요,아래 이미지를 참고해서 기존 CSS 코드의 맨 아래에 붙여넣으면 됩니다 :)

tip: 혹시 기존 스타일이 깨지면 한 줄 띄워서 넣어보세요!

💡 알록달록 해시태그 박스 CSS는 이렇게 넣어요!

.zziny-colorful-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  background-color: transparent;
  margin-top: 16px;
}

.zziny-colorful-tags .tag {
  padding: 6px 14px;
  border-radius: 24px;
  font-size: 0.85em;
  font-weight: 500;
  color: #fff;
  display: inline-block;
  transition: all 0.3s ease;
}

.zziny-colorful-tags .pink { background-color: #ff8fab; }
.zziny-colorful-tags .mint { background-color: #80d9c2; }
.zziny-colorful-tags .sky { background-color: #91d8f7; }
.zziny-colorful-tags .lavender { background-color: #c6a5f7; }
.zziny-colorful-tags .yellow { background-color: #ffe27a; color: #444; }
.zziny-colorful-tags .coral { background-color: #ff9e8b; }
.zziny-colorful-tags .gray { background-color: #888; }

.zziny-colorful-tags .tag:hover {
  opacity: 0.8;
  transform: scale(1.05);
  cursor: pointer;
}

💡 HTML은 본문 어디에 넣나요?

<div class="zziny-colorful-tags" style="margin-top: 20px;">
  <span class="tag pink">#티스토리꾸미기</span>
  <span class="tag mint">#블로그디자인</span>
  <span class="tag sky">#해시태그박스</span>
  <span class="tag lavender">#HTML꾸미기</span>
  <span class="tag yellow">#블로그초보팁</span>
  <span class="tag coral">#블로그꿀팁</span>
  <span class="tag gray">#찌니언니팁</span>
</div>

해시태그 박스는 글 하단에 넣는 걸 추천드려요!  ‘함께 보면 좋은 글’ 아래나, 공감 버튼 바로 위에 넣으면 자연스럽고 예쁘게 보여요 ✨특히 공감버튼 바로 위에 넣는 위치는 저만의 최애 포인트예요!꾸미기 요소도 살리고, 자연스럽게 독자의 시선을 끌 수 있거든요.

💡 완성된 모습은?

짠~ 찌니언니가 직접 적용해본 해시태그 박스 완성샷이에요 🎀 핑크 테마와 조화롭게 어우러져서 블로그 전체 분위기를 감성 감성하게 만들어준답니다!
글마다 다른 색으로 바꿔보는 재미도 있고, 원하는 태그만 쏙쏙 골라 담을 수 있어서 꾸미기 고수 느낌도 뿜뿜 낼 수 있어요 히히~ 완전 취향저격 뿜뿜 보는 사람도 너무 예뻐서 한참 머물게 되는 마법~ 그럼 예쁘게 꾸며보시고
적용해보면서 안되거나 어려운 부분들, 그리고 또 알고 싶은 꿀팁이 있다면 언제든 찌니언니에게 댓글 달아주세요! :)

💗 여러분의 공감과 댓글은 찌니언니에게 큰 힘이 된답니다!
알고 싶은 꿀팁이나 정보가 있다면 구독후 댓글로 함께 이야기 나눠요 ✨

#티스토리꾸미기 #블로그디자인 #해시태그박스 #HTML꾸미기 #블로그초보팁 #블로그꿀팁 #찌니언니팁