블로그 내부링크 거는 방법, 목차 바로가기 만들기

웹상에서 글을 쓰는 행위는 사실 문서를 만드는 행위와 동일합니다. 

종이문서와 다르게 웹 문서의 장점은 한 페이지에 많은 내용의 글과 이미지, 링크, 동영상 등을 적절하게 제공할 수 있다는 점입니다

 

 

스크롤되는 긴 글의 경우 해당 내용으로 바로 뛰어 그 부분만 보고 싶을때가 종종 있습니다.

그럴 때 우리는 내부링크를 제공해 사용자에게 편리하게 해당 내용을 볼 수 있도록 편의성을 제공할 수 있습니다. 

 

여기에는 큰 기술이나 지식은 필요하지 않습니다. 

다만, html코드를 넣을 때 꼭 아래의 형식대로 넣으셔야 합니다. 

그래야 의도했던 대로 링크가 그 역할을 수행하기 때문입니다. ( 다양한 실패를 해봤던 경험이 이미 있습니다. ㅠㅠ)

 

 

링크 거는 순서는 아래의 방법대로 하시면 되고 차례대로 설명드리겠습니다.

1. 목차를 적어준다.

2. 목차와 동일한 내용을 적어준다.

3. html모드에서 목차와 내용에 링크를 걸어준다.

4. 글을 게시하여 확인한다.

 

 

 

1. 목차를 적어준다.

아래와 같은 목차가 있다고 예를 들어보겠습니다. 

1. 강아지

2. 고양이

3. 고슴도치

4. 햄스터

 

 

2. 목차와 동일한 내용을 적어준다. 

목차를 그대로 가져오고 각 번호별 내용을 적어줍니다. 

 

1. 강아지

종류가 다양하고 크기도 다양해서 반려동물로써 좋습니다. 

 

2. 고양이 

사람의 손길을 많이 필요하지 않은 반려동물이라 함께 하기 좋은 친구입니다.

 

3. 고슴도치 

생각보다 예민하지만, 따가운 가시만큼이나 매력적인 반려동물입니다. 

 

4. 햄스터

작고 귀여우며 큰 공간을 차지하지 않은 장점이 많은 반려동물입니다. 

 

 

 

 

3. html모드에서 목차와 내용에 링크를 걸어준다. 

우선 html모드로 들어간 뒤 목차로 적어둔 html코드를 먼저 찾습니다. 

이런 코드를 발견하게 되신다면 목록 앞에 아래 모양처럼 링크를 넣어주세요. 

<a href="#k1">1. 강아지</a>
<a href="#k2">2. 고양이</a>
<a href="#k3">3. 고슴도치</a>
<a href="#k4">4. 햄스터</a>

코드로 보면 이렇게 되어있을 것입니다. 

글씨에는 링크가 걸려있는 표시로 파란색글씨에 밑줄이 생긴 것을 확인할 수 있습니다. 

 

 

이제 내용에 링크를 걸어줄 때가 되었습니다. 

코드는 아래 모드가 필요하고 링크를 넣는 장소는 번호 앞에 넣어주시면 됩니다. 

(글로는 어려우니 사진으로 꼭 확인하세요)

<div id="k1"></div>
<div id="k2"></div>
<div id="k3"></div>
<div id="k4"></div>

코드를 넣기 전 모습

코드를 넣어 준 후 모습

 

각 코드는 번호 앞줄에 넣어줍니다. 

이때, 순서를 틀리거나, 오타를 적어주면 링크는 걸리지 않습니다. 

이 부분만 꼭 유념해 주세요. 

 

 

4. 글을 게시하여  확인한다. 

이제 글이 게시하여 자신이 원한대로 링크가 잘 작동되는지 확인하면 됩니다. 

혹시, 링크가 잘 되지 않을 시에는 코드를 다시 한번 더 꼼꼼히 확인하시길 바랍니다.