티스토리 목차 만들기 : 자동목차 생성 방법

 

 

티스토리 블로그 자동 목차 만들기 : 초보자를 위한 가이드

블로그를 운영하면서 독자들에게 보다 체계적이고 효율적인 정보 전달을 위해 자동 목차 기능은 필수적입니다. 특히 티스토리 사용자들 사이에서는 이 기능이 구글 SEO 점수 향상에 도움을 주고, 독자들이 원하는 정보를 빠르게 찾을 수 있도록 하는 중요한 역할을 합니다. 이 글에서는 티스토리 블로그에 자동 목차를 만드는 방법을 초보자도 쉽게 따라 할 수 있도록 단계별로 안내합니다.

 

 

자동 목차의 개념과 방법

자동 목차(TOC, Table of Contents)는 블로그나 웹사이트의 글을 구성하는 각 섹션의 제목과 해당 링크를 목차 형태로 나타내는 기능입니다. 이는 방문자들이 원하는 정보를 쉽게 찾을 수 있도록 도와주며, 글의 구조를 한눈에 파악할 수 있습니다.

 

자동 목차를 만드는 과정

1. 라이브러리 다운로드 : 티스토리에서 사용할 수 있는 ‘jquery.toc’ 라이브러리를 다운로드합니다.
2. 파일 업로드 : 다운로드한 'jquery.toc.js’와 ‘jquery.toc.min.js’ 파일을 티스토리 스킨 편집기에 업로드합니다.
3. HTML 코드 삽입 : 스킨 편집기의  바로 위에 자동 목차 생성 코드를 삽입합니다.
4. 서식 저장 : 자동 목차 코드를 서식에 저장하여, 글을 작성할 때마다 쉽게 사용할 수 있도록 합니다.
5. 글쓰기 : 글을 작성하면서 ‘제목 2’, ‘제목 3’, ‘제목 4’ 등을 사용하여 소제목을 만들고, 이를 통해 자동 목차가 생성됩니다.

자동 목차는 특히 긴 글을 작성할 때 유용합니다. 예를 들어, 여행기를 작성한다고 할 때, 각 여행지의 이름을 소제목으로 사용하고, 자동 목차를 통해 독자가 특정 여행지로 바로 이동할 수 있게 하는 것이죠. 이렇게 하면 독자는 원하는 정보를 빠르게 찾아 읽을 수 있습니다.

자동 목차는 또한 검색 엔진 최적화(SEO)에도 도움을 줍니다. 검색 엔진은 목차를 통해 글의 구조를 더 잘 이해하고, 관련 키워드를 쉽게 찾아낼 수 있기 때문입니다. 따라서 자동 목차는 글의 가독성을 높이는 동시에 검색 엔진에서의 노출도 개선할 수 있는 효과적인 도구입니다.

 

 

필요한 파일 다운로드 및 압축해제

파일 다운로드

• ‘jquery.toc.zip’ 파일을 다운로드할 수 있는 웹사이트로 이동합니다.
• 해당 페이지에서 ‘jquery.toc.zip’ 파일을 찾아 다운로드 버튼을 클릭합니다.
• 파일이 다운로드되면, 보통 웹 브라우저의 기본 다운로드 폴더에 저장됩니다.

압축 해제

• 다운로드한 ‘jquery.toc.zip’ 파일을 찾아서 마우스 오른쪽 버튼을 클릭합니다.
• 나타나는 메뉴에서 ‘압축 풀기’, ‘Extract Here’, 또는 'Extract All’과 같은 옵션을 선택합니다.
• 압축 해제 후, 'jquery.toc.js’와 ‘jquery.toc.min.js’ 두 개의 파일이 나타납니다.

파일 확인

• 압축 해제된 폴더를 열어 'jquery.toc.js’와 ‘jquery.toc.min.js’ 파일이 정상적으로 있는지 확인합니다.
• 이 두 파일은 티스토리 블로그에 자동 목차를 생성하는 데 필요한 스크립트 파일입니다.

 

HTML/CSS/JS 파일 업로드 절차

블로그 관리 페이지 접속

• 티스토리 블로그의 관리자 페이지로 이동합니다.
• ‘꾸미기’ 메뉴를 선택한 후 '스킨 편집’을 클릭합니다.

HTML 편집 모드 진입

• 스킨 편집 화면에서 ‘HTML 편집’ 탭을 선택합니다.
• HTML, CSS, 파일 업로드 중 '파일 업로드’를 선택합니다.

파일 업로드

• 페이지 하단에 있는 ‘+추가’ 버튼을 클릭합니다.
• 업로드할 HTML, CSS, JS 파일을 선택하고 업로드 버튼을 누릅니다.

파일 확인

• 업로드된 파일이 목록에 정상적으로 표시되는지 확인합니다.
• 파일 용량의 합계가 표시되며, 전체 용량은 20MB로 제한되어 있습니다.

저장

• 모든 파일이 정상적으로 업로드되었다면, ‘저장’ 버튼을 클릭하여 변경사항을 적용합니다.

 

 

HTML 코드 삽입 방법

티스토리 관리 페이지 접속

• 티스토리 블로그의 관리 페이지에 로그인합니다.
• ‘꾸미기’ 메뉴를 클릭한 후 '스킨 편집’을 선택합니다.

HTML 편집 모드로 전환

• 스킨 편집 페이지에서 ‘HTML 편집’ 버튼을 클릭합니다.
• HTML 편집 창이 열리면, 여기에 코드를 삽입할 수 있습니다.

코드 삽입

• 원하는 위치에 HTML 코드를 삽입합니다. 예를 들어, 자동 목차를 생성하는 스크립트나, 특정 스타일을 적용하는 CSS 코드 등을 추가할 수 있습니다.
• 코드 삽입 위치는 보통  태그 내부나  태그 바로 위가 됩니다.

코드 저장 및 적용

• 코드를 삽입한 후, 페이지 하단의 ‘저장’ 버튼을 클릭하여 변경사항을 저장합니다.
• 저장을 완료하면, 블로그에 코드가 적용되어 변경된 내용을 볼 수 있습니다.

예를 들어, 자동 목차 기능을 추가하고 싶다면, 다음과 같은 스크립트를 HTML 편집 창에 삽입할 수 있습니다

<!-- 자동 목차 스크립트 시작 -->

<script src="./js/jquery.toc.min.js"></script>

<script>

  $(function() {

    $('#toc').toc({

      content: ".entry-content",

      headings: "h2,h3,h4"

    });

  });

</script>

<!-- 자동 목차 스크립트 끝 -->

이 스크립트는 페이지의 내용 중에서 h2, h3, h4 태그를 찾아 자동으로 목차를 생성합니다. 이렇게 HTML 코드를 삽입하는 것은 블로그의 기능을 확장하고, 방문자에게 더 나은 사용자 경험을 제공하는 데 도움이 됩니다.

 

목차 디자인 꾸미기 스타일링

티스토리 블로그에서 목차 디자인을 꾸미는 것은 CSS를 이용하여 수행할 수 있습니다. CSS는 'Cascading Style Sheets’의 약자로, 웹 페이지의 디자인과 레이아웃을 정의하는 데 사용됩니다. 목차 스타일링을 통해 블로그의 전반적인 디자인과 일관성을 유지하고, 독자의 경험을 향상할 수 있습니다. 다음은 CSS를 이용한 목차 스타일링 방법에 대한 단계별 안내입니다

 

CSS 코드 준비

• 목차의 스타일을 정의할 CSS 코드를 준비합니다. 예를 들어, 목차의 글꼴, 색상, 크기, 배경 등을 설정할 수 있습니다.

스킨 편집 접속

• 티스토리 블로그 관리 페이지에서 ‘꾸미기’ 메뉴로 이동한 후 '스킨 편집’을 클릭합니다.

CSS 편집

• 스킨 편집 화면에서 ‘CSS’ 탭을 선택합니다. 여기서 목차에 적용할 스타일을 추가할 수 있습니다.

목차 스타일 적용

• CSS 편집 창에서 목차에 적용할 스타일을 입력합니다. 예를 들어, 목차의 제목에 테두리를 추가하거나 배경색을 변경할 수 있습니다.

저장 및 미리 보기

• 스타일을 적용한 후, ‘저장’ 버튼을 클릭하여 변경사항을 저장합니다. 그런 다음 '미리 보기’를 통해 목차의 디자인이 의도한 대로 적용되었는지 확인합니다.

예시 CSS 코드

/* 목차 제목 스타일 */

.entry-content h2 {

  font-size: 20px;

  color: #333;

  background-color: #f8f8f8;

  padding: 10px;

  border-left: 4px solid #00a2ff;

}

 

/* 목차 항목 스타일 */

.entry-content li {

  font-size: 16px;

  color: #666;

  line-height: 1.6;

}

위 CSS 코드는 목차의 제목에 회색 테두리와 연한 회색 배경을 적용하고, 목차 항목의 글꼴 크기와 색상을 설정합니다. 이렇게 CSS를 이용하여 목차를 꾸미면, 블로그의 전체적인 디자인과 조화를 이루면서 독자들에게 보다 나은 읽기 경험을 제공할 수 있습니다.

 

 

목차 적용 및 테스트하기

목차 코드 준비

• 자동 목차를 생성하는 데 필요한 HTML과 JavaScript 코드를 준비합니다.
• 이 코드는 포스팅의 제목 태그(h2, h3, h4 등)를 기반으로 목차를 자동으로 생성합니다.

포스팅에 코드 삽입

• 포스팅을 작성하는 HTML 편집 모드에서, 준비한 목차 코드를 본문의 적절한 위치에 삽입합니다.
• 일반적으로는 본문의 시작 부분에 코드를 넣어 목차가 글의 상단에 표시되도록 합니다.

미리 보기를 통한 테스트

• 코드를 삽입한 후, ‘미리 보기’ 기능을 사용하여 목차가 올바르게 표시되는지 확인합니다.
• 목차가 제대로 생성되었는지, 링크가 정확히 작동하는지 등을 검토합니다.

문제 해결

• 만약 목차가 제대로 표시되지 않거나 링크에 문제가 있다면, 코드의 위치나 형식을 다시 확인합니다.
• 스킨 편집에서 JavaScript 코드의 위치를  태그 내부나  태그 내부로 조정해 볼 수 있습니다.

디자인 조정

• 목차의 디자인을 사용자의 취향에 맞게 CSS를 통해 꾸밀 수 있습니다.
• CSS 코드를 통해 목차의 색상, 크기, 폰트 등을 조정하여 블로그의 전체적인 디자인과 조화를 이루게 합니다.

 

자주 묻는 질문 (FAQ)

목차가 표시되지 않는 문제

• 문제 : '목차’라는 글자만 보이고, 실제 목차 내용이 표시되지 않는 경우가 있습니다.
• 해결책 : 자바스크립트 코드의 위치를 확인하세요. 스킨에 따라  태그 안이나  태그 안에 코드를 넣어야 올바르게 작동합니다.

모바일에서 목차가 동작하지 않는 문제

• 문제 : 목차가 PC에서는 잘 작동하지만, 모바일에서는 동작하지 않는 경우가 있습니다.
• 해결책 : 티스토리 모바일 앱을 통해 접속했을 때 자바스크립트 코드가 동작하지 않을 수 있습니다. 웹 브라우저를 통해 접속해 보세요.

제목이 아닌 부분에 목차가 생성되는 문제

• 문제 : 제목으로 설정하지 않은 부분에 빈 목차가 생성되는 경우가 있습니다.
• 해결책 : 눈에 보이지 않는 제목 태그가 적용된 빈칸이 있는지 확인하고, 필요 없는 태그는 제거하세요.

목차 스타일이 적용되지 않는 문제

• 문제 : CSS를 통해 목차의 스타일을 변경했지만, 실제 블로그에 반영되지 않는 경우가 있습니다.
• 해결책 : CSS 코드가 올바르게 입력되었는지 확인하고, ‘저장’ 버튼을 클릭하여 변경사항을 저장했는지 확인하세요.

목차 생성 시 특정 제목 태그가 누락되는 문제

• 문제 : 일부 제목 태그(h2, h3 등)가 목차에 포함되지 않는 경우가 있습니다.
• 해결책 : 모든 제목 태그에 올바른 HTML 태그가 적용되었는지 확인하세요. 제목 태그는 목차 생성에 필수적입니다.

 

 

챗 gpt 4 : 블로그 글쓰기 방법

챗 gpt 4 : 블로그 글쓰기 방법

 

챗지피티 그림 그리기 : AI 이미지 생성 방법

챗지피티 그림 그리기 : AI 이미지 생성 방법

 

챗gpt 무료 사용법 프롬프트 활용법

챗gpt 무료 사용법 프롬프트 활용법

 

챗gpt 유료 가격 사용법 : 블로그 콘텐츠 제작 팁

챗gpt 유료 가격 사용법 : 블로그 콘텐츠 제작 팁

 

chatgpt 4.0 가격 : 유료 무료 비교

chatgpt 4.0 가격 : 유료 무료 비교