티스토리 목차 생성하기 (feat. 링크 클릭시 스크롤 이동)

 

티스토리에 글을 이것 저것 작성하다보니

조금 길어지는 글에는 목차를 두고 작성하기 시작했는데,

이때 목차에 링크 클릭시 스크롤 이동되게끔 하는 기능을 넣고자 하였다.

 

목차 기능을 찾던 중 자동으로 목차를 생성해 주는 방법도 있었는데,

나는 내가 직접 목차의 리스트 모양 및 이동 위치를 직접 설정하길 희망했기에

내가 사용한 나름의 방법을 적어보고자 한다.

↓ 자동 목차 생성 관련 참고했던 티스토리 글

https://hotsunchip.tistory.com/9

[티스토리] 자동 목차 생성 방법 (기존 문제 해결)

 

내가 사용했던 백오피스 운영툴에선 에디터 기능에 책갈피로  링크 거는 기능이 있었는데, 

스크롤 이동을 id 값을 사용해 진행했던 기억이 있어 그 방법을 활용해보기로 했다.

(걍  티스토리 에디터에 책갈피 기능이 생겼으면,,)

 

 

 

내 방법으로는 두가지 스타일의 목차를 만들수 있다.

 

1. 원하는 스타일의 목차 코드를 복사해 HTML 모드로 변경 후 넣어준다

 

1️⃣ 리스트형 목차 : ul과 a태그 활용

장점 -> 리스트 스타일의 목차로 깔끔함

 

목차

• 제 1장
• 제 2장
• 제 3장

<blockquote data-ke-style="style2"><b>목차</b></blockquote>

<ul>
  <li><a href="#section1">제 1장</a></li>
  <li><a href="#section2">제 2장</a></li>
  <li><a href="#section3">제 3장</a></li>
</ul>

 

 

2️⃣ 링크형 목차 : a태그 활용

장점 -> 목차 리스트 모양 커스텀 가능함

 

목차

 

✔️ 제 1장

✔️ 제 2장

✔️ 제 3장

<blockquote data-ke-style="style2"><b>목차</b></blockquote>

<p><a href="#section1">✔️ 제 1장</a></p>
<p><a href="#section2">✔️ 제 2장</a></p>
<p><a href="#section3">✔️ 제 3장</a></p>

 

아래 예시 사진과 같이 목차 위치에 복사한 값을 넣어주면 된다.

 

 

2. 클릭시 이동되길 원하는 위치에 목차 href 에 사용된 id값을 태그 안에 넣어준다

 

id="section1"

id="section2"

id="section3"

...

난 각 제 n장으로 이동되도록 원하기에,  해당 글이 시작되는 태그 안에 id 값을 넣어준다.

예시)
<p id="section1" ···
<h4 id="section2"  ···
<hr id="section3" style="color: # ···

 

 

tip이라면 제목 태그에 넣을 경우 제목이 맨 위로 가는데 gnb 에 가려질 수 있다. 

그러니 좀 더 윗 태그에 넣으면 가려지지 않고 보기 편하게 잘 이동 된다.

 

 

 

 

 

아래부터는 목차 링크 이동을 위해 넣어둔 글들이다.

---

 

 

 

제 1장

 

질문과 통찰의 용광로 속에서 그가 기회가 될 때마다 곱씹는 하나의 일관된 지향점은 ‘주체를 폐기’하는 것이었다. 

그것은 창작자로서 그가 실천하는 기본적인 태도로 전제되기도 하고, 

저항과 변화의 전략을 예리하게 보듬을 때마다 결정적인 조건으로 등장하기도 했다. 

토론의 큰 주제로 부각되지는 않더라도 모든 교류의 결정적 유전자로서, 

생각과 태도의 타협 없는 토대로서, 말 사이와 행동의 궤적을 은은하고도 강력한 오라(aura)처럼 맴돌곤 했다. 

그리고 이는 열 번째 『옵.신』의 출발점이 되었다.

서현석, 『옵.신 10』

 

 

---

 

 

 

제 2장

 

마네 이전에는, 시대를 거치며 예술의 혁신에 따라 각양각색으로 변화하는 미(美)와 대중의 취향이 이토록 완벽하게 결별한 적이 없었다. 

마네는 『살롱전』에서 잇따른 참사를 낳았다. 

마네 이후에 와서야 대중의 분노와 비웃음이 미에 대한 새로운 접근을 이만큼이나 확실하게 지시하게 된 것이다. 

마네 이전의 화가들 역시 파문을 일으킨 적이 있기는 하다. 

고전주의 시대 취향의 상대적 통일성 역시 타격을 입었다. 

낭만주의가 그 통일성을 파괴했고, 이는 대중의 분노를 유발했다. 

들라크루아나 쿠르베, 또 매우 고전주의적인 화가인 앵그르마저도 웃음거리가 된 적이 있다. 

그러나 「올랭피아」야말로, 군중의 비웃음을, 그것도 아주 어마어마한 비웃음을 샀던 최초의 걸작이다.

조르주 바타유(차지연 옮김), 『라스코 혹은 예술의 탄생 / 마네』

 

 

---

 

 

 

제 3장

 

아니, 

나는 아무것도 후회하지 않으니, 

내가 후회하는 것은 단지 내가 태어났다는 사실이고, 

죽어 가는 것은 이토록 길고 지루한 과업임을 늘 깨닫는다. 

 

하지만 지금은 내가 떠나온 지점을 붙들고 가자, 백마 그리고 격분, 연관성은 없는 것 같다. 

하지만 어째서 이 모든 것을 계속해야 하는지, 

나는 모르겠는데, 

언젠가 끝내야만 한다면, 어째서 지금은 안 되는가. 

 

하지만 이것들은 생각이고, 나의 것이 아니며, 아무것도 아니니, 내가 부끄럽다. 

 

지금 나는 늙고 허약하고, 

고통받고 허약한 채로 어째서라고 웅얼거리고 멈추고, 

오래된 생각들이 잔뜩 떠올라 내 목소리로 번지니, 

나와 함께 태어나 나와 함께 자라고 억눌러졌던 오래된 생각들, 또 다른 것들이 있다. 

 

아니, 그 머나먼 날로 돌아가, 어떤 머나먼 날이든 간에, 

그 흐릿하게 허락된 땅에서 거기 존재하는 것들과 하늘을 향해 눈을 들어 올리고 다시 내렸다가, 

다시 들어 올리고 다시 내리기를 반복하고, 

어디로도 가지 않는 발은 오로지 어떻게든 집으로 향하고, 

아침이면 집에서 나갔다가 저녁이면 집으로 돌아오고, 

내 목소리는 하루 종일 내가 귀 기울여 듣지 않는, 심지어 내 것도 아닌, 

오래된 똑같은 것들을 웅얼거리고, 그러다 보면 하루의 끝에 다다르니, 

그것들은 꼬리가 복슬복슬한 마모셋 원숭이가 내 어깨 위에 앉은 것처럼, 

나와 함께한다. 

 

이렇게 계속 말하고, 아주 낮고 쉰 목소리로 말하니, 내가 목이 따가운 것도 당연하다.

사뮈엘 베케트(윤원화 옮김), 『포기한 작업으로부터』