티스토리 블로그 글 내에서 링크 만드는 방법(목차,목록 기능)

블로그 글이 길어질때 목록을 만들면 원하는 부분으로 바로 이동이 가능하고 글을 읽는 입장에서 필요한 부분만 읽을 수 있기 때문에 시간 절약도 됩니다. url 삽입이 아닌 글 내에서 링크로 이동 하는 방법을 알려드립니다.

 

목차 기능 만들기

 

아래와 같이 목차와 목차를 선택시 이동할 부분을 만들어 미리 저장합니다.

목차 1
목차 2

목차1 이동장소
목차2 이동장소

목차를 설정한 뒤에는 글 쓰기 우측 상단에 있는 기본 모드를 클릭하여 html 모드로 바꿔줍니다.

 

html 모드에서 목차. 좌측은 수정 전 우측은 수정 후 html 모습

텍스트만 입력한 상태에서 html 을 확인하면 <p data-ke-size="size16">목차 1</p> 로 나옵니다. 선택한 텍스트의 제목이나 본문에 따라서 p 인 경우도 있고 h로 나오는 경우도 있지만 텍스트인 목차 1 부분만 찾으면 됩니다. 여기서 목차 좌측에 <a style="cursor: pointer; text-decoration: none;" href="#point1">을 입력하고 목차 1 우측에 </a>를 입력하면 목차 링크가 생성됩니다.

<p data-ke-size="size16"><a style="cursor: pointer; text-decoration: none;" href="#point1">목차 1</a></p>

위의 코드가 링크가 생성된 텍스트의 모습이며 여기서 중요한 부분은 href="#point1" 입니다. 여기서 href="#원하는이름" 원하는 이름 부분이 링크의 이름으로 원하는 텍스트를 연결할때 사용됩니다. 코드를 입력하고 기본 모드로 돌아오면 목차 부분이 파란색으로 변하면서 링크가 생성된 모습을 볼 수 있습니다.

목차 1

목차에 링크가 생성된 후 이동할 텍스트에 링크의 이름을 html 에 넣어주면 링크가 완성됩니다.

 

html 모드에서 목차가 이동할 장소의 html 수정전과 후

좌측의 이미지에서 h4 부분에 id="링크이름" 을 추가하면 링크 생성 완료입니다. 목차 1의 링크 이름이 point1이기 때문에 <h4 id="point1">을 입력하면 목차 1과 목차 1 이동 장소의 링크가 생성됩니다. 같은 방법으로 목차 2와 목차 2 이동 장소를 연결해서 만들면 추가로 계속해서 목차 링크를 생성할 수 있습니다.

<h4 id="point1">목차 1 이동 장소</h4>

링크 이름 옆에 있는 data-ke-size="size20"는 블로그 스킨 편집에서 입력된 제목,본문 텍스트 크기 설정에 따라 자동으로 입력되는 코드입니다.  아래는 완성된 링크 입니다.

 

목차 1

목차 2

 

 

 

목차 1 이동 장소

 

목차 2 이동 장소

 

생성된 링크로 이동하면 해당 텍스트가 글에서 제일 위쪽으로 보이는 상태로 이동됩니다.