컨텐츠의 내용이 길다면 부제목과 소제목으로 나누어 목차를 만들면 편하다. 자동 목차를 만들기 위해 toc.js 를 사용하면 자신이 작성한 글내용을 바탕으로 자동으로 목차가 만들어 진다. toc.js 는 자바스크립트기반은 toc.js 플러그인으로 사용하기 매우 편하다.
html 자동 목차 만들기
toc.js 사용
블로거들 사이에서 유행하는 것이 목차이다.
나무위키나 위키피디아 등에서 자주 볼 수 있는데 이 기능을 사용하면 자신이 작성한 글들을 목록화할 수 있다.
구조화 문서에서 나오기도 했다.
적용은 어렵지 않으며 무료로 배포되는 자바스크립트를 사용하면 된다.
구조화된 문서
자신이 작성한 컨텐츠를 구조화하여 작성하였다면 목록화가 가능할 것이다.
구글이 좋아한다는 문서체계인 위키피디아나 구글 고객센터 나무위키를 봐도 그렇다.
( 이런 구조화 문서 양식을 지키지 않아도 상단 박는 분들 많다. )
어쨌든 위키나 구글 고객센터의 문서구조는 다음과 같다.
<h1>큰제목</h1>
<p>내용</p>
<h2>부제목</h2>
<p>내용</p>
<h3>소제목</h3>
<p>내용</p>
<h2>부제목</h2>
<h3>소제목</h3>
<p>내용</p>
<h3>소제목</h3>
<p>내용</p>
<h2>부제목</h2>
<h3>소제목</h3>
<p>내용</p>
<h3>소제목</h3>
<p>내용</p>
<h3>소제목</h3>
<p>내용</p>위의 html 구조를 목차형식으로 바꾸면 다음과 같다.
컨텐츠를 굳이 이런 정성을 들이지 않아도 유입은 된다.
html 화면과 위의 목차를 같이 비교해 보자.
같이 보면 이해가 될 것이다.
우측은 html 화면이고, 좌측은 자동으로 목록이 만들어진 것이다.
아마 가독성과 사용자편의를 제공하기 위해서 위의 기능이 필요하다면 별도의 자바스크립트 코드를 받아야 한다.
toc.js 자동 목차 생성
자바스크립트 라이브러리인 toc.js 는 컨텐츠의 내용을 자동으로 목차를 만들어 주는 기능을 가지고 있다.
사용하기도 쉽고, 어렵지 않다.
다만, toc.js 를 사용하기 위해선 jquery 와 함께 사용해야 하는 번거로움이 있다.
cdn 을 사용하면 해결되니 걱정은 하지 말자.
toc.js 는 아래의 github 에서 받을 수 있다.
- toc.js 플러그인
https://ndabas.github.io/toc/
사용법
jquery 외부 js 를 가져오고 toc.js 를 가지고 온다.
이후 html 에 목차를 보여줄 영역과 글의 내용이 들어간 컨텐츠 영역을 지정하면 된다.
html 을 대충 만들어 준다.
지켜야 할 것이 있다.
자동 목차를 만들기 위해 h1, h2, h3 에 대해 순서를 지켜야 한다.
위에서 언급한 이미지를 참고한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html 자동목차 만들기</title>
</head>
<body>
<div>
<p>
목차
</p>
<ol id="wrap-toc"></ol>
</div>
<div class="wrap-content">
<h1>큰제목</h1>
<p>내용</p>
<h2>부제목</h2>
<p>내용</p>
<h3>소제목</h3>
<p>내용</p>
<h2>부제목</h2>
<h3>소제목</h3>
<p>내용</p>
<h3>소제목</h3>
<p>내용</p>
<h2>부제목</h2>
<h3>소제목</h3>
<p>내용</p>
<h3>소제목</h3>
<p>내용</p>
<h3>소제목</h3>
<p>내용</p>
</div>
</body>
<!-- body end -->
</html>html 를 작성했다면 jquery 와 toc.js 를 가져온 후
자동 목차가 생성될 영역과 컨텐츠 영역을 지정해 준다.
자동목차가 만들어진 id 는 wrap-toc 이다.
자동목차를 만들기 위한 컨텐츠 class 는 wrap-content 이다.
이 2개만 오타나지 않도록 하자.
<script src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src="jquery.toc.min.js">
</script>
<script>
$(document).ready(function(){
$("#wrap-toc").toc({content: ".wrap-content", headings: "h2,h3,h4"});
});
</script>전체코드
위에서 작성한 코드를 합쳐보도록 한다.
아래는 전체 코드이다.
div 태그의 class 가 warp-content 인 부분은 구조화된 글 내용이 들어갈 부분이다.
ol 태그의 id 가 wrap-toc 인 부분은 구조화된 글 내용을 바탕으로 목차가 자동으로 만들어져 들어갈 부분이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html 자동목차 만들기</title>
</head>
<body>
<div>
<p>
목차
</p>
<ol id="wrap-toc"></ol>
</div>
<div class="wrap-content">
<h1>큰제목</h1>
<p>내용</p>
<h2>부제목</h2>
<p>내용</p>
<h3>소제목</h3>
<p>내용</p>
<h2>부제목</h2>
<h3>소제목</h3>
<p>내용</p>
<h3>소제목</h3>
<p>내용</p>
<h2>부제목</h2>
<h3>소제목</h3>
<p>내용</p>
<h3>소제목</h3>
<p>내용</p>
<h3>소제목</h3>
<p>내용</p>
</div>
</body>
<!-- body end -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src="jquery.toc.min.js">
</script>
<script>
$(document).ready(function(){
$("#wrap-toc").toc({content: ".wrap-content", headings: "h2,h3,h4"});
});
</script>
</html>결과화면을 보자.
잘 나오고 있다.
'programming > web' 카테고리의 다른 글
| HTML 기본 문서 살펴보기 (0) | 2022.02.04 |
|---|---|
| html 이란 홈페이지 만들기 위한 마크업 언어 (0) | 2022.02.03 |
| 검색 효율을 높이는 메타 태그 종류 meta tag (0) | 2021.07.09 |
| 구글 SEO 등록과 검색에 유리한 검색노출용 컨텐츠 웹사이트 만들기 (0) | 2021.07.08 |
| CSS html 모든 태그 여백 제거 및 초기화 (0) | 2021.06.17 |
댓글