[Tistory] 게시글 내에서 이동하는 목차 내부링크 만들기

주의사항: 게시글을 HTML 모드에서 수정하는 작업을 포함하고 있습니다. 어렵지 않은 작업이지만 작성한 글에 영향을 미칠 수 있으니 실험을 해볼 수 있는 글에서 먼저 진행하신 후 작성하신 글에 적용하시는 것을 권장합니다.

    블로그 게시글을 보다 보면 목차에 있는 항목을 눌렀을 때 해당 내용으로 이동하는 내부 링크가 연결되어 있는 글들이 있습니다. 이 글은 내부 링크를 생성하는 글입니다. 

 

1) (기본모드) 글 작성을 완료하셨다면 목차를 작성해줍니다.

 

2) 다음으로는 글의 편집 모드를 HTML로 변경합니다.

 

3) (HTML) 아래와 같이 검은색 화면이 나올 테지만 당황하지 않으셔도 됩니다.

 

목차로 되어있는 부분이 보이실 텐데 이때 링크를 걸어줄 내용을 <a href="#(사용자 정의 id)">와 </a>을 추가해줍니다. 사용자 정의 id는 목차의 항목마다 다른 값이 지정되어야 합니다.

 

<!-- 변경 전 -->
<h4 style="text-align: justify;" data-ke-size="size20"><b>목차</b></h4>
<p style="text-align: justify;" data-ke-size="size16">1. 컴퓨터 사양</p>
<p style="text-align: justify;" data-ke-size="size16">2. CUDA 및 cuDNN 버전 찾기</p>
<p style="text-align: justify;" data-ke-size="size16">3. CUDA Toolkit 설치하기</p>
<p style="text-align: justify;" data-ke-size="size16">4. cuDNN 설치하기</p>
<p style="text-align: justify;" data-ke-size="size16">5. 추가</p>

<!-- 변경 후 -->
<h4 style="text-align: justify;" data-ke-size="size20"><b>목차</b></h4>
<p style="text-align: justify;" data-ke-size="size16"><a href="#01">1. 컴퓨터 사양</a></p>
<p style="text-align: justify;" data-ke-size="size16"><a href="#02">2. CUDA 및 cuDNN 버전 찾기</a></p>
<p style="text-align: justify;" data-ke-size="size16"><a href="#03">3. CUDA Toolkit 설치하기</a></p>
<p style="text-align: justify;" data-ke-size="size16"><a href="#04">4. cuDNN 설치하기</a></p>
<p style="text-align: justify;" data-ke-size="size16"><a href="#05">5. 추가</a></p>

 

저는 간단하게 "#01"로 하였는데 "#1", "#no01", "#text01" 등 원하시는 걸로 작성하시면 됩니다. 글을 미리 보기 할 경우 목차에 작성된 글들의 색이 바뀐 것을 확인할 수 있습니다. 아직 클릭을 하여도 아무 일도 일어나지 않습니다.

 

 

4) (HTML) 다음으로는 각 내용이 적힌 곳의 코드를 수정해줄 차례입니다. 앞서 생성한 링크를 눌렀을 때 어디로 이동할지는 정하는 것이라고 보시면 됩니다. 아래의 코드에서는 내용을 전부 모아서 써두기는 했지만 실제로 작업하실 때는 전체 게시글에서 작성된 부분을 찾으셔야 합니다. 각 내용을 찾으셨다면 id="(사용자 정의 id)"를 넣어주시면 됩니다. 예를 들어서 <a href="#01">로 하셨다면 <h4 id="01">, <a href="#no01">로 하셨다면 <h4 id="no01">로 입력해주시면 됩니다.

 

<!-- 변경 전 -->
<h4 style="text-align: justify;" data-ke-size="size20"><b>1. 컴퓨터 사양</b></h4>
<h4 style="text-align: justify;" data-ke-size="size20"><b>2. CUDA 및 cuDNN 버전 찾기</b></h4>
<h4 style="text-align: justify;" data-ke-size="size20"><b>3. CUDA Toolkit 설치하기</b></h4>
<h4 style="text-align: justify;" data-ke-size="size20"><b>4. cuDNN 설치하기</b></h4>
<h4 style="text-align: justify;" data-ke-size="size20"><b>5. 추가</b></h4>

<!-- 변경 후 -->
<h4 id="01" style="text-align: justify;" data-ke-size="size20"><b>1. 컴퓨터 사양</b></h4>
<h4 id="02" style="text-align: justify;" data-ke-size="size20"><b>2. CUDA 및 cuDNN 버전 찾기</b></h4>
<h4 id="03" style="text-align: justify;" data-ke-size="size20"><b>3. CUDA Toolkit 설치하기</b></h4>
<h4 id="04" style="text-align: justify;" data-ke-size="size20"><b>4. cuDNN 설치하기</b></h4>
<h4 id="05" style="text-align: justify;" data-ke-size="size20"><b>5. 추가</b></h4>

 

수정이 완료되셨다면 글의 작성을 완료하시면 링크가 생성된 것을 확인하실 수 있습니다!

 

긴 글 읽어주셔서 감사합니다. 
글과 관련된 의견은 언제든지 환영입니다.