[기타] 코드를 몰라도 따라할 수 있는 목차 바로가기(앵커) 만드는 방법

블로그 글을 읽다 보면 최상단에 있는 '목차'를 클릭했을 때,

해당 내용이 있는 곳으로 화면이 스르륵 이동하는 것을 보신 적 있으신가요?

이렇게 클릭 시 특정 위치로 이동하게 만드는 기능을 '앵커(Anchor)'라고 합니다. 

이 기능은 방문자가 원하는 정보를 빠르게 찾을 수 있도록 도와주어 블로그 체류 시간을 늘려주고,

구글 SEO(검색엔진 최적화)에도 매우 유리하게 작용합니다.

복잡한 코딩 지식이 없어도 티스토리 기본 기능만으로 이 글을 따라오시면 누구나 만들 수 있습니다.

그럼 지금부터 알려드리도록 하겠습니다.

---

목차

1. 글 작성 및 소제목(Heading) 달기

2. 소제목에 이름표(id) 붙여주기

3. 목차 텍스트에 링크 걸기

4. 마무리

---

1. 글 작성 및 소제목(Heading) 달기

가장 먼저 평소처럼 블로그 글을 쭉 작성해 주세요.

그리고 목차로 나눌 부분에 '제목1' 또는 '제목2' 등으로 소제목 서식을 지정해 줍니다.

서식을 지정하는 방법은, 티스토리 글 에디터에서 아래 사진과 같이 우측 상단에서 두번째 아이콘에서 지정 할 수 있습니다.

예를 들어, 저는 이 글에서 [1. 글 작성 및 소제목(Heading)달기]를 '제목1'로 지정해 두었습니다.

1. 제목 서식 지정하기

 

2. 소제목에 이름표(id) 붙여주기

이제 이 소제목에 도착 지점을 알리는 '이름표'를 달아줄 차례입니다.

2-1. 글쓰기 화면 오른쪽 위에 있는 [기본 모드] 버튼을 클릭합니다.

2-1. 에디터 우측 상단의 '기본모드' 클릭

 

2-2. 드롭다운 메뉴에서 [HTML]을 클릭합니다.

2-2. HTML 클릭

클릭하면 '작성 모드를 변경하시겠습니까?' 라고 한번 더 물어보는데 'OK' 클릭하시면 html 화면으로 전환됩니다.

2-3. Ctrl+F(맥북은 Cmd+F)를 눌러 아까 적어둔 소제목을 검색합니다.

이후 화면이 아래처럼 복잡하게 보여도 놀라지 않으셔도 됩니다.

2-3. HTML모드 설정 시 보이는 화면 예시

검색 기능으로 아까 적어둔 소제목(저의 경우는 '1. 글 작성 및 소제목(Heading) 달기' 를 검색해 주세요.

2-3. 바로가기할 소제목 부분 검색

2-4. <h2> 또는 <h3> 같은 태그에서 id="원하는 이름"을 추가해 줍니다.

보통 검색을 하면 해당 텍스트 앞에 <h2> 또는 <h3> 같은 태그가 보일 건데요,

여기에 아래처럼 id="본인이 원하는 이름"을 추가해 주세요.

<!-- 작성 예시 -->

<!-- 수정 전 -->
<h2 data-ke-size="size26"><b>1. 글 작성 및 소제목(Heading) 달기</b></h2>

<!-- 수정 후 -->
<h2 id="step1" data-ke-size="size26"><b>1. 글 작성 및 소제목(Heading) 달기</b></h2>

위에는 제 글에서 수정한 html 그대로 보여 주는 코드입니다.

<!-- 작성예시(간단히) -->

<!-- 수정 전 -->
<h3> 텍스트 내용 </h3>

<!-- 또는 -->
<h2> 텍스트 내용 </h2>

<!-- 수정 후 -->
<h3 id="step1"> 텍스트 내용 </h3>

<!-- 또는 -->

<h2 id="step1"> 텍스트 내용 </h2>

여러분들은 위처럼 본인이 설정한 소제목 태그 잘 찾아서 id만 붙여주시면 됩니다.

팁으로, id 이름은 step1, info, method 같은 띄어쓰기 없는 영어 소문자나 숫자로 간단하게 적어주시는 것이 오류가 없고 가장 좋습니다.

저는 방법을 순서대로 알려주는 것이기 때문에 "step1"을 id로 설정하였습니다.

2-4. 소제목 태그에 id 추가하기

3. 목차 텍스트에 링크 걸기

이제 도착 지점에 이름표를 달았으니, 출발 지점(목차)을 만들어줄 차례입니다.

3-1. 다시 화면 오른쪽 위의 [HTML] 버튼을 눌러 [기본 모드]로 돌아옵니다.

아까 HTML 모드로 볼때와 마찬가지로 우측 상단에서 기본모드로 바꿀 수 있으며,

작성 모드를 변경하시겠냐는 물음엔 OK 눌러주시면 됩니다.

3-2. 글 맨 위로 올라가서 방문자가 클릭할 목차 텍스트를 적어줍니다.

보통 목차가 글 앞부분에 있으므로 목차 부분 텍스트를 적어 줍니다.

3-2. 목차 작성 예시(기본모드)

3-3. 화면 오른쪽 위 메뉴를 눌러 다시 HTML 모드로 들어갑니다.

기본 모드에서는 바로가기 링크가 추가되지 않기 때문에 다시 html 모드로 들어가 줍니다.

3-4. 목차 링크할 부분 텍스트 찾기

그후 검색 기능(Ctrl+F)를 활용하여 목차 링크 걸어줄 부분을 찾아 줍니다.

3-4. 다시 html 모드로 들어가서 목차 부분 찾기

3-5. 텍스트 앞에 <a>태그로 감싸주기

해당하는 텍스트 앞에 아래처럼 <a> </a> 태그로 감싸줍니다.

참고로, <a> 태그는 링크를 추가하는 html 태그입니다.

3-5. 목차 텍스트를 <a> 태그로 감싸주기

그렇게 되면 우선 아래처럼 링크가 추가 되었습니다.

3-5. 링크가 추가된 텍스트

3-6. <a> 태그 안에 <a href="#id이름"> 추가하기

위에서 링크는 추가했지만 아직 어디로 이동할지 목적지는 추가가 안된 상태이므로,

href="#id이름"을 <a> 안에 아래처럼 추가해 줍니다.

3-6. 링크 목적지 설정하기

<!-- 링크 목적지 설정하기 예시 -->

<!-- 수정 전 -->
<p data-ke-size="size16"><a> 1. 글 작성 및 소제목(Heading) 달기 </a></p>

<!-- 수정 후 -->
<p data-ke-size="size16"><a href="#step1"> 1. 글 작성 및 소제목(Heading) 달기 </a></p>

href는 링크가 이동하는 목적지를 알려주는 부분입니다.

아까 설정한 id이름 앞에 #을 붙여주세요.

<!-- html 목차 바로가기 주소 추가 예시 -->

<!-- 수정 전 -->
<p> 1. 목차 텍스트 </p>

<!-- 수정 후 -->
<p> <a href="#본인이설정한id"> 1. 목차 텍스트 </a> </p>

그 후 다시 기본모드로 들어와 목차 부분을 확인하면 아래와 같이 잘 추가가 된 것을 확인할 수 있습니다.

기본모드 링크추가 확인

다른 목차들도 위의 과정을 반복해서 설정해 주시면 됩니다.

그후 완료 버튼을 눌러 글을 발행해서 목차를 한 번 클릭해서 잘 작동하는지도 확인해 보시길 바랍니다.

 

4. 마무리

오늘 이렇게 목차 바로가기를 추가하는 방법을 같이 알아보았는데요,

처음 HTML 모드를 사용하면 좀 낯설 수 있지만 한 번 제 글을 따라서 해보면서 그리 어렵지 않다고 느끼셨으면 좋겠습니다.

내 블로그의 전문성을 높이고 방문자의 편의를 돕는 '목차 바로가기'를 여러분도 한번 적용해 보세요!