티스토리 본문 내에서 하이퍼링크 목차를 만들어 소제목으로 바로 이동하는 방법
현재 친효애드온을 하나 개발 중 입니다. 본문 내에서 편리하게 해당 소제목으로 빠르게 이동이 가능한 하이퍼링크 목차 애드온 입니다. 이 기능은 방문자의 편의성을 최대한 살린 방법으로 구현해 놓으면 원하는 내용을 잽싸게 이동할 수 있다는 장점이 있습니다. 그와 동시에 단점도 하나 존재합니다. 본문 중간에 노출되는 자동 애드센스를 못 보고 지나칠 수 있다는 점 입니다. 우선 아래의 참고글을 살펴보시기 바라겠습니다.
위의 글을 방문해 보시면 서두에 업데이트 날짜에 대한 소제목이 있습니다. 바로 이 부분 입니다.
이 목록에는 소제목으로 바로 이동할 수 있는 하이퍼링크가 적용되어 있습니다. 아직 확인을 안 해 보셨다면 다시 방문하셔서 직접 목록을 눌러보시기 바랍니다. 그러면 금방 어떤 기능이 담겨져 있는지 확인이 가능할 겁니다.
목록을 만들어 하이퍼링크를 적용시키는 방법
먼저 목록을 만듭니다. 만드는 방법은 글쓰기 모드에 있는 리스트 기능을 사용해도 되고 친효애드온 관련글 모듈을 사용해도 상관 없습니다. 자신이 좋아하는 스타일의 목록을 꾸려도 상관 없습니다. 중요한건 링크를 걸 때의 방법 입니다. 이 본문에서도 간단한 예시를 만들어 볼 것 입니다.
간단하게 이렇게 리스트 목록을 구성하였습니다. 이제 실제로 저 목록을 눌렀을 때 이동되는 내용을 작성합니다. 당연히 그렇게 해야 하겠죠? 본문 내용은 충실해야 하니까요.
이제 위의 목록에 해당하는 소제목을 만듭니다. 개인적으로는 소제목으로 이동시키는것을 선호하기 때문에 본문에서도 소제목에 링크를 거는 방법을 소개해 드립니다. 꼭 소제목이 아니어도 됩니다. 이동시키고자 하는 위치에 ID 값만 입력하면 됩니다. 방법은 이렇습니다.
하이퍼링크 목록1
현재 이렇게 하이퍼링크 목록1 이라고 소제목을 만들었습니다. 지금은 예시이기 때문에 이미 목록과 소제목이 한 화면에서 다 보이니까 효과가 미미하지만 목록과 실제 소제목 사이에는 무수히 많은 내용들이 있다고 가정하겠습니다. 그냥 이동되는 원리에 대해서만 이해하시면 됩니다. 방금도 말씀드렸듯 이동하고자 하는 타겟 태그에 ID값을 입력한다고 말씀 드렸는데 이게 무슨 소리인지 확인해 보도록 합시다.
<h3 data-ke-size="size23" id="A01">하이퍼링크 목록1</h3>
현재 이 글은 새로운 글쓰기 에디터에서 작성한 문서 입니다. 그래서 소제목 기능을 사용하게 되면 저렇게 h3 태그 안쪽에 data-ke-size="size23" 이라고 하는 스타일 매소드가 자동으로 생성 됩니다. 이 부분은 그냥 무시하면 됩니다. 구형 글쓰기 에디터는 이 매소드가 생성되지 않고 h3 태그만 적용 됩니다. 중요한건 노란색으로 표시된 id="A01" 입니다. 이것을 우리는 보통 "ID값을 부여한다"고 표현합니다. 목록1을 누르면 이동시키고자 하는 위치에다가 ID값을 부여하는 개념이 바로 이것 입니다. 수동으로 설정해야 하며 하이퍼링크의 목록1 안에 들어가는 a 태그에도 href="#A01" 로 지정을 해주면 세팅이 완료 됩니다. 중요한 포인트는 href="#생성한ID값" 이라는 점 입니다. #을 사용한다는 점 잊지 마시기 바랍니다.
목록에 링크를 겁니다. 방금 만든 ID값을 똑같이 입력합니다. #을 빼먹지 않도록 합니다. HTML에서의 ID값은 페이지 기능을 가지고 있습니다. 그리고 하나의 페이지에는 하나의 ID값을 가집니다. 중복되어서는 안 된다는 이야기 입니다. 알파벳 대/소문자 구별을 하며 반드시 영어가 먼저 와야하고 이후에 숫자가 오면 됩니다. 숫자는 굳이 사용하지 않아도 되지만 영어 알파벳은 반드시 사용해야 합니다. 이 점만 기억하시면 됩니다. 구형 글쓰기 에디터에서는 풀주소를 입력하지 않고 #A01만 입력해도 넘어가지는데, 신형에서는 이게 안 됩니다. 저렇게 풀URL 주소를 넣어야 새창으로 열기도 해제가 되고 확인도 활성화가 됩니다. 상관 없습니다. 어차피 HTML 모드에서 한번 더 수정을 해줘야 하니까요.
<li><a href="https://rgy0409.tistory.com/#A01" target="_blank">하이퍼링크 목록1</a></li> /*수정 전*/
<li><a href="#A01">하이퍼링크 목록1</a></li> /*수정 후*/
HTML 모드에서 살펴보시면 아마 이렇게 적용되어 있을 겁니다. 이제 노란색으로 표시된 부분을 모두 지워주시기 바랍니다. 참고로 target="_blank" 부분이 바로 새창띄우기 기능을 하는 매소드 입니다. 참고하시기 바랍니다. 본문 내에서 이동하는 하이퍼링크 이므로 새 창으로 띄우면 곤란하겠죠? 그래서 최종적으로 수정 후 처럼 만들어지면 됩니다.
이렇게 해서 본문에 하이퍼링크를 만들고, 해당 목록을 클릭했을 경우에 원하는 위치로 이동하는 방법에 대해 알아봤습니다. 주의사항을 꼭 숙지하시고 요긴하게 사용하시면 좋을 것 같습니다. 마지막으로 본문 정리 차원에서, 그리고 본문 양을 늘리는 차원에서 이 방법의 장단점을 한번 더 고지를 하고 마무리 짓도록 하겠습니다.
본문 내 하이퍼링크 페이지 장단점
마무리로 본문 내 하이퍼링크 페이지를 만들면 어떤 장단점이 있는지 요약하자면 다음과 같습니다.
-장점 : 방문자가 원하는 문서를 빠르게 열람할 수 있음
-단점 : 본문 중간에 생성된 애드센스 자동광고를 못 보고 지나칠 수 있음
이상입니다. 참고로 본문에서 예시로 보여드린 하이퍼링크 목록2를 누르면 바로 이곳 소제목인 "본문 내 하이퍼링크 페이지 장단점" 으로 바로 이동하는것도 확인 하셨을 겁니다. 아직 안 해 보셨다면 눌러보시기 바랍니다. 즉 목록2의 링크 href 에는 "#A02"라고 하는 ID값이 들어있다는 것을 알 수 있습니다. 또한 해당 타겟인 h태그 안에는 id=""A02"가 마크업 되어 있음을 직감할 수 있습니다. 이제 어떻게 사용하는지 이해하셨으리라 생각이 됩니다. 끝.
