티스토리/블러그스팟 목차 내부 링크 만드는 방법

티스토리와 블러그스팟에서 목차를 만들고 목차에 내부 링크를 적용하는 방법 설명입니다. 기존 글에 간단하게 html 코드를 넣어 목차에 내부 링크를 만드는 방법으로 id 코드와 a href 코드를 사용하는 간단한 방법 예시 설명입니다.

 

티스토리/블러그스팟 목차 내부 링크 만드는 방법

 

• 1단계 목차 복사해서 만들기
• 2단계 제목에 링크 id 넣기
• 3단계 목차에 id 링크 넣기

 

목차 링크/HTML 내부 링크 만들기

이 방법은  기존 글에 html 코드 ⓐ <a href="#T1"> 와 ⓑ <id="T1">를 입력하여 간단하게 내부 목차 링크를 만드는 방법입니다. 목차의 제목을 눌러서 내부 링크로 해당 제목으로 이동하게 하는 방법입니다.

 

참고로 CSS와 html Head를 편집하여 목차를 자동으로 입력하는 방법도 있습니다. 그리고 블러그스팟과 티스토리 모두 같은 방식으로 적용됩니다.

 

1단계 목차 복사해서 만들기

글을 작성하고 목차로 쓸 세부 제목을 목차 위치에 복사합니다.

h2나 h3 테그 제목을 아래 사진의 ⓐ처럼 복사하여 목차를 만듭니다.

 

"<li>"는 리스트 형식인데 굳이 이렇게 사용하지 않아도 되지만 이 리스트 방식으로 설명하겠습니다. <p> 방식도 뒤에 코드를 입력한 같은 방식입니다.

 

아래 사진의 예시를 참고하세요. 왼쪽은 글, 오른쪽은 html입니다. ⓐ 부분이 목차이고 ⓑ 부분이 목차에서 이동할 글 제목입니다.

html 내부링크 목차 만들기

 

2단계 제목에 링크 id 넣기

위의 사진 ⓑ의 제목 h3코드에 id 코드를 넣습니다.

id는 링크로 사용할 주소 같은 개념으로 제목 1은 "T1"이라고 쓰면 편합니다. 제목 2는 "T2"를 쓰거나 "TT"를 사용하는 방식이 좋습니다.

 

기존 '<h3>가. 바람이 부는 이유</h3>'에 id="T1"을 추가합니다. 

▶ '<h3 id="T1">가. 바람이 부는 이유</h3>' 로 변경합니다. 단순히 h3 코드 뒤에다 id="T1"을 추가하면 됩니다.

 

3단계 목차에 id 링크 넣기

목차에 제목에 입력했던 id 링크를 입력합니다.

형식은 <a href="#Id">이며 위에서 id를 T1으로 했으니 ▶<a href="#T1"> 을 추가합니다.

 

주의할 부분은 id앞에 #이 추가되고 줄 끝에 반드시 </a>로 마무리 해야 합니다.

순서는 사진과 같은 <li> 코드 다음에 <a href="#id"> 코드, 그리고 a 코드를 닫는 </a>를 넣고 리스트를 닫는 </li> 순입니다.

 

html 내부링크 목차 만들기2

 

위 사진 오른쪽처럼 코드를 넣으면 사진 왼쪽처럼 목차가 내부링크로 연결되며 링크처럼 색이 변하며 완료됩니다. (블러그스팟)

아래는 이 글(티스토리)에 목차를 적용한 사진입니다. 방식이 같은 것을 알 수 있습니다. 

 

html 내부링크 목차 만들기3

 

이상은 간단하게 티스토리와 블러그스팟에서 html 수정해서 목차를 만들고 내부 링크를 집어넣는 방법 설명입니다.

 

 

대한항공 기업 정보와 평균 연봉(취업자료)

대한항공 기업 정보와 평균 연봉(취업자료)

 

사과 밤에 먹으면 안 되는 이유와 활용법

사과 밤에 먹으면 안 되는 이유와 활용법