티스토리 토글버튼 생성하기 (수정 시 오류 없는 버전)

이건 기존 방식입니다. 티스토리 기본 에디터로 써도 됩니다.

이건 새 구조입니다. 정교하게 구조를 제어할 수 있어요.

문제점: tistory에서 글쓸 때 자꾸 <p>태그가 없어져. <p>

개선사항: 태그가 없어져도 한줄을 차지하면서 토글 버튼이 정상 작동하도록 변경

✅ 1. 최종 HTML 구조 

<!-- ✅ 기존 방식 (p태그 기반) -->
<p><button class="toggle-btn"><span class="icon">▼</span> 기존 토글</button></p>
<div class="toggle-content">
  기존 방식 내용입니다. 이 구조도 정상 동작합니다.
</div>

<!-- ✅ 새로운 방식 (div 감싸는 방식) -->
<div class="toggle-wrapper">
  <button class="toggle-btn"><span class="icon">▼</span> 새 방식 토글</button>
  <div class="toggle-content">
    새로운 구조의 내용입니다. 배경과 선, 애니메이션이 포함돼요.
  </div>
</div>​

• ✅ 티스토리 에디터에서 잘 유지되는 구조
• ✅ p 태그 없어도 문제 없음

---

✅ 2. JavaScript 수정(기존 구조도 지원)

<script>
document.addEventListener("DOMContentLoaded", function () {
  const toggleButtons = document.querySelectorAll(".toggle-btn");

  toggleButtons.forEach((btn) => {
    btn.addEventListener("click", () => {
      let content = null;

      // 1. 새 구조 (div.toggle-wrapper 내의 .toggle-content)
      const wrapper = btn.closest(".toggle-wrapper");
      if (wrapper) {
        content = wrapper.querySelector(".toggle-content");
      }

      // 2. 기존 구조 (button 다음에 나오는 형제 .toggle-content)
      if (!content) {
        const next = btn.parentElement?.nextElementSibling;
        if (next && next.classList.contains("toggle-content")) {
          content = next;
        }
      }

      if (!content) return;

      const isOpen = content.style.display === "block";
      content.style.display = isOpen ? "none" : "block";

      // 아이콘 회전 효과
      btn.classList.toggle("open", !isOpen);
    });
  });
});
</script>

---

3. CSS 조정 (모바일 대응 + 배경 + 회전 + fade-in 애니메이션 포함)

/* 공통 버튼 스타일 */
.toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  width: 100%;
  justify-content: flex-start;
  box-sizing: border-box;
  margin: 8px 0;
}

.toggle-btn:hover {
  background-color: #2c80b4;
}

/* 아이콘 회전 */
.toggle-btn .icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

.toggle-btn.open .icon {
  transform: rotate(180deg);
}

/* 토글 영역 공통 스타일 */
.toggle-content {
  display: none;
  margin: 10px 0;
  padding: 12px 16px;
  background-color: #f9f9f9;
  border-left: 4px solid #3498db;
  border-radius: 4px;
  font-size: 0.95rem;
  line-height: 1.6;
  animation: fadein 0.3s ease-out;
}

/* 애니메이션 */
@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .toggle-btn {
    font-size: 1rem;
    padding: 12px;
  }
  .toggle-content {
    font-size: 0.95rem;
  }
}

---

🎁 추가 팁

• 여러 개 넣어도 각각 독립적으로 잘 작동함
• 에디터에서 자동 줄바꿈만 해도 <div>로 감싸는 구조는 보존됨
• 티스토리 HTML 편집기에서 위 내용을 복사 + 붙여넣으면 됨
• <style>...</style>, <script>...</script> 둘 다 본문 아래쪽에 넣어줘도 되고
• 커버 페이지, HTML 페이지, 글 본문 상단/하단 삽입 모두 가능

---

✅ 문제점: 모바일에서는 스타일 및 자바스크립트 소스가 반영되지 않음

• 소스 로딩을 못하는건지 자체적으로 반영되는 코드는 별도로 관리하는 건지 내부 원리를 알 수 없음