가끔 주석 또는 각주를 달아야 하는 일이 생긴다.
이전에는 그냥 텍스트로만 표시 했지만
최근에 들어서 블로그에서 제공하는
하이퍼 링크와 앵커를 만들어 각주 만들고 있다.
사실 알고보면 매우 간단하다.
일단 각주의 예를 보여줄 것이지만,
페이지 내부에 텍스트로 목차를 만들고,
해당 단락으로 이동 등으로 활용이 가능할 것이다.
하이퍼 링크와 앵커란?
먼저 하이퍼 링크는
우리가 웹을 이용할 때 자주 이용하는 것들 이다.
흔히 링크(link)라고도 이야기하며,
URL이라고도 이야기 하는 것 이다.
예를 들면
아래와 같이 구글 번역기 주소가 적혀 있고,
누르면 해당 페이지로 이동하는 텍스트를 말한다.
누르면 구글 번역기 사이트로 이동 된다.
정확히는 이것을 하이퍼 링크라고 부르며,
링크라고 부르기도, URL이라고 부르기도 한다.
다음으로 앵커(Anchor)는 비교적 최근에 나온 개념으로
단어의 의미상 으로는 배의 닻이나
릴레이 경기의 최종 주자를 말하지만
HTML에서 사용하는 앵커(Anchor)는
하이퍼 링크의 출발지와 도착지를 말한다.
이 블로거에서 앵커 기능은 도착지를
설정한다고 생각하면 되며,
반대로 링크는 출발지를 설정하는 것이다.
앵커(Anchor) 설정
위에서 언급했다시피 매우 간단하다.
도구 바(Tools bar)를 보면
링크 삽입 또는 수정이 있을 것이다.
위의 URL 만들기/수정 버튼을 누르면
URL을 지정할 수 있고,
앵커 만들기/수정 버튼을 누르면
앵커를 지정할 수 있다.
하지만 URL을 만들기 위해서는
먼저 텍스트가 필요하다.
주석을 만들기로 했으니
주석을 대충 만들어보자.
링크를 걸 텍스트에 드래그하여 앵커를 만들 수 있다.
나는 주로 숫자에 링크 및 앵커를
달아놓는 편이기 때문에 숫자에 달았지만,
사실 [1] 잠을 드래그 해도 된다.
드래그 한 후
아이콘을 눌러 앵커 만들기/수정 버튼을 눌러보자.
누르면 우리가 드래그 했던 텍스트와
아래 이름이라는 텍스트 박스가 보일 것이다.
이 이름 칸에 이름(변수)을 부여하면 된다.
예를 들어
나는 주로 링크를 걸때는 1up,
1down으로 주로 설정하기 때문에
위와 같이 1up으로 앵커를 설정하겠다.
그리고 동일한 방식으로
실제 내용이 적히는 주석 칸에는
1down이라는 앵커를 부여하겠다.
링크(하이퍼 링크) 설정
다음에는 실제 이동될 링크를 설정 해보자.
나는 위쪽의 [1]을 눌렀을 시
맨 아래의 주석 설명란으로 이동하고 싶기 때문에
1down이라는 이름의 앵커로 설정한 곳으로 이동해야 한다.
그렇기 때문에
우리가 지정해야 할 URL은 #1down이다.
동일하게 아래 쪽 [1]에는
#1up으로 URL를 설정해주면 끝이다.
정상적으로 작동하는지 확인하기 위해서는
편집기 내부의 미리 보기로는 작동하지 않기 때문에
게시 한 후의 미리 보기를 통해 확인해보자.
테스트
우리가 확인해봐야 할 것은
기능이 잘 작동하는지도 잘 봐야겠지만
URL이 어떻게 변화하는지 살펴보자.
먼저 맨 처음 페이지의 들어갔을때의 URL이다.
그 다음은 위의 [1]을 눌렀을 때의 URL이다.
마지막으로 아래 쪽의 [1]을 눌렀을 때의 화면이다.
이쯤 되면 눈치챘겠지만
우리가 앵커 이름을 지정했을 때
정의했던 이름이 URL의 끝에 붙는 것을 확인할 수 있다.
따라서
위의 [1]가 상단에 있는 페이지이고
아래의 [1]이 상단에 있는 페이지가 되는 것을 알 수 있다.
HTML편집기에서의 앵커와 링크
현 시점(2020.09.27)에
위와 같이 Blogger 편집기에서
더 이상 앵커를 만들 수 없는데
어처피 앵커도 태그로 만들어지기 때문에
직접 HTML 편집기에서 추가 해주면 된다.
앞서서 한 예제와 동일하게 한다고 하면
<a href="#1Down" id="1Up">[1]</a>
<a href="#1Up" id="1Down">[1]</a>
위와 같이 태그 설정을 해주면
정확히 동일한 기능을 하게 된다.
id 타입의 값이 앵커이며,
href 타입의 값이 링크이다.
다음으로 윗 첨자에 대한 이야기를 해보자.
윗 첨자 표현 구현
윗 첨자 표현은 현재(2020.10.02 기준)
따로 기능을 제공해주지 않기 때문에
HTML 태그만으로 설정이 가능하다.
윗 첨자에 해당하는 HTML 태그는 <sup>~</sup> 인데
이해를 돕기 위해 구체적인 예를 들어보겠다.
예컨데, 나는 ㅁㄴㅇㄹ이라는
글자 뒤에 윗 첨자를 달고 싶다고 가정해보자.
이에 해당하는 태그는 아래와 같다.
<a href="#1Down" id="1Up"><sup>[1]</sup></a>
그 다음 첨자 앞에 ㅁㄴㅇㄹ 텍스트를 추가하고 싶다면
편집기에 ㅁㄴㅇㄹ를 입력한 다음
HTML로 편집기로 들어가 위의 코드를 붙여 넣으면 된다.
의도한 ㅁㄴㅇㄹ 뒤에 윗 첨자가 붙는 형태를 만들 수 있다.
좀 더 쉽게 사용하는 방법은
미리 [1] ~ [10] 까지 태그를 만들어 놓고 필요할때 마다
복사 붙여넣기를 하는 식으로 사용하면 매우 편하게 사용할 수 있다.
2020.09.27 HTML 편집기에서 앵커 및 링크 작성 추가
2020.09.27 타이틀 수정 및 윗 첨자 항목 추가
