반응형 ▸티스토리 이야기/•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' 동일하니 '.. 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. .. 2023. 5. 29. 이전 1 다음 반응형
