글의 목차 링크 작성하기

HTML 문법을 활용하여 목차에 링크를 달아 가독성을 높여봅시다.

HTML을 전혀 몰라도 순서대로 따라하면서 정해진 위치에 복붙만 해도 충분히 가능합니다.

 

<목차>

1. 첫 번째 내용

2. 두 번째 내용

 

위 목차에 해당 내용이 시작되는 지점에 링크를 달려고 합니다.

 

---

 

상단 메뉴에서 기본모드 -> HTML로 바꿔줍시다.

 

 

---

이렇게 편집 화면이 바뀔 것입니다.

여기서 5, 6번 줄은 목차 이름이고 8, 9번 줄은 해당 목차 내용이 시작되는 지점입니다.

 

 

---

목차 파트

Before
<p>1. 첫 번째 내용</p>

After
<p><a href="#1">1. 첫 번째 내용</a></p>

<p></p> 내부에 <a href="#아이디"></a> 형식으로 감쌉니다.

괄호 안에 새로운 괄호를 넣는다고 생각하면 되겠습니다.

아이디는 영문, 숫자로 표현하는게 좋겠습니다.

 

---

 

내용 시작 지점 파트

Before
<h4 data-ke-size="size20">1. 첫 번째 내용 시작 지점</h4>

After
<h4 id="1" data-ke-size="size20">1. 첫 번째 내용 시작 지점</h4>

<p> 또는 <h> 등으로 감싸져 있을 것입니다.

맨 앞의 괄호에서 처음 시작하는 알파벳 뒤에 id = "아이디" 형식을 추가해주면 됩니다.

목차에 적은 아이디와 동일하게 적으면 됩니다.

 

---

전부 적용하면 이런 형식이 되겠습니다.

글을 다 작성하고 난 뒤 제대로 링크가 적용될겁니다!

<p>HTML 문법을 활용하여 목차에 링크를 달아 가독성을 높여봅시다.</p>

<p>&lt;목차&gt;</p>
<p><a href="#1">1. 첫 번째 내용</a></p>
<p><a href="#2">2. 두 번째 내용</a></p>

<h4 id="1" data-ke-size="size20">1. 첫 번째 내용 시작 지점</h4>
<h4 id="2" data-ke-size="size20">2. 두 번째 내용 시작 지점</h4>