✅ 결과 화면
✅ 1. 버튼 HTML 추가 (위로가기 버튼)
//기존방식
<p><button class="toggle-btn"><span class="icon">▼</span> 기존 토글</button></p>
<div class="toggle-content">기존 방식의 내용입니다.</div>//새로운 방식
<div class="toggle-wrapper">
<button class="toggle-btn"><span class="icon">▼</span> 새 방식 토글</button>
<div class="toggle-content">새 구조 방식의 내용입니다.</div>
</div>이 코드는 </body> 닫는 태그 바로 위에 삽입
티스토리 스킨 편집기에서 index.html의 맨 아래
✅ 2. CSS 스타일 추가 (기존거 포함)
<style>
/* 토글 버튼 */
.toggle-wrapper {
margin: 10px 0;
}
.toggle-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 6px;
font-size: 0.95em;
cursor: pointer;
transition: background-color 0.2s ease;
}
.toggle-btn:hover {
background-color: #2c80b4;
}
.toggle-content {
display: none;
margin-top: 10px;
padding: 12px 16px;
background-color: #f9f9f9; /* 밝은 회색 배경 */
border-left: 4px solid #3498db; /* 앞쪽 파란색 선 */
border-radius: 4px;
font-size: 0.95em;
line-height: 1.6;
}
.toggle-btn .icon {
display: inline-block;
transition: transform 0.3s ease;
}
.toggle-btn.open .icon {
transform: rotate(180deg); /* ▼ → ▲ 회전 효과 */
}
@keyframes fadein {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
</style>이건 <head> 태그 안이나, <style>이 이미 있는 경우 함께 추가 (CSS탭)
✅ 3. 스크롤 감지용 JavaScript 추가
<script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const toggleButtons = document.querySelectorAll(".toggle-btn");
toggleButtons.forEach((btn) => {
btn.addEventListener("click", () => {
let content = null;
// 1. 우선 새 구조 (.toggle-wrapper 안에 .toggle-content)
const wrapper = btn.closest(".toggle-wrapper");
if (wrapper) {
content = wrapper.querySelector(".toggle-content");
}
// 2. 기존 구조: <p> 바로 뒤의 .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>
</script>이건 </body> 닫기 바로 위쪽, HTML 끝부분에 삽입.
✅ 전체 넣는 위치 요약
| 조건 | 동작 |
| <p><button>...</button></p> + 다음 줄에 div.toggle-content | ✅ 지원 |
| <div class="toggle-wrapper">...</div> 구조 | ✅ 지원 |
| 아이콘 회전 | ✅ open 클래스 기반으로 공통 지원 |
'etc > blog' 카테고리의 다른 글
| 티스토리 토글버튼 생성하기 (수정 시 오류 없는 버전) (2) | 2025.04.16 |
|---|---|
| 티스토리 커스텀스타일 추가, 토글 버튼 추가, 블로그 커스터마이징 (1) | 2025.03.27 |
댓글