티스토리 목차 메뉴 이동 링크 사용법
- Web Activities / Tistory
- 2023. 2. 19. 16:10
Contents
티스토리 목차 메뉴 이동 링크
이전 시간에 티스토리 메뉴 이동 링크에 대한 예제를 넣어드렸는데요.
연습은 이렇게 간단하게 하면 된다는 것을 보여드렸리는 글이였습니다.
이 목차 메뉴 이동 링크를 이용하려면 HTML에서의 작성이 요구 되는데요. 티스토리 이제 막 시작 하시는 분들에겐 이게 여간 힘든일이 아닐 수 없습니다. 저도 몇 가지만 사용중이고 외우지는 못하기에 쉽게 사용하는 법을 스스로 만들거나 검색해서 사용하고 있습니다.
그럼 티스토리 메뉴 이동 링크 사용법 바로 들어가보도록 하겠습니다.
아래에서 글 복사 가능하도록 html코드를 메모도 저장해 놓도록 하겠습니다.
드래그 하여 서식으로 이용하셔도 될 것 같네요.
자 알려드리기 위해 이전 시간
글 내에 있던 HTML을 확인 하여 코드를 한번 보겠습니다.
검은 바탕이다 보니 파란박스선을 봐주시면 되겠습니다.
▲ 보시면 위의 큰 박스가 제가 메뉴로 처음 적었던 큰 제목을 나열한 것이고 아래의 작은 박스가 클릭했을 시 해당 제목을 표현한 것입니다.
00000이 글 아래 내용이니 신경 쓰시지 않아도 됩니다.
이를 보면 정말 간단하게 알 수 있는 것이
목차 메뉴링크의 시작부분
<a href="#1번">1. 목차 메뉴 이동 링크1</a>
목차 메뉴링크의 시작부분 이동부분
<div id="1번"> </div>
이 두가지가 서로 연결되어 있는 것을 확인할 수 있는 것 입니다. 앞에 data size 머시기는 신경 안쓰셔도 됩니다. 글 사이즈를 나타내는 요소인데, html에 붙여넣고 기본모드 다시 갔다오면 생성되니 위의 내용들만 붙여 넣으시면 되겠죠?
자 그럼 간단해 졌습니다. 목차에 대한 예시를 서식으로 미리 만들어 놓고, 목차에 리모컨이 필요한 글에서 사용하면 되겠죠?
티스토리 초보자분들은 서식이 머지? 하실 수 있는데 아래 글을 잠깐 보고 오시면 위치랑 사용법을 아실 수 있습니다.
▲ 위와 같이 서식의 html에 저장 되면 다음에 쓰기 편하겠죠? 솔직히 5이상 나가는 적이 잘 없지만;;
만약 6이상가게 되면 어떻해? 라고 하신다면 또 알려드리죠.
목차 메뉴링크의 시작부분
<a href="#1번">1. 목차 메뉴 이동 링크1</a>
목차 메뉴링크의 시작부분 이동부분
<div id="1번"> </div>
아까 보셨던 코드 입니다. 저기 보면 위에도 id가 있고, 아래이동부분에도 id가 1번으로 있습니다. id는 서로를 식별할 수 있는 암호로 "내가 1번 너도 1번 그러면 이동" 이런 약속이 직접적으로 이뤄질 수 있는 문구라는 거죠.
그렇게 볼때 위의 그림을 본다면 2번에는 2번 쭉 5번까지 입력 된게 보이실 겁니다.
그럼 마찬가지로 html에서 6번을 만드실 땐 위의 시작부분 하나와 같은 id의 이동 코드를 각 번호 아래로 복사 붙여 넣고 작성 하시면 되겠죠?
자 이제 응용의 시간입니다. 위의 메뉴 목차 이동링크 코드를 작성한 메모이니 서식의 html에 붙이시고 서식 메뉴를 꾸며 글에서 마음껏 써보도록 합니다.~
주의점
자 그냥 서식 쓰면 될 것 같은데 한가지 주의 하셔야 할 부분이 있습니다.
html로 보실땐 보이니 상관이 없었는데, 이게 다음으로 넘길려고 본문 제목 위에서 엔터를 치면 위의 링크 이동부분의 html코드는 그대로이고 아래 글만 내려가는 현상이 있습니다. 그래서 줄 하나 위에서 엔터를 치시는 것을 추쳔 드립니다.
▲ 위와 같이 1번 아래 공간을 늘리기 위해서라면 1번 제목 바로 아래에서 엔터를 치는 건 상관 없는데, 2번 바로 위에서 엔터를 쳐 버리면 id같이 그대로인 상태로 내려 가게 됩니다. 그래서 2번을 내리는 목적이라면 한칸 더 위에서 엔터를 쳐주시면 되겠습니다. 번호 옆에서 줄바꿈 하시는 것은 상관 없습니다.
글이 잘 이해 안되는 분도 계실 수 있는데 몇번 쓰다보면 금방입니다. 연습 또 연습해 보아요~
구독, 좋아요
한번씩만 눌러주시면 저에게 큰 힘이 되겠습니다.
(비로그인도 좋아요 가능하니 마음껏 눌러주세요)
잠깐~! 쿠팡파트너스 하시나요?
추천인 입력시 추천인 + 추천자 모두 추가수익금 1% 가능합니다.
AF5341594
로 추천 부탁드립니다.
