티스토리 글에 각주다는 법

---

1. HTML으로 사용

<p></p> 사이에 들어간 단어 오른쪽에 흐린남색의 배경색으로 채워진 부분의 코드를 삽입하면 되고, 그 외의 배경색으로 채워진 부분의 코드는 임의로 변경가능한 부분이기에 입맛대로 바꾸면 된다.

1_1) 아래 코드는 예시로 단어나 문자 오른쪽에 작은 문자(여기서는 번호)를 누르면 보충설명 문단으로 이동해주는 코드이다.

<p>단어

<sup class="footnote">

  <a id="footnote_link_1_1"

       style="color: #ff0000;

       font-family: Verdana,Sans-serif;

       display: inline;"

       href="#footnote_1_1">

    <span style="display: none;">[각주:</span>1<span style="display: none;">]

    </span>

  </a>

</sup>

</p>

 

1_2) 아래 코드는 예시로 위 코드와 세트이니 빼먹으면 위코드 존재자체가 무의미하다고 봐도 되는 코드이나 굳이! 굳이! 쓰고 싶지 않다면 문제될 건 없으며, 설명 오른쪽 단어(여기서는 '본문으로')를 클릭하면 설명하는 단어로 다시 이동할 수 있다.

<div class="footnotes">

  <ol class="footnotes">

    <li id="footnote_1_1">

      <a href="#footnote_link_1_1">

       [본문으로]

      </a>

    </li>

  </ol>

</div>

 

// 아래코드는 단어나 문자 오른쪽에 작은번호를 누르면 보충설명 문단으로 이동해주는 코드임

<p>각주의 뜻
  <sup class="footnote">
    <a id="footnote_link_1_1"
      style="color: #ff0000;
      font-family: Verdana,Sans-serif;
      display: inline;"
      href="#footnote_1_1">
      <span style="display: none;">[각주:</span>1<span style="display: none;">]</span>
    </a>
  </sup>
</p>

// 아래코드는 보충설명해주는 문단으로
// 설명 오른쪽 본문으로라는 문자를 클릭하면 설명한 단어쪽으로 다시 이동하는 코드임

<div class="footnotes"> 
  <ol class="footnotes"> 
    <li id="footnote_1_1">각주는 어쩌구 저쩌구다<a href="#footnote_link_1_1">[본문으로]</a></li> 
  </ol> 
</div>

 

아래는 위코드를 적을 시 나오는 결과물이다.

각주¹

 

1. 설명 [본문으로]

 

---

 

2. 기본모드에서 사용

위 코드로 인해 각주가 자동적용되어 불가피하게 사진으로 대체 ^^

 

위와 같이 단어를 쓰고, 대괄호 열고 footnote 적고 대괄호 닫고, 단어에 대한 보충설명을 적고, 대괄호 열고 슬래시footnote 적고 대괄호 닫고, 글쓰기 완료를 해주면 자동으로 각주가 예쁘게 뜬다.

아래는 위코드를 적을 시 나오는 결과물이다.

단어^[각주:1]

 

---

1. 설명 [본문으로]