(20.10.07 업데이트)
들어가며
각주(脚註)는 무엇인가?
논문 따위의 글을 쓸 때, 본문의 어떤 부분의 뜻을 보충하거나 풀이한 글을 본문의 아래쪽에 따로 단 것.
영어로는 footnote1우후죽순 남발하면 지저분하지만, 적재적소에 쓰면 글이 깔끔해진다. 웹상 각주 대부분은 누르면 아래로 가는 식이다. 이 링크를 참고. 그런데 독자 입장에서는 X개 훈련도 아니고, 각주와 마주칠 때마다 본문과 끝을 왕복하면 짜증이 난다.
특히 모바일의 작은 화면으로 쥐꼬리만 한 각주를 누르는 것도 고역이다. 게다가 요즘엔 반응형으로 디자인되어 Navi바 등이 탑재된 사이트가 있는데, 상단에 Navi바가 있으면 정확한 위치로 안 갈 때도 있다.
이런 불편함을 해소하기 위해 호버링(hovering)과 팝오버(popover) 각주가 등장했다. 호버링은 마우스를 대면 각주가 뜨는 것이고, 팝오버는 마우스로 클릭하면 각주가 뜬다. 둘 다 괜찮지만 호버링은 모바일 사용이 어렵기에, 요즘처럼 모바일 시대에는 팝오버 형(形) 각주가 좋다.
Bigfoot 각주
구글링한 결과 Bigfoot의 각주2가 제일 깔끔하고 미려했다. 해당 사이트에 가면 설명이 잘 되어 있는데, 그걸 그대로 적용하면 안 되고 티스토리에 맞게3 고쳐야 한다. 이런 류의 시도를 해 본 분은 잘 아시겠지만, 얼핏 봤을 때 “적용하는데 30분이면 충분하겠지”라고 생각이 들어도, 실제로는 그 10배(…)에 달하는 시간이 걸리는 게 다반사다. 그래서 다른 분들은 나 같은 고생을 하지 않기 위해 참고하시라고 글을 남긴다.
Bigfoot 각주 적용법
먼저 Bigfoot 홈페이지에서 압축 파일을 받는다. 압축을 풀면 파일이 여러 개 보일 텐데, 우리에게 필요한 파일은 단 2개. bigfoot-default.css와 bigfoot.min.js이다. 이중 티스토리에 업로드는 bigfoot.min.js 만한다.
티스토리 → 관리 → HTML/CSS → 파일업로드에서 bigfoot.min.js를 업로드한다. 업로드 후 파일 목록을 살펴보면 images/bigfoot.min.js 요렇게 들어가 있다.
다음은 bigfoot-default.css인데, 원칙은 티스토리의 root의 css폴더에 업로드하는 것이나, 티스토리가 그런 걸 지원할 리 없다.4 따라서 bigfoot-default.css를 메모장 등의 편집 프로그램으로 열어서 안의 내용을 통째로, 관리 → CSS → 제일 하단에 붙여넣는다.
마지막으로 Bigfoot 홈피의 설명대로 HTML 상단의 <head></head> 사이에 아래의 코드를 넣으면 된다.
<!-- bigfoot footnotes -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="./images/bigfoot.min.js"></script>
<script type="text/javascript">
var bigfoot = $.bigfoot(
{
actionOriginalFN: "hide",
activateOnHover: "true",
deleteOnUnhover: "true",
}
);
</script>
코드를 하나씩 설명해보자면, 첫 라인은 구글에서 jquery를 퍼오는 코드다. 티스토리에는 기본적으로 jquery가 없거나 있더라도 Bigfoot이 필요로 하는 jquery와 버전이 다를 때가 많아서 이렇게 구글에서 불러오는 게 마음 편하다.1 1.8.3 버전을 추천한다.
다음 줄은, 업로드한 bigfoot.min.js 를 불러오는 코드다. 특이하게 티스토리는 경로 앞에 점(.)을 하나 찍어줘야 제대로 인식한다.
그 다음부터는 본격적으로 Bigfoot jquery를 커스터마이징하는 명령어다. 일단 이렇게 3개를 넣으면 현재 내 홈페이지에서 뜨는 것과 똑같이 설정할 수 있다.5
참고로 Bigfoot 각주의 기본 형식은 점 세 개이나, 숫자로도 변경할 수 있다. 여기에 파일 두 개가 있는데, 기존의 파일을 덮어씌우면 된다. bigfoot-default.css를 복사해서 위의 .css를 대체하고 bigfoot.min.js로 위의 동일한 파일을 대체하면, 점 세 개가 아닌 숫자 형식의 각주가 뜬다.
각주 태그에 관하여
노파심에 덧붙이자면, 각주 태그는 일반적인 걸 써야 한다. 일반적이란 말은, 자기만의 커스텀 태그가 안 들어간 걸 쓰라는 의미. 추천하는 태그는 다음과 같다.
<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>
<div class="footnotes"><ol>
<li class="footnote" id="fn:1">
<p>내용<a href="#fnref:1" title=""> ↩</a><p>
</li>
</ol></div>
맨 위의 첫째 줄은 본문의 각주를 넣을 곳에 삽입하고, 아래의 5줄은 본문 HTML 제일 밑에 넣으면 된다. 보면, 도처에 1이라고 숫자가 적혀있는데 1번 각주면 모든 숫자를 1로, 2번 각주면 모든 숫자를 2로... 이런 식으로 넣으면 된다. 그리고 각주를 하나 이상 추가할 때는,
<li class="footnote" id="fn:2">
<p>내용<a href="#fnref:2" title=""> ↩</a><p>
</li>
밑에 부분에서 요 부분만 div태그 안에 넣어야 한다.
<div class="footnotes"><ol>
</ol></div>
이 부분은 각주 개수가 늘어나더라도 한 번만 선언해 준다는 사실, 주의하자.
마치며
이상이다. 본 내용은 jquery가 뭔지도 모르는 초보가 수많은 삽질을 하면서 적용에 성공한 것이다. Bigfoot 각주 적용해 보시다가 막히는 부분이 있다면, 댓글을 달아 주시라. 본인이 아는 한도 내에서 최대한 자세히 답변해 드리겠다. 끝.
- 바로 이런 것
- 현재 블로그 적용 각주도 빅풋의 각주. 홈페이지에서 데모도 제공하고 있으니, 얼마나 예쁜 각주인지 직접 느껴 보시라! ↩
- 참고로 워드프레스는 플러그인이 있어서 쉽게 적용할 수 있다. ↩
- 오픈형 블로깅 툴인 워드프레스는 당연히 지원하며, 제로보드나 그누보드 등 CMS 툴도 물론 지원한다. ↩
- 이 외에도 Bigfoot 홈페이지에 수많은 커스텀 명령어가 있다. ↩
- 참고로 Bigfoot은 1.8.x 버전의 jquery 사용을 권장한다. 특히 3번대 jquery는 호환이 안 된다고 적어놨다. [본문으로]
