블로그 목차 내부 링크 걸기

인터넷을 하다 다른 블로그 글을 보다 보면 목차에 클릭을 했을 때 내부에 있는 글 부분으로 이동하는 것을 보신 분들이 계실 것입니다. 블로그 자체에 내부 링크를 연결한 것인데요. 오늘 이번 시간에는 블로그 목차 내부 링크 걸기 방법을 알아보도록 하겠습니다.

 

블로그 내부 링크 걸기

블로그 안에 링크를 걸 때에는 아래 형식을 이용합니다.

목차에 걸 링크 형식 HTML: "<a href="#00"> 목차 내용 <a>" 

내부에 연결 될 형식 HTML: "<p id=00"> </p>"

 

여기에서 00부분은 숫자 또는 문자 등 연결할 부분의 id와 맞춰서 입력해 줍니다.

아래 글을 보시면 어떻게 링크가 연결되는지 확인해 보실 수 있습니다.

윈도우11 안전모드 부팅 방법

윈도우11 안전모드 부팅 방법

 

아래 예제를 통해서 조금 더 자세히 알아보겠습니다. 아래 있는 사진에 있는 목차에 1번부터 4번까지 내부 링크를 걸어보겠습니다.

내부 링크 예제

1. 티스토리 오른쪽 상단에 있는 '기본 모드-HTML'을 순서대로 클릭합니다.

HTML 모드

 

2. 미리 글을 써 놓았던 부분에 링크 연결 HTML 태그를 입력해 줍니다. 

링크 HTML 태그를 넣어줍니다.

3. 위치로 이동되는 부분에 id를 삽입해 줍니다.

ID를 입력해 줍니다.

 

내부 링크 연결할 때 팁

저는 블로그에 내부 링크를 연결할 때에는 모든 내용을 쓴 뒤에 내부 링크를 연결합니다. 그리고 위 사진을 보시면 연결할 ID가 해당 목차 위에 공백 부분으로 연결해 놓았습니다. 제목 부분으로 링크를 해 놓으면 브라우저 표시줄 바로 아래 부분에 나오기 때문에 브라우저와 여백을 넣기 위해서 소제목 한 단계 위에 해당 id를 넣어 연결시켜 줍니다.

 

블로그를 처음하시는 분들이거나 HTML 언어를 잘 모르시는 분들은 어려울 수 있는데요. 천천히 따라 해 보시면 쉽게 블로그 목차에 내부 링크를 쉽게 삽입하실 수 있으실 것입니다. 여러분들에게 도움이 되었으면 좋겠습니다.