728x90 반응형 티스토리 스크롤 반응 플로팅(floating) 목차(TOC) 본 글은 '북클럽 스킨'을 기준으로 목차가 스크롤을 따라서 화면에 떠다니는 '플로팅 자동 목차'를 생성하는 2가지 방법에 대한 내용이다. 아래 일전 발행한 글에서 연결되는 내용임을 참고 바란다. 티스토리 본문 자동 목차 (TOC) HTML 삽입 미리보기할 수 없는 소스 1] 레이아웃 작업 '플로팅 자동 목차'를 생성하기 전에, '북클럽 스킨'의 레이아웃이 어떻게 구성되어 있는지 알아야 하고 레이아웃을 일부 수정해야 한다. (레이아웃을 수정하는 것은 선택사항이며, 보다 깔끔하게 적용하고자 한다면 수정하는 것을 추천한다.) 1-1] '북클럽 스킨'의 레이아웃 구성 아래는 '북클럽 스킨 메인 페이지'의 초기 레이아웃으로, '사이드바 - 가로 230px', '본문 - 가로 740px'으로 구성되어 있다. 아래는.. 2022. 1. 2. 티스토리 본문 자동 목차 (TOC) 'TOC'는 'Table Of Contents'의 약자로 목록, 목차, 순서, 차례 등을 의미한다. 본 글은 '북클럽 스킨'을 기준으로 '페이지(글)의 본문' 내에 목차를 자동으로 생성하는 방법에 대한 내용이다. HTML 삽입 미리보기할 수 없는 소스 1] 기본 작업 먼저 목차 생성을 위한 기본 작업이다. 1-1] 파일 업로드 - jquery.toc.min.js 목차를 자동으로 생성하려면 먼저 'Github'에서 제공하는 알집 파일을 다운로드해서, 알집 파일 안에 있는 2개의 파일 중 'jquery.toc.min.js'를 티스토리에 업로드해야 한다. (실제 파일도 첨부) 1-2] HTML - Head 섹션 아래 코드를 HTML의 위에 삽입한다. 앞서 업로드한 'jquery.toc.min.js' 파일을 인.. 2021. 12. 30. 티스토리 코드블럭(codeblock) 커스터마이징 디자인 본 글은 티스토리 코드블럭과 관련하여, 하이라이트 적용, 폰트 수정, 열기 및 닫기 버튼 적용, 줄번호 및 줄 바꿈(스크롤) 적용, 그리고 코드블럭 부분 복사 방법 등을 다룬다. 하나하나 적용하다 보면 아래와 같은 코드블럭 디자인이 완성된다. HTML 삽입 미리보기할 수 없는 소스 1] 코드블럭 기본 사용 방법 티스토리에서 기본으로 제공하는 코드블럭을 사용하는 방법이다. ① '더보기' 버튼을 클릭한다. ② ' 코드블럭'을 클릭한다. ③ 'HTML', 'CSS' 등 다양한 '언어명' 중 하나를 선택한다. ④ '코드 내용'을 입력한다. ⑤ '확인'을 클릭한다. ⑥ '완료'를 클릭한다. ⑦ 출력된 모습이다. 출력된 모습이 밋밋해서 도저히 참을 수 없다면 다음 단계를 진행한다. 2] 코드블럭 플러그인 'Synt.. 2021. 12. 18. 티스토리 북클럽 뉴북 7가지 스킨 편집 나는 티스토리를 처음 시작할 때부터 '북클럽 뉴북' 스킨을 선택했고, 내 기준에 깔끔해 보이는 '스킨 세팅'을 해왔다. 본 글은 내 티스토리 블로그의 '북클럽 뉴북' 스킨을 어떻게 세팅했는지에 대한 내용이니, 특별하진 않지만 봐줄 만하다고 생각하면 순서대로 하나하나 적용해 보기 바란다. 당연히 꼭 그대로 따라 하지 않아도 되고, 무엇을 어디서 어떻게 수정해야 하는지 참고만 하면 되겠다. HTML 삽입 미리보기할 수 없는 소스 1] '북클럽 뉴북' 스킨 변경 아래 이미지는 '스킨 변경'을 클릭하면 나오는 페이지로, 블로그를 개설하면 기본으로 'Poster' 스킨이 적용되어 있다. 스크롤을 내리면 두 번째 줄 우측에 'Book Club' 스킨이 있다. 'Book Club'에 마우스 커서를 올리면 '미리 보기.. 2021. 11. 27. 이전 1 2 3 다음 728x90 반응형
