티스토리 블로그 포스팅 원하는 위치로 이동하는 목차 링크 만들기

티스토리 목차 링크: 가독성 & SEO 높이는 방법 (HTML, 서식 활용)

블로그 포스팅을 작성하다 보면, 특히 글의 길이가 길거나 다루는 내용이 많을 때, 독자들이 원하는 정보를 쉽게 찾도록 돕는 목차의 필요성을 느끼게 됩니다.

단순히 목차 항목을 나열하는 것만으로도 글의 전체적인 구조와 흐름을 파악하는 데 도움이 되지만, 여기에 사용자 편의성을 한층 더 높이는 방법이 있습니다. 바로 각 목차 항목에 해당하는 본문 내용으로 바로 이동할 수 있는 '목차 링크'를 설정하는 것입니다.

목차에 링크를 설정하면 독자들이 필요한 정보를 빠르게 탐색할 수 있도록 도울 뿐만 아니라, 포스팅의 전반적인 가독성을 향상시키고 사용자 경험을 개선합니다. 이는 검색 엔진 최적화(SEO)에도 긍정적인 영향을 줄 수 있습니다.

이번 글에서는 티스토리 블로그 포스팅에 효과적인 목차 링크를 만드는 방법을 HTML 코드 편집부터 서식 저장까지, 단계적으로 자세히 설명해 드리겠습니다.

 

티스토리 목차 링크 만들기 가이드 대표 이미지

 

 

목차

• 목차 링크 만들기 (HTML 편집)
• 목차 링크 서식으로 저장하기
• 마무리 및 활용 팁

 

 

목차 링크 만들기 (HTML 편집)

 

- 위 이미지와 같이 스타일이 적용된 클릭 가능한 목차 링크를 만들어 보겠습니다. 이를 위해서는 티스토리 글쓰기 에디터의 HTML 편집 모드를 사용해야 합니다.

 

티스토리 글쓰기 에디터에서 HTML 모드 전환 및 코드 편집 화면

- 목차 링크 생성의 핵심은 HTML 코드를 직접 수정하는 것입니다. 글쓰기 에디터 우측 상단의 '기본모드'를 클릭하여 'HTML' 모드로 변경합니다.

- 목차 링크는 두 부분으로 구성됩니다:

1. 링크가 걸릴 목차 텍스트: 이 부분은 `목차 텍스트` 형태로 작성합니다. `#` 뒤에 원하는 고유 ID 이름(예: `link1`, `section1` 등 영문/숫자 조합)을 지정합니다.
2. 링크 클릭 시 이동될 본문 위치(보통 소제목): 해당 위치의 HTML 태그(주로 ``, `` 등 제목 태그)에 `id="위에서정한ID"` 속성을 추가합니다.

중요: ``의 `#` 뒤 ID 이름과, 이동할 위치에 설정한 `id="위에서정한ID"`의 ID 이름이 정확히 일치해야 링크가 작동합니다.

- (참고) 위 예시의 제목 스타일(좌측/하단 테두리)은 티스토리의 기본 '인용' 기능이 아닌, HTML과 CSS 코드를 직접 수정하여 만든 디자인입니다. 인용 기능을 활용한 스타일 변경은 아래 관련 글을 참고해 주세요.

티스토리 블로그 인용 색상 및 디자인 변경

 

목차 항목 링크 부분 HTML 코드 (a href="#link1")

본문 제목 부분 HTML 코드 (id="link1")

 

 

스타일이 적용된 목차 제목 HTML 코드 (h4 태그)

스타일이 적용된 본문 소제목 HTML 코드 (h2 태그)

 

- 위 이미지들에서 볼 수 있듯이, '목차' 제목 자체에도 스타일(테두리, 색상 등)을 적용하기 위해 HTML 코드를 수정했습니다. 코드가 다소 길어 보일 수 있지만, 이는 스타일링을 위한 CSS 코드가 포함되어 있기 때문입니다.

[목차 제목 스타일 코드 예시]

적용예시

실제 적용된 '목차' 제목 디자인

<h4 style="box-sizing: border-box; border-width: 1px 10px; border-bottom-style: solid; border-bottom-color: #BD0000; border-left-style: solid; border-left-color: #BD0000; letter-spacing: -1px; padding: 5px; margin: 5px 0px; line-height: 1.3;" data-ke-size="size20"><span style="color: #bd0000; ffont-family: 'Cafe24Ohsquare';"><b>&nbsp;목차</b></span></h4>

` 태그를 사용하여 제목 수준을 지정하고, `style` 속성 안에 CSS 코드를 넣어 박스와 라인 디자인, 폰트 색상 등을 설정합니다. (색상 코드 `#003180` 등은 원하는 색으로 변경 가능)

 

[본문 소제목 스타일 및 ID 설정 코드 예시]

적용예시

실제 적용된 본문 소제목 디자인

- 목차 제목과 달리 왼쪽 라인만 있는 스타일을 원할 경우, 아래와 같이 코드를 적용합니다. 중요한 것은 `id="link1"` 부분을 추가하여 목차의 `href="#link1"`과 연결하는 것입니다.

<h2 id="link1" style="border-left: 5px solid #BD0000; letter-spacing: -2px; padding: 0px 0px 0px 7px; margin: 5px 0px;" data-ke-size="size26"><span style="color: #bd0000; ffont-family: 'Cafe24Ohsquare';"><b>대제목</b></span></h2>

- (전체 적용된 최종 코드는 포스팅 하단 첨부 파일 또는 서식 저장 부분에서 확인하실 수 있습니다.)

 

<주요 CSS 속성 설명>

위 코드 예시에 사용된 주요 CSS 속성은 다음과 같습니다 (스타일 커스터마이징 시 참고):

• box-sizing: border-box; : 요소 크기 계산 시 테두리와 안쪽 여백(패딩)을 포함시킵니다.
• border-width: 1px 10px; : 테두리 두께 설정 (위/아래 1px, 좌/우 10px).
• border-bottom-style: solid; : 아래쪽 테두리 스타일 (실선).
• border-bottom-color: #003180; : 아래쪽 테두리 색상.
• border-left-style: solid; : 왼쪽 테두리 스타일 (실선).
• border-left-color: #003180; : 왼쪽 테두리 색상.
• letter-spacing: -1px; : 글자 사이 간격 조절 (-1px은 자간을 좁힘).
• padding: 5px; : 요소 내부 여백 (테두리와 내용 사이 간격).
• margin: 5px 0px; : 요소 외부 여백 (다른 요소와의 간격, 위/아래 5px, 좌/우 0px).
• line-height: 1.3; : 줄 간격 (글자 크기의 1.3배).
• color: #003180; : 글자 색상.
• font-family: 'Cafe24Ohsquare'; : 글꼴 지정 (해당 폰트가 설치되어 있거나 웹폰트로 로드되어야 적용됨).

 

 

목차 링크 서식으로 저장하기

- 이렇게 설정한 목차 구조와 스타일을 매번 포스팅마다 새로 만드는 것은 번거로운 일입니다. 티스토리의 '서식' 기능을 활용하여 저장해두면 클릭 한 번으로 간편하게 불러와 사용할 수 있습니다.

티스토리 관리자 화면: 콘텐츠 > 서식 관리 > 서식 쓰기 메뉴

- 티스토리 관리 페이지로 이동하여 좌측 메뉴에서 [콘텐츠] > [서식 관리]를 선택합니다. 그 다음 우측 상단의 [서식 쓰기] 버튼을 클릭합니다.

 

서식 편집기에서 HTML 모드로 전환하여 목차 코드 붙여넣기

- 서식 편집기 화면이 나타나면, 에디터 우측 상단의 '기본모드'를 'HTML' 모드로 변경합니다. 그리고 앞에서 만들어둔 목차 링크와 스타일이 포함된 전체 HTML 코드를 복사하여 붙여넣습니다. 서식 제목(예: "기본 목차 스타일")을 입력하고 저장합니다.

 

티스토리 글쓰기 에디터 상단 '더보기' 메뉴의 '서식' 옵션

- 이제 새로운 글을 작성할 때, 에디터 상단 메뉴에서 [...] 더보기 버튼을 클릭한 후 [서식]을 선택합니다.

 

저장된 서식 목록에서 원하는 서식 선택

글쓰기 에디터에 선택한 서식이 자동으로 삽입된 모습

- 저장해둔 서식 목록이 나타나면, 방금 만든 목차 서식을 클릭합니다. 그러면 현재 작성 중인 글에 해당 목차 구조와 스타일이 그대로 삽입됩니다.

 

목차 링크

서식으로 불러온 목차 내용을 실제 포스팅 내용에 맞게 수정

- 서식으로 불러온 목차 내용을 실제 포스팅의 소제목에 맞게 수정하고, 각 소제목에 해당하는 `id` 값도 서식에 설정된 값(`link1`, `link2` 등)과 동일하게 설정해주면 됩니다.

 

[목차 링크 HTML 코드 예시 파일]

목차링크_html_예시.txt

0.00MB

위 예제에서 사용된 목차 스타일 HTML 코드가 담긴 텍스트 파일

 

마무리 및 활용 팁

지금까지 티스토리 블로그에서 HTML 편집을 통해 클릭 가능한 목차 링크를 만들고, 이를 서식으로 저장하여 효율적으로 활용하는 방법에 대해 자세히 알아보았습니다.

이 방법을 활용하면 긴 글이나 정보성 포스팅의 가독성을 크게 높여 독자 만족도를 향상시킬 수 있습니다. 작성하시는 포스팅의 종류와 내용에 맞춰 목차 스타일이나 구조를 다양하게 변경하여 유용하게 사용해 보시기를 바랍니다.

이 글이 도움이 되셨길 바라며, 앞으로도 유용하고 좋은 정보가 있으면 공유드리도록 하겠습니다.

감사합니다.