친절한효자손 취미생활

반응형

현재 친효애드온을 하나 개발 중 입니다. 본문 내에서 편리하게 해당 소제목으로 빠르게 이동이 가능한 하이퍼링크 목차 애드온 입니다. 이 기능은 방문자의 편의성을 최대한 살린 방법으로 구현해 놓으면 원하는 내용을 잽싸게 이동할 수 있다는 장점이 있습니다. 그와 동시에 단점도 하나 존재합니다. 본문 중간에 노출되는 자동 애드센스를 못 보고 지나칠 수 있다는 점 입니다. 우선 아래의 참고글을 살펴보시기 바라겠습니다.

 

위의 글을 방문해 보시면 서두에 업데이트 날짜에 대한 소제목이 있습니다. 바로 이 부분 입니다.

 

이 목록에는 소제목으로 바로 이동할 수 있는 하이퍼링크가 적용되어 있습니다. 아직 확인을 안 해 보셨다면 다시 방문하셔서 직접 목록을 눌러보시기 바랍니다. 그러면 금방 어떤 기능이 담겨져 있는지 확인이 가능할 겁니다.

 

목록을 만들어 하이퍼링크를 적용시키는 방법

먼저 목록을 만듭니다. 만드는 방법은 글쓰기 모드에 있는 리스트 기능을 사용해도 되고 친효애드온 관련글 모듈을 사용해도 상관 없습니다. 자신이 좋아하는 스타일의 목록을 꾸려도 상관 없습니다. 중요한건 링크를 걸 때의 방법 입니다. 이 본문에서도 간단한 예시를 만들어 볼 것 입니다.

 

 

간단하게 이렇게 리스트 목록을 구성하였습니다. 이제 실제로 저 목록을 눌렀을 때 이동되는 내용을 작성합니다. 당연히 그렇게 해야 하겠죠? 본문 내용은 충실해야 하니까요.

 

이제 위의 목록에 해당하는 소제목을 만듭니다. 개인적으로는 소제목으로 이동시키는것을 선호하기 때문에 본문에서도 소제목에 링크를 거는 방법을 소개해 드립니다. 꼭 소제목이 아니어도 됩니다. 이동시키고자 하는 위치에 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"가 마크업 되어 있음을 직감할 수 있습니다. 이제 어떻게 사용하는지 이해하셨으리라 생각이 됩니다. 끝.

공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

  1. 오늘도 유용한 정보 감사합니다
    2020.05.05 17:42 신고
  2. 익명
    비밀댓글입니다
    2020.05.31 17:55
    • 네. 수동입니다. 어차피 모든글에 목차가 필요없으니까요.
      2020.05.31 18:02 신고
  3. 감사합니다.
    2021.07.08 17:43 신고
  4. 혹시 네이버 블로그에 적용하는 방법도 아실까요? ㅠㅠ
    2021.09.02 12:18 신고
  5. 안녕하세요. 본문 링크 거는 법 어렵네요.ㅠ 님 포스팅 보고 겨우 성공했는데요. 제 경우는 밑줄이 쳐져 있는데 왜 그럴까요?
    2022.01.28 17:02 신고
    • 안녕하세요. HTML에서 하이퍼링크의 기본 스타일은 밑줄이 그어진 형태입니다. 정상이에요. 스킨마다 스타일이 다르게 연출될 수 있습니다.
      2022.01.28 17:07 신고
    • 빠른 답변 넘 감사합니다.
      설 명절 잘 보내세요. ^^
      2022.01.28 17:15 신고
  6. 알 수 없는 사용자
    그 data-sourec-url은 어떨때 사용하나요?
    링크에 사용하는사람이 있던데 어떤 용도인가요?
    2022.04.17 13:07
    • 그것이 어디에서 나오는 코드죠? 저라고 막 모든걸 다 아는건 아니랍니다.
      2022.04.17 13:16 신고
  7. 알 수 없는 사용자
    링크 다는곳에 data-soure-url = "링크주소 "이렇게 되어있는곳도 있더라구요
    2022.04.17 13:19
    • 출처 링크좀 알려주세요. 무슨 소린지 하나도 모르겠습니다.
      2022.04.17 13:20 신고
  8. 알 수 없는 사용자
    친절한효자손님도 지금 글 보면 추천상품 링크달려있잖아요? 거기에도 아까 쓴 코드가 있더라구요 그래서 따로 적으셨나싶어서요..
    2022.04.17 13:22
    • 아~ 저기 들어가는 data-source-url은 티스토리에서 제공하는 코드입니다. 일반적인 HTML 에서의 a 태그에는 href를 사용합니다.
      2022.04.17 13:24 신고
  9. 알 수 없는 사용자
    아 그러면 따로 적으신거는 아니네요?
    저는 href하고 같이 적혀있길레 또 다른 역할을 하는건줄알았어요 ㅎㅎ...
    2022.04.17 13:27