HTML을 활용해서 블로그 목차를 만들어보자

목차

1. 목차 만들기
2. 목차에서 제목 바로가기 설정 HTML 코드
3. <a href> / <id> 를 활용한 목차 만들기 예시
4. 자동화하는 법

1. 목차 만들기

목차에 HTML을 태그하기 전에 우선적으로 목차를 만들어야 합니다.

우선 목차를 이렇게 만들고 본문도 같이 만들어 줍니다.

2. 목차에서 제목 바로가기 설정 HTML 코드

맨 위에 있는 포스팅에서 볼 수 있듯이 목차에 있는 소제목을 누르면 소제목으로 바로 갈 수 있는 링크를 걸어두었습니다.

저희는 HTML 태그를 통해 한번 배워보도록 하겠습니다.

필요한 태그

1. <a href="#00">

2. < id=00>

<a href> / <id> 를 활용한 목차 만들기 예시

HTML 편집을 들어가줍니다.

보라색 위쪽이 목차 부분이고 보라색 아래쪽이 소제목(본문)입니다.

목차와 소제목을 1대1 매칭을 해주셔야 합니다.

ex) 목차에서의 "1. 본문1"은 <a href="#01"> 으로 설정해두고, 소제목 "본문1"은 id=01 로 설정

이렇게 적으시고 다시 기본모드로 돌아와주시면 하이퍼링크가 걸린 것 처럼 목차가 파란 글씨로 바뀝니다.

지금은 편집단계라 눌러도 아무 반응이 없지만 저장하고 포스트에 들어가시면 잘 작동하는 걸 확인하실 수 있습니다.

자동화하는 법

저는 이 목차를 매번 포스팅할 때마다 사용하고 있습니다. 하지만 매번 이렇게 설정을 하면 포스팅 속도가 늦어질 수 밖에 없어서 "서식관리"를 활용해 포스팅 할때마다 편하게 사용하고 있습니다. 자세한 내용은 다음 포스팅에서 다루겠습니다.

함께 읽으면 좋은 글
1. 서식을 활용한 블로그 목차 자동으로 만들기

목차

1. 목차 만들기
2. 목차에서 제목 바로가기 설정 HTML 코드
3. <a href> / <id> 를 활용한 목차 만들기 예시
4. 자동화하는 법

세상의 모든 것 리뷰