[HTML/CSS] 티스토리에서 각주(footnote) 입력

(update: 2024-01-20) 

티스토리에서 글을 쓰다보면, LaTeX에서 작업을 했을 때처럼 각주가 필요한 경우가 종종 있었다. 그래서 이번 기회에 HTML에서 각주를 만드는 방법을 조사 및 요약을 하였다. 크게 티스토리에서 각주를 다는 방법은 아래와 같이 두 가지가 있다. 

   1. HTML의 앵커를 이용 
   2. 티스토리의 자체 기능 이용 

1. HTML의 하이퍼링크 이용 

HTML에서의 하이퍼 링크를 이용하여 각주를 사용 시, 

1.1. 방법 1

해당 방법은 다음 웹페이지를 참조하였다: 

<p>
Some text with a footnote.<sup><a href="#fn1" id="ref1">1</a></sup>
Some more text with a footnote.<sup><a href="#fn2" id="ref2">2</a></sup>
</p>

<sup id="fn1">1. [Text of footnote 1]<a href="#ref1" title="Jump back to footnote 1 in the text.">↩</a></sup>
<sup id="fn2">2. [Text of footnote 2]<a href="#ref2" title="Jump back to footnote 2 in the text.">↩</a></sup>

원리는 다음과 같다; 
   • `<sup>`: 텍스트를 subscript 형태로 만든다. 
   • `<a href="#fn1">`: `id`가 `"fn1"`인 링크를 만듦 
   • `<a href="#ref1">`:  레퍼런스 넘버로 가는 백링크를 만든다. 

아래는 결과이다. 

Some text with a footnote.¹
Some more text with a footnote.²

<sup>1. [Text of footnote 1]↩
2. [Text of footnote 2]↩</sup>

하지만, 이 방법은 각주의 번호들을 수동으로 매번 바꿔줘야 하기 때문에 많이 불편하다. 

---

1.2. 방법 2: 위키피디아가 각주를 사용하는 방식

1) 참조 웹페이지: 
  • https://en.wikipedia.org/wiki/Help:Footnotes   
  • Template:Reflist - Wikipedia

 

 

 

---

2. 티스토리의 자체 기능 이용

티스토리 자체의 각주 기능을 사용하기 위해선, 아래와 같이 "footnote" 태그를 사용하면 된다. 중요한 점은 HTML와 다르게 []를 이용해서 태그를 감싸야 한다. 

위 처럼 쓸 경우 각주가 다음과 같이 나타난다: 물리학^[각주:1] 

해당 "footnote" 각주가 시작하는 바로 앞에 주석 번호가 표시되고, 본문 최하단에 각 번호별로 각주 표시 영역이 별도로 표시가 된다. 

 

2.1. 티스토리의 각주 꾸미기

- 현재 계속 해당 각주를 꾸밀 수 있는 CSS에 대한 정보를 찾아보고 있긴 하지만, 현재까진 찾지 못했다. 

 

1. 뉴턴의 법칙 [본문으로]