블로그 운영에 있어 목차는 독자에게 명확한 길잡이 역할을 하며, 콘텐츠를 체계적으로 정리하는 데 도움을 줍니다. 특히 긴 글이나 여러 주제를 다룰 때 목차는 독자가 원하는 정보를 빠르게 찾을 수 있도록 도와줍니다.
이번 글에서는 티스토리 블로그에서 자동 목차를 만드는 방법에 대해 자세히 설명하겠습니다.
자동 목차 만들기
목차를 자동으로 생성하기 위해서는 몇 가지 단계를 거쳐야 합니다. 이 과정은 HTML 편집과 코드 삽입을 포함하므로, 기본적인 HTML 사용법을 알고 계시면 더욱 수월합니다.
아래 단계에 따라 진행해 보시기 바랍니다.
1. 필요한 파일 다운로드
먼저, 자동 목차를 생성하기 위해 필요한 파일을 다운로드해야 합니다. 이 파일은 jquery.toc.min.js라는 스크립트 파일로, 목차를 만들기 위한 핵심 기능을 제공합니다.
다운로드 후, 파일을 압축 해제하고 확인합니다.
| 단계 | 설명 |
|---|---|
| 1 | 필요한 파일 다운로드 |
| 2 | 파일 압축 해제 |
| 3 | 파일 확인 |
2. 블로그 관리 페이지 접속
티스토리 블로그의 관리 페이지에 접속합니다. 로그인 후, 상단 메뉴에서 ‘블로그 관리’를 클릭하여 관련 설정으로 이동합니다.
3. HTML 편집 모드 진입
관리 페이지에서 ‘HTML 편집’ 모드로 진입합니다. 스킨 편집이 가능하도록 하여 HTML 코드를 직접 수정할 수 있는 환경을 마련합니다.
4. 파일 업로드
다운로드한 jquery.toc.min.js 파일을 티스토리 블로그에 업로드합니다. 이를 위해서는 ‘파일 관리’ 메뉴에서 파일을 선택하고 업로드를 진행하시면 됩니다.
| 단계 | 설명 |
|---|---|
| 1 | HTML 편집 모드 접속 |
| 2 | 파일 업로드 |
| 3 | 파일 확인 |
5. 코드 삽입
HTML 편집 모드에서 목차를 생성하기 위한 코드를 삽입합니다. 아래의 코드를 복사하여 적절한 위치에 붙여넣습니다.
“`html
“`
이 코드는 페이지 로드 시 목차가 자동으로 생성되도록 설정합니다.
6. 저장 및 적용
코드를 삽입한 후, 반드시 저장 버튼을 클릭하여 변경 사항을 적용해야 합니다. 이후 블로그를 미리 보기 하여 목차가 정상적으로 나타나는지 확인합니다.
CSS 코드 적용
목차의 디자인을 더욱 돋보이게 하기 위해 CSS 스타일을 적용할 수 있습니다. 이를 통해 목차의 색상, 크기, 배경 등을 조정하여 블로그 전체 테마와 일치하도록 만들 수 있습니다.
1. 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;
}
“`
| 스타일 유형 | 설명 |
|---|---|
| 제목 스타일 | 목차 제목의 크기, 색상, 배경 및 여백 설정 |
| 항목 스타일 | 목차 항목의 크기, 색상, 줄 간격 설정 |
2. 스킨 편집 접속
블로그 관리 페이지에서 ‘스킨 편집’ 모드로 들어갑니다. 이곳에서 CSS 코드 편집이 가능합니다.
3. CSS 편집
스킨 편집 화면에서 CSS 코드 섹션에 방금 준비한 CSS 코드를 붙여넣습니다. 저장 후 미리 보기를 통해 적용된 스타일을 확인합니다.
목차 코드 삽입 및 테스트
목차가 성공적으로 생성되었는지 확인하기 위해 포스팅에 목차 코드를 삽입하고 테스트해 보아야 합니다.
1. 포스팅에 코드 삽입
목차를 삽입할 포스팅을 선택한 후, HTML 편집 모드로 전환하여 적절한 위치에 목차 코드를 삽입합니다.
2. 미리 보기를 통한 테스트
포스팅 저장 후, ‘미리 보기’ 기능을 활용하여 목차가 정상적으로 작동하는지 확인합니다. 목차가 표시되지 않거나 오류가 발생할 경우, 코드나 CSS 스타일을 재확인해야 합니다.
| 단계 | 설명 |
|---|---|
| 1 | 포스팅에 코드 삽입 |
| 2 | 미리 보기를 통한 테스트 |
문제 해결 및 디자인 조정
목차를 설정하는 과정에서 여러 가지 문제가 발생할 수 있습니다. 이러한 문제를 해결하기 위한 방법을 아래에 정리하였습니다.
목차가 표시되지 않는 문제
목차가 표시되지 않는 경우, HTML 코드가 올바르게 삽입되었는지 확인해야 합니다. 또한, jQuery 관련 스크립트가 정상적으로 작동하는지 체크합니다.
모바일에서 목차가 동작하지 않는 문제
모바일 기기에서 목차가 작동하지 않는 경우, CSS 미디어 쿼리를 사용하여 모바일 화면에 맞는 스타일을 추가해야 할 수 있습니다.
| 문제 유형 | 해결 방법 |
|---|---|
| 목차 미표시 | HTML 코드 확인 및 jQuery 스크립트 점검 |
| 모바일 비호환 | CSS 미디어 쿼리 추가 |
제목이 아닌 부분에 목차가 생성되는 문제
목차가 의도하지 않은 위치에 생성되는 문제는 content와 headings 속성이 올바르게 설정되지 않았을 가능성이 높습니다. 이 부분을 재검토하여 수정합니다.
목차 스타일이 적용되지 않는 문제
목차 스타일이 제대로 적용되지 않는다면 CSS 코드가 올바르게 삽입되었는지 확인합니다. 또한, 캐시 삭제 후 다시 확인해 보시기 바랍니다.
결론
티스토리에서 목차를 만드는 방법에 대해 알아보았습니다. 자동 목차는 블로그의 가독성을 높이고, 독자가 원하는 정보를 쉽게 찾을 수 있도록 도와줍니다.
처음에는 다소 복잡하게 느껴질 수 있지만, 위의 단계를 차근차근 따라 하신다면 누구나 쉽게 목차를 만들 수 있습니다. 블로그 운영에 있어 유용한 기능인 만큼, 적극 활용하시기 바랍니다.
