CSS 롤오버로 각주 만들기

CSS 롤오버로 CCL 표시하기에서 사용한 CSS 롤오버로 구현한 각주다. 글을 쓸 때 인용한 내용의 출처나 해당 내용에 대한 부연 설명을 주석으로 단다. 블로그는 하이퍼 링크를 사용할 수 있으니 내용 출처에 대해 주석을 달 일은 많지 않을 것 같고 대부분 내용에 대한 부연 설명일 것이다. 주석은 각주¹각주 1각 쪽 마지막에 주석 내용을 기록한다.와 미주²각주 2글 전체 마지막에 주석 내용을 기록한다.로 구분되지만, 블로그 글은 기본적으로 쪽(page) 구분이 없다. 설령 쪽 구분을 해서 글을 작성한다고 해도 책과 같은 형태로 쓸 수 없고 연재물 형태가 되므로 각주와 미주를 구분하는 것이 의미가 없다. 어쨌든, 블로그 글에 각주를 달면 책과는 달리 글 마지막을 보지 않고도 즉시 말풍선으로 각주를 확인할 수 있어서 편하다. CCL처럼 역시 티스토리엔 이미 각주 기능이 있지만, 몇 년 전부터 [종료예정]이라는 꼬리표가 붙어서 언제 사라질지 몰라 불안해하다가 그냥 CSS로 만들어봤다.

특징 및 제한

1. 각주를 표시하는 숫자에 마우스 커서를 올리면 말풍선에 주석 내용이 표시되고 각주 번호를 클릭하면 글 마지막의 주석으로 이동한다. 주석을 확인한 다음 [본문으로]를 클릭하면 다시 이전에 읽던 부분으로 이동한다.
2. 각주 말풍선의 글자색, 글꼴, 배경 풍선 색 및 테두리 색 등을 바꿀 수 있다.
3. 말풍선에 a 요소로 하이퍼 링크를 추가할 수 없고 티스토리 이미지 삽입 기능으로 그림을 추가할 수 없다.(티스토리 이미지 삽입 기능은 block 속성을 가지므로 사용할 수 없다.) 그림을 추가하려면 img 태그로 직접 추가해야 한다. block 속성을 갖는 요소를 추가할 수 없다.
4. 나머진 티스토리 각주 기능과 완전히 같다.
5. 티스토리 각주 기능보다 적용이 번거롭다.

역시 CCL처럼 굳이 CSS로 적용할 필요가 없다. 정말 티스토리 각주 플러그인이 없어진다면 모르겠지만. 티스토리 각주 기능을 자주 사용하는데 좀 더 다양한 모습으로 사용하고 싶을 땐 조금 필요할지도...

일단 아래의 CSS를 [티스토리 관리 화면] - [스킨] - [HTML/CSS 편집] - [style.css]에 맨 아래에 붙여 넣는다.

CSS 코드

/* footnote */ a.footnote {     cursor: help;     position: relative;     text-decoration: none!important;     color: #666;     text-indent: 0 } .footnote sup {     color: crimson } .footnote span.note {     margin-left: -999em;     position: absolute;     padding: 10px;     background: #ffa;     border: 1px solid #ffad33;     text-align: left;     line-height: 1.3em } .footnote:hover span.note {     border-radius: 5px;     -moz-border-radius: 5px;     -webkit-border-radius: 5px;     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);     -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);     -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);     position: absolute;     right: -107px;     bottom: 2.5em;     z-index: 99;     width: 200px } .note_ttl {     display: block;     width: 100%;     margin: 0 auto 3px auto;     padding-bottom: 2px;     text-align: left;     border-bottom: 1px solid #fea;     color: crimson } div.footnote_desc {     border-top: 1px solid #ccc } .footnote:hover span.note:before {     content:"";     position: absolute;     bottom: -6px;     left: 105px;     border-width: 6px 6px 0;     border-style: solid;     border-color: #ffa transparent;     display: block;     width: 0;     z-index: 100 } .footnote:hover span.note:after {     content:"";     position: absolute;     bottom: -7px;     left: 104px;     border-width: 7px 7px 0;     border-style: solid;     border-color: #ffad33 transparent;     display: block;     width: 0 }

a.footnote는 말풍선 전체 스타일이다. color를 다른 색으로 바꾸면 주석 내용 글자색이 바뀐다. .footnote sup는 각주 번호를 표시하는 붉은색 숫자 스타일이다. color를 바꾸면 주석이 있음을 나타내는 작은 숫자 색을 바꿀 수 있다. .footnote span.note는 주석 내용을 표시하는 말풍선 스타일이다. margin-left: -999em 속성을 지정해서 평소엔 말풍선이 보이지 않도록 했다. padding으로 내부 여백을 조정하고 background와 border로 말풍선 배경 색 및 테두리 스타일을 바꿀 수 있다. text-align으로 글자 정렬 상태를, line-height로 줄 간격을 조정한다.

.footnote:hover span.note는 각주 번호에 마우스 커서를 올렸을 때 말풍선 위치와 스타일이다. right, bottom 값을 조정하면 말풍선이 표시될 위치를 바꿀 수 있다. .note_ttl은 말풍선 안에 [각주 1]이라고 표시된 글자 스타일이다. border-bottom을 수정하면 [각주 1] 글자 아래 구분선 색과 모양 등을 바꿀 수 있고 color를 수정해서 [각주 1] 글자색을 바꿀 수 있다.

div.footnote_desc는 글 마지막의 각주 부분 스타일이다. border-top 속성으로 각주 목록 위에 구분선을 표시해서 본문과 각주를 구분했다. .footnote:hover span.note:before와 .footnote:hover span.note:after는 말풍선 아래 화살표 모양을 표시하기 위한 것인데, 만약 .footnote span.note에서 말풍선 배경 색과 테두리 색을 바꾸려면 화살표 부분과도 색을 맞춰줘야 한다. 말풍선 배경 색(background:#ffa)과 .footnote:hover span.note:before의 border-color:#ffa transparent;에서 #ffa 부분 색상 코드를 똑같이 맞춰야 하고 말풍선 테두리 색(border:1px solid #ffad33)과 .footnote:hover span.note:after의 border-color: #ffad33 transparent;에서 #ffad33 부분 색상 코드를 똑같이 맞춰야 한다. 위에서 이야기하지 않은 스타일 속성은 바꾸지 않는 것이 좋다.

이제 실제 글에 적용할 차례다. 각주는 두 부분으로 구성된다. 본문에서 주석이 있음을 표시하는 숫자 부분과 글 마지막의 실제 주석 부분이다. 또 각주가 아닌 말풍선에서 주석 내용을 표시하려면 말풍선 부분도 필요하다. 아래는 내용을 참고 해서 HTML 태그를 글에 입력한다.

본문에 입력할 말풍선 HTML 코드
<a href="#footnote_desc_글번호_1" class="footnote" id="footnote_글번호_1"> <sup>1</sup> <span class="note"><strong class="note_ttl">각주 1</strong>주석 내용 입력</span> </a> <a href="#footnote_desc_글번호_2" class="footnote" id="footnote_글번호_2"> <sup>2</sup> <span class="note"><strong class="note_ttl">각주 2</strong>주석 내용 입력</span> </a>
실제 주석 말풍선을 적용한 모습
Let me not to the marriage of true minds1각주 1Shakespeare의 Sonnet 116 Let me not to the marriage of true minds... Admit impediments. Love is not love which alters when it alteration finds, Or bends with the remover to remove:

위 코드는 각주 코드 두 개를 연속해서 입력한 것이다. a 요소가 전체를 감싸고 그 속에 붉은색 작은 글자로 각주 번호를 표시하는 sup 요소가 들어간다. sup 요소 뒤에 말풍선으로 주석 내용을 나타내는 span 요소가 있다. [각주 1], [각주 2] 부분에 각주 번호를 표시하고 [주석 내용 입력] 부분에 실제 주석 내용을 입력한다. [글번호]는 실제 게시물 번호를 입력한다. 위 예에서 붉은색 숫자 1을 클릭하면 아래의 각주 HTML 코드 부분의 주석으로 이동한다.

여기까지 하면 말풍선이 완성된다. 글 마지막에 주석을 추가하지 않아도 말풍선에서 충분히 필요한 정보를 얻을 수 있다. 그래도 만에 하나 말풍선이 나타나지 않는 사태를 대비하기 위해 글 마지막에 주석을 추가해보자.

각주 HTML 코드
<div class="footnote_desc"> <ol> <li id="footnote_desc_글번호_1">각주 1 내용 입력 - <a href="#footnote_글번호_1">[본문으로]</a></li> <li id="footnote_desc_글번호_2">각주 2 내용 입력 - <a href="#footnote_글번호_2">[본문으로]</a></li> </ol> </div>
각주가 적용된 모습
Shakespeare의 Sonnet 116 Let me not to the marriage of true minds... - [본문으로]

각주를 본문 내용과 구분하기 위해 위에 구분선을 표시했다. [각주 1 내용 입력]에 각주 1의 주석을 한 번 더 입력하고 각주 HTML 코드를 글 마지막에 추가하면 글 끝에 각주가 표시된다.

사용 용도에 따라서 HTML 코드에 span 요소 전체를 빼서 말풍선을 없애고 숫자를 클릭했을 때 페이지 마지막에 있는 주석 부분으로 이동하게 할 수 있고, footnote_desc 부분을 빼서 글 마지막에 주석 부분을 추가하지 않고 말풍선 형태로만 사용할 수도 있다. 기본 방식처럼 말풍선과 각주를 모두 사용할 수도 있다. 또 말풍선엔 일부 정보만 표시하고 주석에 전체 정보를 표시하는 방식으로 사용할 수도 있다. 티스토리에선 각주를 서식으로 지정해두면 간편하게 사용할 수 있다. ArsClip이나 CLCL 사용자 역시 해당 프로그램 서식으로 지정해서 사용할 수 있다.

티스토리나 CSS를 사용할 수 있는 홈페이지에 적용할 수 있고 이글루스 블로그엔 제한적으로 적용된다. CSS 각주는 IE8 이상, Chrome 및 호환 브라우저, Firefox, Opera, Safari에서만 표시된다.

1. 각 쪽 마지막에 주석 내용을 기록한다. - [본문으로]
2. 글 전체 마지막에 주석 내용을 기록한다. - [본문으로]