목차
1. 개요
2. 적용 방법
① 목차 만들기
② HTML 편집
③ 고찰
3. 마치며
1. 개요
필자가 프로그래밍 공부를 할 때 봤었던
몇몇 티스토리 블로그는 목차가 있는 게시글도 있었다.
목차에 특정 제목을 클릭하면, 해당 제목으로 넘어가는 식이었는데
해당 게시글에서 내가 원하는 정보로 바로 넘어갈 수 있다는 점에서
되게 유용해 보였고, 이거를 필자의 블로그에도 적용시키고 싶다는 생각이 들었다.
이후 티스토리 블로그에 목차를 다는 방법에 대해 찾아보니 여러 가지 방법이 나왔다.
그중에는 자동으로 목차를 다는 방법도 존재했지만
그걸 적용시키려면 css까지 알아야 한다는 점에서 머리가 아파오기 시작했다.
어쩔 수 없이 다른 방법을 찾기 시작했고, 다행히 그나마 쉬운 방법이 있었다.
그리고 이 게시글은 그 방법을 정리해 둔 게시물이다.
2. 적용 방법
① 목차 만들기
일단 제일 먼저 해야 할 일은 목차를 만들어두는 것이다.
글 쓰는 페이지에서 화면 상단을 보면 "같이 생긴 아이콘을 확인할 수 있을 것이다.
해당 아이콘은 인용이라는 기능이다.
인용을 클릭해 보자.
그러면 이렇게 생긴 메뉴가 나올 것이다.
여기서 네모로 표시한 부분을 클릭하면 아래와 같은 블록이 하나 나올 것이다.
이제 이 블록에 목차를 만들면 된다.
아래는 참고 예시다.
② HTML 편집
목차 예시
위의 링크는 목차와 문단을 실제로 연결한 예시이다.
설명은 해당 링크로 들어가면 나오는 게시글을 참고하면서 설명하도록 하겠다.
먼저 글쓰기 화면 상단에 보면 [기본모드]라는 부분이 보일 것이다.
[기본모드]를 클릭하면 아래와 같은 메뉴가 나온다.
해당 메뉴에서 HTML을 클릭해서 글쓰기 모드를 HTML로 바꾸자. 그러면 아래와 같은 화면이 나올 것이다.
HTML 코드를 보자니 머리가 아프지만
우리가 봐야 할 것은 딱 두 가지만 보면 된다.
- 목차 - 제목 Part
- 문단 제목
문단 제목 부분을 한번 찾아보자.
'1. A Title'을 예시로 설명하도록 하겠다.
해당 문단의 제목을 찾았다면
제목 앞의 <b> 태그가 보일 것이다.
해당 태그 앞에 이런 식의 코드를 한 줄 추가해 주자.
<!--1.A Title-->
<p id="c1"><b>1. A Title</b></span></p>
추가했다면 이제 목차로 넘어가서
목차에 있는 '1. A Title'을 찾고 아래의 코드를 추가해 주자.
<!--목차 제목 Part-->
<a href="#c1">1. A Title</a>
<!--어디에 입력할 지 모르겠다면
제목 바로 앞에 이런 식의 코드가 보일 것이다.
<p data-ke-size="size16"><span style="font-family: 'Noto Sans Demilight', 'Noto Sans KR';">
여기 바로 뒤에 추가해주면 된다.-->이제 글을 저장하고 해당 게시글로 들어가 보자.
목차의 제목을 클릭하면 해당 제목을 가진 문단으로 넘어가질 것이다.
이런 식으로 나머지 부분도 똑같이 해주면 된다.
그렇다면 어떤 원리로 이게 되는 것일까?
필자 나름대로 생각해 본 것을 아래에 정리해 놨다.
이걸로 어느 정도 궁금증이 풀렸으면 좋겠다.
③ 고찰
여기서 사용된 코드는 이 두줄이다.
<!--목차-->
<a href="#c1">1. A Title</a>
<!--본문-->
<p id="c1">1. A Title</p>우선 본문부터 설명하도록 하겠다.
(1). <p id="c1">
<p> 태그에서 p는 paragraph의 약어이다.
여기서 paragraph라는 단어는 "단락", "절"이라는 의미를 가지고 있다.
html에서는 하나의 문단을 만드는 기능을 가진 태그이다.
[예제 코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>p 태그 예시</title>
</head>
<body>
<p>First Title</p>
<p>Second Title</p>
<p>Third Title<br/>
p 태그를 사용하면 문단이 만들어진다.<br/>
br은 줄바꿈이다. (자바에서 '\n'과 같은 역할)
</p>
</body>
</html>
[예제 출력 결과]
First Title
Second Title
Third Title
p 태그를 사용하면 문단이 만들어진다.
br은 줄바꿈이다. (자바에서 '\n'과 같은 역할)
다시 본론으로 돌아와서 id 속성에 대해 알아보자.
id는 문서 하나에 고유한 속성을 부여해 주는 식별자이다.
우리가 회원가입을 할 때 자기만의 고유한 id를 만드는 것처럼
id 속성은 각 문서에 고유한 id를 부여해 주는 역할을 한다고 보면 된다.
따라서 첫 번째 문단의 제목에 <p id="c1">을 추가하는 것으로
해당 문단에 c1이라는 고유한 id를 부여했다고 볼 수 있다.
(2). <a href="#c1">
<a> 태그는 다른 문서로의 이동 혹은 같은 문서 내의 이동을 위해 사용되는 태그로
여기서 a는 anchor의 약어로 "정박지", "닻"이라는 의미를 가지고 있다.
href는 Hypertext reference의 약어로 뒤에 적인 하이퍼 텍스트를 참조하는 기능을 가진 속성이다.
그리고 '#+id'는 id 선택자이다.
따라서 해당 코드는 앞에서 추가한 문단 고유 id를 참조해서
목차에서 해당 문단으로, 페이지 내 이동이 가능해진다.
3. 마치며
html을 활용한 티스토리 게시글에 목차 기능 넣기 정리가 완료됐다.
단순히 목차 기능을 구현하는 방법만 정리하려고 했지만
목차의 제목을 클릭했을 때, 문단의 제목으로 넘어가는 원리를 알아둬야
추후에 다른 게시글에도 적용을 시킬 때 좀 더 편할 것 같았다.
결과적으로는 html에 대한 지식이 조금 늘은 것 같다.
물론 잘 모르는 상태에서 다뤘기 때문에 내용적으로 아쉬운 부분도 많이 있다고 생각한다.
이상으로 티스토리에 목차 다는 방법에 대한 정리를 마치도록 하겠다.
'Web 개발 기초 > HTML' 카테고리의 다른 글
| [HTML] 컨테이너 태그(<div>, <span>) & 전역 속성 (0) | 2023.03.16 |
|---|---|
| [HTML] 인라인 태그 8가지 (1) | 2023.03.14 |
| [HTML] <p>, <h1>...<h6>, <hr> 태그 + <br>, (0) | 2023.03.03 |
| [HTML] 블록 태그와 인라인 태그 (0) | 2023.03.02 |
| [HTML] HTML 개요 (0) | 2023.02.21 |
