블로그꾸미기

개인적으로 호흡이 긴 글을 읽을 때는 목차부터 확인하는 편이다. 목차를 보면 글 전체 흐름을 빠르게 파악할 수 있고, 필요한 부분만 골라서 읽을 수 있기 때문이다. 블로그 글도 마찬가지로 내용이 길어질수록 목차가 있으면 글 읽기가 한결 수월해진다. 목차는 영어로 TOC(Table of Contents)라고 부르는데, 노션(Notion) 사용자라면 /toc 명령어로 목차를 손쉽게 삽입해 본 경험이 있을 것이다. 그만큼 익숙하고 유용한 기능이다. 아쉽게도 티스토리(Tistory)는 목차 기능을 제공하지 않는다. 다만 티스토리 본문은 어느 정도 시맨틱 마크업(의미/역할에 맞는 HTML 구조)을 따르고 있어서 기본모드 에디터 기준 제목1~제목3은 ~, 본문은 같은 태그로 구성되어 있다. 이런 구조 덕분에 자바..

앵커 링크(Anchor Link)는 페이지 안에서 특정 위치로 바로 이동할 수 있게 해주는 기능이다. MDN, GitHub, 기술 블로그 등 문서 중심의 웹사이트는 제목 태그(heading)에 앵커 링크를 적용하여 사용자가 원하는 섹션을 빠르게 탐색할 수 있도록 지원한다. 앵커 링크를 클릭해서 특정 섹션으로 이동할 때마다 주소창 URL도 https://...#섹션으로 변경된다. #섹션은 해시(hash)라고 부르는데, 해시가 포함된 주소로 접속하면 브라우저가 해당 위치까지 자동으로 스크롤해 주는 편리한 기능이다. 아쉽게도 티스토리는 자체적인 앵커 링크를 제공하지 않기 때문에 자바스크립트로 직접 구현해야 한다. 아래에서 소개할 앵커 링크 추가 스크립트는 개인적으로 사용하려고 만들었지만, jsDelivr 같은..