Start here
btagly 설치 & 사용 가이드
아래 스니펫을 <head> 안에 넣어야 모든 컴포넌트가 정상 동작합니다.
CDN 스크립트
<script defer src="https://cdn.btagly.com/cdn/livefeed.js"></script>
1파일 완결형
재부팅 가드 포함
SPA 지연 로딩 대응
컬러 팔레트
:root CSS 변수로 13색 기본 + 확장 팔레트가 주입됩니다.
:root CSS 변수로 13색 기본 + 확장 팔레트가 주입됩니다.
기본 팔레트
확장 팔레트
각 키는 --color-* 및 --color-*-soft 로 사용합니다.
목차(TOC) – 자동 생성 & 스크롤스파이
페이지 내 h2~h4를 수집해 좌측 박스를 만들고, 클릭 시 부드러운 스크롤로 이동합니다.
옵션
data-title="목차"
목차 박스 제목
data-depth="3"
수집 깊이 (h2~h4 기준, 최대 4)
data-sticky
스크롤 시 TOC를 고정
data-collapsible
접기/펼치기 토글 표시
data-collapsed
초기 접힘 상태
복사할 마크업
<div class="toc-on" data-title="목차" data-depth="3" data-sticky data-collapsible></div>
실행 예시
소제목 스타일 · 색상 콤보로 즉시 생성
gradient-text를 선택하면 A/B 그라디언트용 콤보가 자동으로 나타나며 data-grad-a, data-grad-b가 코드에 포함됩니다.
버튼(Anchor) · 스타일/색상/사이즈 콤보
data-btn-* 속성만으로 테마/사이즈/폭/링크를 제어합니다. 클릭 시 링크로 이동합니다.
키워드 팝업 – 실시간 트렌드 링크 배너
기본은 해당 div 위치에 고정되어 나타납니다. 화면 고정을 원하면 화면 고정=예를 선택하거나
마크업에 data-fixed를 추가하세요.
FAQ
Q. 스크립트를 중복으로 넣으면?
내부 가드(window.__LivefeedBooted)가 있어 중복 부팅되지 않습니다.
Q. SPA에서도 작동해요?
MutationObserver가 DOM 변화를 감지해 새로 생긴 트리거에만 장착합니다.
Q. 색상 키는 어디서 쓰나요?
버튼/헤딩에서 data-btn-color 또는 [data-color]로 지정합니다.
라이선스 & 크레딧
© 2025 btagly. All rights reserved. 아이콘: Simple Icons.