티스토리 HTML 커스터마이징 실전 팁 – 고급 활용법

티스토리 HTML 커스터마이징 1

티스토리 블로그를 운영하면서 기본 제공되는 스킨만으로는 개성을 살리기 어렵다고 느낀 적 있으신가요?
이번 글에서는 단순한 HTML 편집을 통해 티스토리 블로그 커스터마이징 방법을 정리해보았습니다!
이제 HTML, CSS, JavaScript를 활용해 더욱 세련되고 기능적인 블로그를 만들어봅시다.

1. 개별 포스트 디자인 변경하기

티스토리에서는 기본적으로 모든 글이 동일한 스타일을 따르지만, 특정 카테고리나 글만 다르게 디자인할 수도 있습니다.
예를 들어, 리뷰 게시글에는 별점 표시, 공지사항에는 특별한 배경색을 적용하는 식이죠.

티스토리 HTML 커스터마이징 2

✅ 카테고리별 스타일 적용 (예: 공지사항 카테고리 스타일 변경)

/* 공지사항 카테고리(카테고리 ID: 5) 스타일 */
.category-5 .post-title {
  color: red;
  font-weight: bold;
}
.category-5 .post-content {
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 5px;
}

💡 방법: [HTML 편집] > [CSS]에서 카테고리 ID를 찾아 위처럼 스타일을 지정하면 됩니다.

2. 글 본문에 자동으로 박스 삽입하기

글을 작성할 때 매번 특정 스타일을 적용하는 게 번거롭다면?
CSS를 활용해 자동으로 스타일이 적용되도록 설정할 수 있습니다.

티스토리 HTML 커스터마이징 3

✅ 예제: 본문 중간에 강조 박스 자동 삽입

blockquote {
  background: #f5f5f5;
  padding: 15px;
  border-left: 5px solid #007bff;
  font-style: italic;
}

💡 활용 방법:

• <blockquote> 태그를 사용하면 자동으로 강조 박스스타일이 적용됩니다.
• 리뷰 요약, 중요 메시지 등을 강조할 때 유용합니다.

3. 스크롤 따라오는 사이드바 만들기

블로그를 방문한 사람들이 스크롤을 내려도 특정 위젯이 따라오게 하고 싶다면?
CSS와 JavaScript를 조합하면 쉽게 구현할 수 있습니다.

티스토리 HTML 커스터마이징 4

✅ CSS 코드: 고정 사이드바 만들기

.fixed-sidebar {
  position: fixed;
  top: 100px; /* 화면 상단에서 100px 아래에 위치 */
  right: 20px;
  width: 250px;
}

✅ HTML 코드: 사이드바 적용하기

<div class="fixed-sidebar">
  <p>📌 블로그 인기 글</p>
  <ul>
    <li><a href="#">인기 글 1</a></li>
    <li><a href="#">인기 글 2</a></li>
  </ul>
</div>

💡 활용 방법:

• 인기 글 목록, 배너 광고, 구독 버튼 등을 배치하면 **CTR(클릭률)**을 높일 수 있어요!

💡 번외. 북클럽 스킨에서 사이드바 고정하는 방법은?

#aside {
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
}

위의  css 코드를 [스킨편집]에서 [HTML편집]을 눌러 [CSS]를 선택 후 추가해 보세요. 

4. 다크 모드 기능 추가하기

최근 많은 웹사이트에서 제공하는 다크 모드 기능을 블로그에 적용해 볼까요?
CSS와 JavaScript를 이용하면 간단하게 구현할 수 있습니다.

티스토리 HTML 커스터마이징 5

✅ CSS 코드: 다크 모드 스타일 적용

body.dark-mode {
  background-color: #121212;
  color: #ffffff;
}
.dark-mode a {
  color: #bb86fc;
}

✅ JavaScript 코드: 다크 모드 버튼 추가

<button id="darkModeToggle">🌙 다크 모드</button>

<script>
  document.getElementById("darkModeToggle").addEventListener("click", function() {
    document.body.classList.toggle("dark-mode");
  });
</script>

💡 활용 방법:

• 사용자가 직접 다크 모드를 켜고 끌 수 있도록 버튼을 만들 수 있습니다.
• 티스토리에서는 HTML 위젯 기능을 이용해 이 코드를 추가하면 됩니다.

5. 본문 내 특정 단어 자동 하이라이트

만약 블로그에서 특정 키워드를 강조하고 싶다면, 자동으로 글 본문 내 특정 단어를 강조하는 기능을 추가할 수 있습니다.

티스토리 HTML 커스터마이징 6

✅ JavaScript 코드: 특정 단어 자동 강조

<script>
  document.body.innerHTML = document.body.innerHTML.replace(/SEO/g, '<span style="background:yellow;">SEO</span>');
</script>

💡 활용 방법:

• SEO, 블로그, 티스토리 같은 단어를 자동으로 하이라이트할 수 있습니다.
• 광고 문구나 중요한 키워드 강조에 유용합니다.

마무리

오늘은 HTML 편집을 통해 실제 활용 가능한 고급 커스터마이징 방법을 정리해 보았어요!

• 카테고리별 디자인 차별화
• 자동 스타일 적용
• 스크롤 고정 사이드바
• 다크 모드 기능 추가
• 특정 단어 자동 강조

여러분도 한 단계 업그레이드된 티스토리 블로그를 만들어보세요!
어떤 기능이 가장 마음에 드셨나요? 저는 사이드바 고정기능이 마음에 들더라고요. 필요한 기능은 언제든지 어떻게든지 찾아보면 또 제 것이 되겠지요. 그럼 오늘도 즐거운 하루 보내세요.

태그: 티스토리, HTML 커스터마이징, 블로그 디자인, 웹개발, CSS, 블로그 최적화, SEO, 스킨 편집, 반응형 웹, 블로그 꾸미기