목차 생성된 게시글 작성하기 (html태그)

1. 게시글 목차 생성 목적
2. 목차 생성하는 방법 - ❶게시글에 목차 나누고 가상의 링크 생성
3. 목차 생성하는 방법 - ❷html모드에서 태그 수정하기

 

 

1. 게시글 목차 생성 목적

게시글에 목차를 생성하여 작성하면 전체를 읽지 않고 필요한 부분만 확인할 수 있어서 편리하다.

또한 글의 요약이 정리된 느낌이라... (잘쓴거 같아 보임ㅋㅋ) 내가 원한다 목차를!

다음에서 목차가 있는 게시글을 검색하면 이렇게 나온다.

요점이 정리된 느낌이라 내가 원하는 정보가 있을 때 클릭하고 싶게 만드는 효과가 있다.

 

* 목차 생성된 게시글 작성하는 방법을 게시글 쓸때마다 까먹어서 기록으로 남긴다.

 

 

 

 

2. 목차 생성하는 방법 - ❶게시글에 목차 나누고 가상의 링크 생성

먼저 게시글 상단에 목차를 나눠서 글을 작성한다.

(여긴 그냥 다른거 글 쓸때랑 같고 이 다음에 html 수정하는게 헷갈린다.)

나는 이렇게 3가지 목차로 나누어 주었다.

 

 

다음으로 이 목차에 가상의 링크를 연결해준다.

#tag.1

#tag.2

#tag.3

새창으로 열기 체크는 풀고, 이렇게 각각 넣어주었다.

파란색 글자로 바뀌면서 가상의 링크가 연결 되었다.

 

 

 

3. 목차 생성하는 방법 - ❷html모드에서 태그 수정하기

글을 다 작성한 다음, 기본모드에서 HTML 모드로 변경해준다.

목차 부분이 아닌 목차에서 클릭하면 넘어가는 해당 위치의 글 부분을 찾아준다.

번호 앞 h4 다음에 id="tag1" 이라고 붙여준다.

링크삽입할때 입력했던 주소에서 .(점)을 빼고 순서에 맞게 입력해줘야 한다.

나머지도 다 해 준다음,

맨 위에 목차 부분에서 a href="http://#tag.1" 부분에서 http://와 .(점)을 각각 다 빼준다.

 

 

 

쉽게 설명하자면,

작성한 게시글에서 링크 연결을 할때 가상의 링크를 만들어줘야 하기 때문에 #tag.1 이런식으로 점을 넣어서

사이트로 인식하게끔 만들어 준 것이고, tag1~3번까지 이름을 붙여서 만들어줬다.

 

html 태그 수정 모드에서

게시글 부분에 id라는 태그를 붙여서 1번부터 3번까지 목차로 인식될 수 있게 그 곳의 값을 링크 연결한 것과 이어주는 것.

따라서 html 태그 수정할 때 http://와 .(점)을 삭제 해주는 것이고!

 

(전문적으로 배운게 아니라서 이해하기 쉽게 내 마음대로 해석하고 외우는 중..)