티스토리 글쓰기에서 목차(책갈피) 만들기 저장용

티스토리 글쓰기에서 목차를 이용해서 글 내에서 이리저리 움직이는 책갈피 기능 만들기 HTML 개인 저장용

 

우선 글을 먼저 작성하고 HTML을 짜려고 하면 굉장히 복잡하다.

처음 글을 쓸때 소제목으로 나눠놓고 미리 만들어놓고 작업하는게 좀 더 편하다.

 

목차 작성을 위해서는 크게 2가지 작업을 하면 된다.

첫번째, 어디서부터 이동을 해야하는지에 대한 시작점 작성

두번째, 도착점 작성

 

-끝-

 

어디서 부터 이동을 해야하는지에 대해서는 href 태크

도착점은 id 태크를 활용하면 된다. 아래에서 하나하나 만들어보도록 하자.

 

첫번째, 어디서 이동을 해야하는지에 대한 태그부터 정해주도록 하자 

<a href="이동위치"> 내용 </a><br />

예시
<a href="#c1">1. 서론</a><br />
<a href="#c2">2. 운용법</a><br />
<a href="#c3">3. 스킬과 덱레시피</a><br />
<a href="#c4">4. 주력카드 설명</a><br />
<a href="#c5">5. 실제운용영상</a><br />

글을 실제로 HTML 탭에서 작성을 하면 이렇게 나온다.

 

참고로 blockquote 항목은 글쓰기에서 이걸 사용하면 사각형 틀안에 들어가게 되니까 많이 사용하자 

 

---

두번째, 마지막 Id태그를 활용해서 이동해야하는 곳을 보여주도록 하자

<p id="c1"> 이동하고 싶은 텍스트 
<p id="c2"> 이동하고 싶은 텍스트
<p id="c3"> 이동하고 싶은 텍스트
<p id="c4"> 이동하고 싶은 텍스트
<p id="c5"> 이동하고 싶은 텍스트

이렇게 이동하고 싶은 텍스트 앞에 넣어주도록 하자. 넣어놓고 글쓰기를 완료하면 HTML 값이 조금 바뀌게 되는데 그건 신경쓰지 말자 

글작성을 하고 나면 자연히 바뀐다 신경쓰지 말자

---

작업물

 

이렇게 작업하고 나면 글의 서두에 해당 목차 책갈피가 만들어지게 된다. 

아래 링크에서 작업물 확인이 가능하다.

 

 

[유희왕 듀얼링크스] 펜듈럼? 융합? 메탈포제 덱으로 굴리자