땀똔의 프로필 사진

티스토리, 각주 만들기

    Information/For Tistory
   

 

 

FootNote for TISTORY

 

 

 

 

  1. 편집기 기본모드에서 아래의 서식처럼 작성.
  2. 각주 기호는 숫자 넘버링.
  3. 각주에 HTML 태그 사용 가능 - <p></p> 태그는 사용불가.
  4. 줄바꿈은 Shift + Enter.편집기 - HTML 모드에선, <br> 태그 추가
  5. 각주 출력 방식 - 클릭 또는 마우스 호버.
  6. 기존 티스토리의 각주를 새로운 스타일로 변경 가능.
  7. 모바일은 화면 아래에 각주 표시.

 

  1. 조건문 버그 픽스.
  2. 링크 블럭에 표시되는 현상 수정.

 

  1. 스크립트 최적화.
  2. 각주 인덱스 기능 추가 - 단축키 B

 

  1. 각주 기호에 접두어 붙일 수 있는 옵션 추가.접두어 + 숫자 넘버링
  2. 각주 기호를 숫자 넘버링이 아닌 기호로 대체할 수 있는 옵션 추가.숫자 넘버링 X

 

 

 

 

 

 

 

 

 

 

 

Demo & Code

 

 

 

[Demo] 각주 (Foot Note) 만들기

역설적 ESS라고 볼 수 있는 또 다른 사건은 The Times[sfn]1977년 12월 7일자[/sfn]에 James Dawson씨가 보낸 편지에 기록되어 있다. 그의 편지에 이렇게 적혀 있다. "수 년 동안 내가 보아 온 바로는 깃대를

dd-stuff.tistory.com

 

 

<!-- 서식 -->

[sfn]내용[/sfn]

 

 

/* 사용자 설정 시작 */
:root {
    --sup-font: 'Arial'; /* 각주 기호 폰트 */
    --sup-color: #006dd7; /* 각주 기호 색상 */
    --note-padding: 12px 4px 12px 12px; /* 각주 여백 */
    --note-padding-leftright: 14px; /* 모바일에서 각주 너비 조절 */
    --note-height-mobile: 15%; /* 각주 높이 - 모바일 */
    --note-border-radius: 16px; /* 각주 모서리 부드럽게 */
    --note-bgcolor: #151515; /* 각주 배경색 */
    --note-color: rgba(255, 255, 255, 0.8); /* 각주 글자색 */
    --note-font-size: 14px; /* 각주 폰트 크기 */
    --note-line-height: 28px; /* 각주 줄 간격 */
    --note-word-break: break-all; /* 각주 단어 끊기 || or keep-all */
    --note-edge: 6px solid #151515; /* 각주 꼭지점 크기 및 배경색 */
    --note-edge-transparent: 6px solid transparent; /* 각주 꼭지점 따라가는 옵션 */
    --note-scroll-size: 1px; /* 각주 스크롤바 크기 */
    --note-scroll-color: rgba(255, 255, 255, 0.6); /* 각주 스크롤바 색상 */
		--note-index-font-size: 14px; /* 각주 인덱스 폰트 크기 */
}
/* 사용자 설정 끝 */

/* 각주 기호 */
smallfoot { vertical-align: super; font-family: var(--sup-font); color: var(--sup-color); font-size: small; padding: 2px; cursor: pointer }

/* 스킨에 따라 margin, top, left 값의 수정이 필요할 수 있음 || 각주 너비 및 높이는 수정금지! */
div.smallfoot {
	display: none !important; width: 240px; height: 120px; margin-top: -152px; margin-left: -24px; padding: var(--note-padding) !important;
	background-color: var(--note-bgcolor); border-radius: var(--note-border-radius)
}
div.smallfoot.reveal { display: block !important }

/* 좌상단 */
div.smallfoot.reveal {
	position: absolute; margin-top: -152px; margin-left: -24px; /*padding: var(--note-padding) !important;*/
	background-color: var(--note-bgcolor); line-height: 28px; border-radius: 12px
}
div.smallfoot.reveal::after {
	border-top: var(--note-edge); border-left: var(--note-edge-transparent); border-right: var(--note-edge-transparent);
	border-bottom: 0px solid transparent; content: ""; position: absolute; top: 144px; left: 24px
}

/* 좌측 - 각주 기호 아래에 표시될 때 */
div.smallfoot.lb.reveal { margin-top: 26px }
div.smallfoot.lb.reveal::after {
	border-top: 0px solid transparent; border-left: var(--note-edge-transparent); border-right: var(--note-edge-transparent);
	border-bottom: var(--note-edge); content: ""; position: absolute; top: -6px; left: 24px
}

/* 우상단 */
div.smallfoot.rt.reveal::after {
	border-top: var(--note-edge); border-left: var(--note-edge-transparent); border-right: var(--note-edge-transparent);
	border-bottom: 0px solid transparent; content: ""; position: absolute; top: 144px; left: 216px
}

/* 우측 - 각주 기호 아래에 표시될 때 */
div.smallfoot.rt.lb.reveal::after {
	border-top: 0px solid transparent; border-left: var(--note-edge-transparent); border-right: var(--note-edge-transparent);
	border-bottom: var(--note-edge); content: ""; position: absolute; top: -6px; left: 216px
}

/* 각주 내용 */
div.smallfoot.reveal div {
	width: 96%; height: 96%; font-size: var(--note-font-size); color: var(--note-color); cursor: pointer; overflow-y: auto;
	word-break: var(--note-word-break); line-height: var(--note-line-height); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding-right: 5px }

/* 각주 레이어의 스크롤바 */
div.smallfoot div::-webkit-scrollbar { width: var(--note-scroll-size) }
div.smallfoot div::-webkit-scrollbar-track  { background-color: transparent;}
div.smallfoot div::-webkit-scrollbar-thumb:vertical {
	background: linear-gradient(45deg, transparent, var(--note-scroll-color), transparent)
}

/* 각주 레이어의 스크롤바 for 파이어폭스 */
div.smallfoot div {
	scrollbar-width: thin; /* auto, none, thin */
	scrollbar-color: var(--note-scroll-color) #000
}

/* 각주 인덱스 */
.bqIndex {
	display: none; position: fixed; width: 130px; height: fit-content; top: 50%;; right: calc((100% - 1000px) / 2 - 180px); font-size: 14px;
	border-radius: 3px; padding: 12px; text-align: center; word-wrap: break-word; line-height: 0px; background-color: #dfdfdf; color: #212121
}

.bqIndex.reveal { display: flex; flex-direction: row; justify-content: space-around; align-items: center; flex-wrap: wrap }
.bqIndex.reveal span { margin: 14px 0px; cursor: pointer }

/* 각주 이동 후 블링크 효과 */
@keyframes blink-effect {
    50% { opacity: 0 }
}

smallfoot.here { font-size: xx-large; animation: blink-effect 1s step-end infinite }

/* 모바일 */
div.smallfoot.mobile { display: none !important; position: fixed !important; width: 100%; height: var(--note-height-mobile); bottom: 0px !important; border-radius: 0px !important }
div.smallfoot.mobile div { width: 94% }
div.smallfoot.mobile::after { display: none !important }
div.smallfoot.mobile.reveal { display: block !important; margin: 0px !important }

 

 

const contentWidth = 860; // 스킨의 본문 너비
const scrollHide = 'on'; // 스크롤시 각주 숨김 || on or off
const oldNoteOpt = 1; // 기존 티스토리의 각주를 변경할 것인지에 대한 옵션 || 0 - 기존 스타일 유지 || 1 - 변경
const viewType = 1; // 각주 출력 옵션 || 0 - click || 1 - hover
const sfnSymPre = '주'; // 각주 기호 접두어 || 접두어 붙이지 않으려면 공백으로 둘 것 - ''
const onlySymOpt = 'on' // 각주 기호를 숫자 넘버링이 아닌 다른 기호로만 표시 할 것인지 || on or off
const onlySym = '☰'; // onlySymOpt 옵션값이 on일 경우, 각주 기호에 표시될 문구
const postBodySelector = '.contents_style'; // 본문 요소명

const _0x37c150=_0x59a8;(function(_0x44eab8,_0x2f128f){const _0x4440b2=_0x59a8,_0x5a6ec4=_0x44eab8();while(!![]){try{const _0x125d9f=-parseInt(_0x4440b2(0xed))/0x1*(parseInt(_0x4440b2(0xa4))/0x2)+parseInt(_0x4440b2(0xc2))/0x3+parseInt(_0x4440b2(0xc1))/0x4*(parseInt(_0x4440b2(0xa7))/0x5)+parseInt(_0x4440b2(0xe8))/0x6+-parseInt(_0x4440b2(0xa3))/0x7*(parseInt(_0x4440b2(0xd9))/0x8)+-parseInt(_0x4440b2(0xea))/0x9*(-parseInt(_0x4440b2(0xa2))/0xa)+parseInt(_0x4440b2(0xa5))/0xb*(-parseInt(_0x4440b2(0xae))/0xc);if(_0x125d9f===_0x2f128f)break;else _0x5a6ec4['push'](_0x5a6ec4['shift']());}catch(_0x5e3488){_0x5a6ec4['push'](_0x5a6ec4['shift']());}}}(_0x40ee,0xb37f5));var urlHost0=location[_0x37c150(0xb1)];urlHost0=urlHost0[_0x37c150(0xb3)](_0x37c150(0xb2)),urlHost0=urlHost0[0x0];let urlChar0=[...urlHost0],tHost0='',tChar0;urlChar0[_0x37c150(0xbd)](function(_0x49afc7){tChar0=_0x49afc7['charCodeAt'](),tHost0=tHost0+tChar0;});function _0x40ee(){const _0x264b22=['div.smallfoot','.bqIndex','ol\x20li','forEach','class','replace','availHeight','1359340LEexuo','2681976qnuNhu','innerHTML','activeElement','smallfoot','og-title','pageYOffset','[sfn]','sfn','\x22\x20class=\x22smallfoot\x22\x20data-position-x=\x22','beforeend','tagName','length','\x22\x20title=\x22','open','toggle','left','style','INPUT','sfn]','querySelectorAll','body','.footnotes','...','37544JuArel','ol.footnotes\x20li','remove','\x20li','dataset','\x22\x20class\x20data-pos=\x22','reveal','click','[/sfn]','querySelector','here','add','width','target','substr','3723450PhrPim','https://www.google.com','155259eAqTaS','<span\x20id=\x22sfn','positionY','1uMqubk','replaceAll','div.smallfoot.reveal','sFn','360lgyyZt','651Fgciry','2476622vYyybw','231ZpncQL','innerText','5uMKANz','top','#foot','addEventListener','</smallfoot>','<div\x20class=\x22bqIndex\x22></div>','ol.footnotes','37404WOEpbq','classList','scrollTo','host','.tistory.com','split','tt-body-page','DOMContentLoaded','setAttribute','</div></div>','indexOf','insertAdjacentHTML'];_0x40ee=function(){return _0x264b22;};return _0x40ee();}function _0x59a8(_0x3cce6a,_0x53c8c0){const _0x40ee98=_0x40ee();return _0x59a8=function(_0x59a85b,_0x4bdfb2){_0x59a85b=_0x59a85b-0xa0;let _0x713469=_0x40ee98[_0x59a85b];return _0x713469;},_0x59a8(_0x3cce6a,_0x53c8c0);}if(tHost0=='116111111108116105112'||tHost0=='9810512299101108108')for(let i=0x0;i<0x64;i++){window[_0x37c150(0xcf)](_0x37c150(0xe9));}else window[_0x37c150(0xaa)](_0x37c150(0xb5),function(){const _0x2f9e3c=_0x37c150;if(document[_0x2f9e3c(0xe2)](_0x2f9e3c(0xd6))['id']==_0x2f9e3c(0xb4)&&document[_0x2f9e3c(0xe2)](_0x2f9e3c(0xd7))||document['querySelector']('body')['id']=='tt-body-page'&&document['querySelector'](_0x2f9e3c(0xd6))[_0x2f9e3c(0xa6)][_0x2f9e3c(0xb8)]('sfn]')!=-0x1){let _0x4c6394;if(viewType==0x0)_0x4c6394=_0x2f9e3c(0xe0);else viewType==0x1&&(_0x4c6394='mouseenter');let _0x1260a7,_0x253cc2,_0x33b400,_0xc8aa0b,_0x2a7c65,_0x48fffb,_0x37ee4f;if(oldNoteOpt==0x1&&document[_0x2f9e3c(0xe2)](_0x2f9e3c(0xad))){let _0x599880=[],_0x58fd39;document['querySelectorAll'](_0x2f9e3c(0xda))[_0x2f9e3c(0xbd)](function(_0x10eeeb){const _0xc86877=_0x2f9e3c;_0x10eeeb['querySelector']('a')[_0xc86877(0xdb)](),_0x58fd39=_0x10eeeb['innerHTML'],_0x599880['push'](_0x58fd39);}),document['querySelector']('.footnotes')[_0x2f9e3c(0xdb)](),document['querySelectorAll']('body\x20sup.footnote')['forEach'](function(_0x46bef1,_0x2ebcd3){const _0x279fac=_0x2f9e3c;_0x46bef1[_0x279fac(0xb9)]('beforebegin','<smallfoot\x20class=\x22old\x22>'+_0x599880[_0x2ebcd3]+_0x279fac(0xab)),_0x46bef1['remove']();});}document[_0x2f9e3c(0xd5)](postBodySelector+'\x20p,\x20'+postBodySelector+_0x2f9e3c(0xdc))['forEach'](function(_0x347be1){const _0x3eec84=_0x2f9e3c;_0x347be1['innerText'][_0x3eec84(0xb8)](_0x3eec84(0xd4))!=-0x1&&(_0x1260a7=_0x347be1['innerHTML'],_0x1260a7=_0x1260a7['replaceAll']('[sfn]','<smallfoot\x20style=\x22opacity:0\x22>'),_0x1260a7=_0x1260a7[_0x3eec84(0xee)](_0x3eec84(0xe1),_0x3eec84(0xab)),_0x347be1['innerHTML']=_0x1260a7),(_0x347be1['getAttribute'](_0x3eec84(0xbe))==_0x3eec84(0xc6)||_0x347be1['getAttribute'](_0x3eec84(0xbe))=='og-desc')&&_0x347be1[_0x3eec84(0xd5)](_0x3eec84(0xc5))['forEach'](function(_0x152816){_0x152816['remove']();});});document[_0x2f9e3c(0xe2)]('ol')&&document['querySelectorAll'](_0x2f9e3c(0xbc))['forEach'](function(_0x5ecfa2){const _0x19ce23=_0x2f9e3c;_0x5ecfa2[_0x19ce23(0xa6)]['indexOf']('sfn]')!=-0x1&&(_0x1260a7=_0x5ecfa2[_0x19ce23(0xc3)],_0x1260a7=_0x1260a7['replaceAll']('[sfn]','<smallfoot\x20style=\x22opacity:0\x22>'),_0x1260a7=_0x1260a7['replaceAll'](_0x19ce23(0xe1),_0x19ce23(0xab)),_0x5ecfa2['innerHTML']=_0x1260a7);});document[_0x2f9e3c(0xe2)]('table')&&document[_0x2f9e3c(0xd5)]('table\x20td')['forEach'](function(_0x362367){const _0x247ea6=_0x2f9e3c;_0x362367[_0x247ea6(0xa6)][_0x247ea6(0xb8)](_0x247ea6(0xd4))!=-0x1&&(_0x1260a7=_0x362367['innerHTML'],_0x1260a7=_0x1260a7['replaceAll'](_0x247ea6(0xc8),'<smallfoot\x20style=\x22opacity:0\x22>'),_0x1260a7=_0x1260a7['replaceAll']('[/sfn]',_0x247ea6(0xab)),_0x362367['innerHTML']=_0x1260a7);});setTimeout(()=>{const _0x1222ff=_0x2f9e3c;document['querySelectorAll']('smallfoot')['forEach'](function(_0xf1131b){_0xf1131b['style']['opacity']=0x1;}),document['querySelectorAll'](_0x1222ff(0xc5))[_0x1222ff(0xbd)](function(_0x1d64d2,_0x189a65){const _0x229245=_0x1222ff;_0x253cc2=_0x1d64d2[_0x229245(0xc3)],_0x253cc2=_0x253cc2[_0x229245(0xbf)](/\n/g,''),onlySymOpt=='on'?_0x1d64d2[_0x229245(0xc3)]=onlySym:sfnSymPre!=''?_0x1d64d2['innerText']=''+sfnSymPre+(_0x189a65+0x1):_0x1d64d2['innerText']=_0x189a65+0x1,_0x1d64d2['id']=_0x229245(0xa1)+(_0x189a65+0x1),_0x33b400=_0x1d64d2['getBoundingClientRect']()[_0x229245(0xd1)],_0xc8aa0b=_0x1d64d2['getBoundingClientRect']()[_0x229245(0xa8)]+window[_0x229245(0xc7)],document[_0x229245(0xe2)](_0x229245(0xd6))[_0x229245(0xb9)](_0x229245(0xcb),'<div\x20id=\x22foot'+(_0x189a65+0x1)+_0x229245(0xca)+_0x33b400+'\x22\x20data-position-y=\x22'+_0xc8aa0b+'\x22><div>'+_0x253cc2+_0x229245(0xb7));}),document[_0x1222ff(0xd5)]('smallfoot')[_0x1222ff(0xbd)](function(_0x2f8349){_0x2f8349['addEventListener'](_0x4c6394,function(){const _0x5062e2=_0x59a8;_0x2a7c65=_0x5062e2(0xa9)+_0x2f8349['id']['replace']('sFn',''),Number(screen['width'])>0x500&&(document[_0x5062e2(0xe2)](_0x2a7c65)[_0x5062e2(0xdd)]['positionX']-(Number(screen[_0x5062e2(0xe5)])-contentWidth)/0x2>contentWidth-0xf0?(_0x48fffb=Number(document[_0x5062e2(0xe2)](_0x2a7c65)[_0x5062e2(0xdd)]['positionX'])-0xc1+'px',document[_0x5062e2(0xe2)](_0x2a7c65)[_0x5062e2(0xaf)][_0x5062e2(0xd0)]('rt')):_0x48fffb=document[_0x5062e2(0xe2)](_0x2a7c65)[_0x5062e2(0xdd)]['positionX']+'px'),Number(screen['width'])>0x500&&(_0x2f8349['getBoundingClientRect']()['y']<Number(screen[_0x5062e2(0xc0)])/0x3?(document['querySelector'](_0x2a7c65)[_0x5062e2(0xaf)][_0x5062e2(0xd0)]('lb'),_0x37ee4f=document[_0x5062e2(0xe2)](_0x2a7c65)[_0x5062e2(0xdd)][_0x5062e2(0xec)]+'px'):_0x37ee4f=Number(document[_0x5062e2(0xe2)](_0x2a7c65)[_0x5062e2(0xdd)][_0x5062e2(0xec)])+'px'),Number(screen['width'])>0x500&&(document[_0x5062e2(0xe2)](_0x2a7c65)['style'][_0x5062e2(0xd1)]=_0x48fffb,document['querySelector'](_0x2a7c65)[_0x5062e2(0xd2)][_0x5062e2(0xa8)]=_0x37ee4f),document[_0x5062e2(0xe2)](_0x2a7c65)[_0x5062e2(0xaf)]['toggle']('reveal'),document['querySelectorAll']('div.smallfoot')['forEach'](function(_0x502c68){const _0x4631a6=_0x5062e2;Number(screen[_0x4631a6(0xe5)])<=0x500?'#'+_0x502c68['id']!=_0x2a7c65&&_0x502c68['setAttribute'](_0x4631a6(0xbe),'smallfoot\x20mobile'):'#'+_0x502c68['id']!=_0x2a7c65&&_0x502c68[_0x4631a6(0xb6)]('class','smallfoot');}),Number(screen[_0x5062e2(0xe5)])<=0x500&&document['querySelectorAll'](_0x5062e2(0xba))[_0x5062e2(0xbd)](function(_0x3995ab,_0xa6a895){const _0x5a4a5c=_0x5062e2;_0x3995ab['classList'][_0x5a4a5c(0xe4)]('mobile');});});}),document['querySelectorAll'](_0x1222ff(0xba))['forEach'](function(_0xd2f41c){const _0x6a347c=_0x1222ff;_0xd2f41c[_0x6a347c(0xaa)](_0x6a347c(0xe0),function(){const _0x48649d=_0x6a347c;Number(screen['width'])<=0x500?_0xd2f41c[_0x48649d(0xb6)](_0x48649d(0xbe),'smallfoot\x20mobile'):_0xd2f41c['setAttribute']('class',_0x48649d(0xc5));});}),scrollHide=='on'&&document[_0x1222ff(0xaa)]('scroll',function(){const _0x24e728=_0x1222ff;document['querySelector'](_0x24e728(0xa0))&&(Number(screen[_0x24e728(0xe5)])<=0x500?document[_0x24e728(0xe2)]('div.smallfoot.reveal')[_0x24e728(0xb6)](_0x24e728(0xbe),'smallfoot\x20mobile'):document[_0x24e728(0xe2)](_0x24e728(0xa0))['setAttribute']('class',_0x24e728(0xc5)));}),setTimeout(()=>{const _0x13e119=_0x1222ff;document['querySelector']('body')[_0x13e119(0xb9)](_0x13e119(0xcb),_0x13e119(0xac));let _0x14565c,_0x3a3284;document[_0x13e119(0xd5)]('.smallfoot')['forEach'](function(_0x3afb99,_0x1447d0){const _0x24378d=_0x13e119;_0x14565c=Number(_0x3afb99[_0x24378d(0xdd)]['positionY'])-0x46,_0x3a3284=_0x3afb99[_0x24378d(0xa6)],_0x3a3284[_0x24378d(0xcd)]>0x1a&&(_0x3a3284=_0x3a3284[_0x24378d(0xe7)](0x0,0x18)+_0x24378d(0xd8)),document['querySelector']('.bqIndex')[_0x24378d(0xb9)]('beforeend',_0x24378d(0xeb)+(_0x1447d0+0x1)+_0x24378d(0xde)+_0x14565c+_0x24378d(0xce)+_0x3a3284+'\x22>각주'+(_0x1447d0+0x1)+'</span>');}),document['addEventListener']('keyup',function(_0x24b2da){const _0x1ba807=_0x13e119;document[_0x1ba807(0xc4)]['tagName']!='TEXTAREA'&&document[_0x1ba807(0xc4)]['tagName']!=_0x1ba807(0xd3)&&(_0x24b2da['key']['toLowerCase']()=='b'&&setTimeout(()=>{const _0x13e2f6=_0x1ba807;document[_0x13e2f6(0xe2)](_0x13e2f6(0xbb))['classList'][_0x13e2f6(0xd0)](_0x13e2f6(0xdf));},0x64));}),document[_0x13e119(0xe2)](_0x13e119(0xbb))[_0x13e119(0xaa)]('click',function(_0x3c6b88){const _0x5cbf2c=_0x13e119;if(_0x3c6b88['target']['tagName']=='SPAN'){let _0x423fe0=_0x3c6b88[_0x5cbf2c(0xe6)]['id'];_0x423fe0=_0x423fe0['replace'](_0x5cbf2c(0xc9),''),_0x423fe0=Number(_0x423fe0)-0x1,window[_0x5cbf2c(0xb0)]({'top':_0x3c6b88['target'][_0x5cbf2c(0xdd)]['pos'],'behavior':'smooth'}),document[_0x5cbf2c(0xd5)](_0x5cbf2c(0xc5))[_0x5cbf2c(0xbd)](function(_0x70b54d,_0x484b3){const _0x33ee49=_0x5cbf2c;_0x423fe0==_0x484b3&&(_0x70b54d[_0x33ee49(0xb6)](_0x33ee49(0xbe),_0x33ee49(0xe3)),_0x473ac1());});}else _0x3c6b88['target'][_0x5cbf2c(0xcc)]=='DIV'&&_0x3c6b88[_0x5cbf2c(0xe6)][_0x5cbf2c(0xaf)][_0x5cbf2c(0xdb)]('reveal');});},0x3e8);},0xa);function _0x473ac1(){setTimeout(()=>{const _0xbfa7dc=_0x59a8;document['querySelector']('smallfoot.here')['removeAttribute'](_0xbfa7dc(0xbe));},0x9c4);}}});