etc3 티스토리 토글버튼 생성하기 (수정 시 오류 없는 버전) ▼ 기존 방식이건 기존 방식입니다. 티스토리 기본 에디터로 써도 됩니다.▼ 새 구조이건 새 구조입니다. 정교하게 구조를 제어할 수 있어요.문제점: tistory에서 글쓸 때 자꾸 태그가 없어져. 개선사항: 태그가 없어져도 한줄을 차지하면서 토글 버튼이 정상 작동하도록 변경✅ 1. 최종 HTML 구조 ▼ 기존 토글 기존 방식 내용입니다. 이 구조도 정상 동작합니다. ▼ 새 방식 토글 새로운 구조의 내용입니다. 배경과 선, 애니메이션이 포함돼요. ✅ 티스토리 에디터에서 잘 유지되는 구조✅ p 태그 없어도 문제 없음✅ 2. JavaScript 수정(기존 구조도 지원)3. CSS 조정 (모바일 대응 + 배경 + 회전 + fade-in 애니메이션 포함)/* 공통 버튼 스타일 */.toggle-bt.. 2025. 4. 16. 티스토리) 하단에 “맨 위로/ 맨 아래로” 버튼 생성 ✅ 결과 화면✅ 1. 버튼 HTML 추가 (위로가기 버튼)//기존방식 ▼ 기존 토글기존 방식의 내용입니다.//새로운 방식 ▼ 새 방식 토글 새 구조 방식의 내용입니다.이 코드는 닫는 태그 바로 위에 삽입티스토리 스킨 편집기에서 index.html의 맨 아래✅ 2. CSS 스타일 추가 (기존거 포함)이건 태그 안이나, 이 이미 있는 경우 함께 추가 (CSS탭)✅ 3. 스크롤 감지용 JavaScript 추가이건 닫기 바로 위쪽, HTML 끝부분에 삽입. ✅ 전체 넣는 위치 요약조건동작... + 다음 줄에 div.toggle-content✅ 지원... 구조✅ 지원아이콘 회전✅ open 클래스 기반으로 공통 지원 2025. 4. 13. 티스토리 커스텀스타일 추가, 토글 버튼 추가, 블로그 커스터마이징 티스토리 블로그에서는 커스터마이징이 가능하다는 점이 큰 강점이다. 사용안해도 되지만, 여유가 되면 사용을 하는게 더 가독성을 높이고 전달력이 좋아지기 때문에 알아두는게 좋다. ✅ 결론: 실제 적용하는 방법 글을 작성할 때 HTML모드로 두고 클래스를 입힌다. 내가 작성한 클래스가 먹히기 위한 형식은 아래와 같다. 코드소스가 들어갈 부분 🔽 토글버튼이름 토글내용✅ 저장하면 실제 화면에는 아래처럼 그려진다 🔽 토글버튼이름 토글내용 📌글을 수정하면 위 형식에서 태그가 자동으로 사라지는 현상이 간혹 발생해서 소스를 수정했다. 📌주의사항: 티스토리 스킨을 다른거로 설정하면 기존 소스는 지워진다.이 경우에 기존 내 스킨을 저장해놓고 테스트해보고, 적용한다음 추가한 소스만 그대로 붙여넣으면 된다. ✅ 매 글.. 2025. 3. 27. 이전 1 다음
