반응형 ▸티스토리 이야기/•TOC 자동목차 만들기5 티스토리 꾸미기 | TOC 자동목차 서식(HTML) 스타일 모음 목차자동목차(TOC) #2 서식 스타일 모음제가 포스팅한 '티스토리 자동목차 (TOC) #2와 #4'에 적용 가능한 서식 스타일 모음입니다. 자동목차 서식 스타일 모음은 따로 CSS를 수정하지 않고 HTML 코드를 서식으로 저장 후 필요한 페이지나 위치에 골라서 넣거나 본문에 바로 넣어주면 됩니다. ※ CSS코드 변경이 아닌 서식을 사용하는 이유.- 사용이 간단하며, 기존에 작성한 목차들에는 아무런 영향을 끼치지 않는다는 장점이 있습니다.- CSS 수정 시 기존에 작성한 포스팅의 목차도 일괄 변경되어 버립니다.- 코드 내 색상 등 약간의 수정으로 내 포스팅에 어울리는 자동목차를 만들 수 있습니다.태그 속성태그 속성설명color: #8568e1;글꼴색: #background-color: #6c7ae0;배경.. 2024. 2. 5. 티스토리 자동목차(TOC) 쉽게 만들기 part 4 | 아래로 열리는 자동목차 티스토리 자동목차(TOC) 쉽게 만들기 #4 | 아래로 펼쳐지는 자동목차오늘은 페이지 로딩 시 목차의 리스트가 접혀있다 '▽열기'를 클릭 시 아래로 펼쳐지며 목차의 리스트가 나오는 아래로 열리는 '자동목차(TOC) #4'에 대해 알아보겠습니다. 이번 목차도 제가 프로그래머도 블로그 고수도 아니기 때문에 그냥 다른 고수들이 올려주신 소스를 참고하며 조금씩 수정한 소스입니다. 참고한 블로그 : 티스토리 자동목차 쉽게 만들기 - 초간단 10분 완성 (hantrees.com) 매번 설명이 길고 이미지가 많아 복잡해 보이지만 설명대로 하나씩 따라 하시면 쉽게 '자동 목차'를 만드실 수 있으니 차근차근 따라 해 보시기 바랍니다. 기본적으로 코드와 CSS는 '자동목차 #2' 동일하니 '자동목차 #2'를 만드신 분이.. 2024. 1. 31. 티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들기 part 3 - 좌측에 떠있는 스크롤 반응형 자동목차 좌측에 떠있는 스크롤 반응형 자동목차(TOC) 만들기오늘은 '자동목차 만들기 #2'에 이어 좌측에 떠있는 '자동목차(TOC) #3'에 대해 알아보겠습니다. 이번 자동목차는 서식을 사용하는 목차가 아니라 블로그 좌측 빈 공간에 소제목1(h2), 소제목2(h3), 소제목3(h4)가 자동으로 출력되는 목차이며, 단점은 모바일이나 탭 등에서는 보이지 않는 'PC전용 자동목차'입니다. 항상 그렇듯 설명이 길고 이미지가 많아 복잡해 보이지만 설명대로 하나씩 따라 하시면 쉽게 '자동 목차'를 만드실 수 있으니 차근차근 따라 해 보시기 바랍니다. 자동목차 예제 보러가기 'tocbot.css'와 'tocbot.min.js' 파일 다운로드 및 업로드티스토리 블로그에 자동으로 글 목차를 만들어 주는 코드소스입니다. 1. .. 2024. 1. 30. 티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들기 part 2 -초보용 누구나 쉽게 따라 만드는 TOC 자동 목차 #2. 오늘은 '티스토리 자동 목차 #1'에 이어 조금 다른 스타일의 '티스토리 자동 목차 #2'에 대해 알아보겠습니다. 제가 프로그래머도 아니고 블로그 고수도 아니기 때문에, 다른 고수들이 올려주신 소스를 참고하며 조금씩 수정한 소스입니다. 이번 코드는 소제목 목록의 글자 크기도 변경할 수 있으며, 하이퍼링크의 파란색 대신 원하는 색상으로 설정할 수 있습니다. 또한, 마우스 오버 시 글자 색상이 변경되거나 글자가 굵어지는 효과도 포함된 소스로, 제가 주로 사용하는 목차입니다. 설명이 길고 이미지가 많아 복잡해 보일 수 있지만, 설명대로 하나씩 따라 하시면 쉽게 'TOC 자동 목차'를 만드실 수 있으니 차근차근 따라 해 보시기 바랍니다. ≣ 목차 jquery... 2023. 5. 30. 티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들기 part 1- 초보용 누구나 쉽게 따라 만드는 자동 목차(TOC) #1오늘은 티스토리 블로그에 소제목을 불러오는 TOC(목차) 자동 생성에 대해 알아보겠습니다. 초보들도 쉽게 따라 할 수 있는 자동목차 코드이니 설명대로 하나씩 차근차근 따라 하시면 쉽게 '자동 목차'를 만들 수 있습니다. 공개 jquery.toc파일 다운로드티스토리 블로그에 자동으로 글 목차를 만들어 주는 공개소스가 있습니다.그중 먼저 'jquery.toc.zip'파일을 다운로드 후 압축을 풀고 스킨편집에서 파일을 업로드해줘야 합니다. 1. 아래 링크에서 'jquery.toc.zip'파일을 다운로드하세요.2. 다운로드 후 압축을 풀면 아래와 같이 2개의 파일이 있습니다.jquery.toc.jsjquery.toc.min.js jquery.toc파일 업로드다운로.. 2023. 5. 29. 이전 1 다음 반응형
