목차
1.ID 속성을 사용하여 목차 만드는 방법 - 목차 목록
2.ID 속성을 사용하여 목차 만드는 방법 - 이동될 부분
이전에 포스팅하려고 했는데 미루다가 이제야 포스팅하게 된 목차에 대한 내용입니다!
직접 목차를 수동으로 만드는 방법도 있지 않을까? 찾아보다가 링크 태그를 사용하여 만들 수 있다는 사실을 알게 되었습니다
직접 수동으로 목차를 만드는 방법은 매우 간단합니다
지금부터 알려드릴 내용을 사용하여 기존의 포스팅 글에 목차를 적용해보았습니다
마인크래프트 모든버전 무료 서버로 24시간 서버 여는법 총정리 | 포트포워딩X | 최신버전 서버열
목차 서버를 열기 위한 무료 호스팅 가입 + 서버 열기 맵 폴더 변경 및 플러그인 추가 방법 명령어 사용방법 및 OP 부여하는 방법 서버 오픈 후 서버 입장 방법 플랜 소개 페이지 꽤 오래전에 마인
newstroyblog.tistory.com
이전에 제가 올린 포스팅 내용인데
목차 부분에 나와있는 텍스트를 클릭할 경우 해당하는 제목이 있는 위치로 이동하게 됩니다!
ID 속성을 사용하여 목차 만드는 방법 - 목차 목록
포스팅 작성 시에 html모드로 바꾼 다음에 작성해주시면 됩니다
아래는 제가 만든 목차입니다
목차목록
<p>목차목록</p>
<p><a href="#a">목차첫번째</a></p>
<p><a href="#b">목차두번째</a></p>
하단에 목차 목록임을 알려줄 수 있는 텍스트와
목차로 사용할 목록들을 입력해주면 됩니다 여기서 #a와 #b 부분은 id값인데 영문으로 간단히 써주는 게 좋아요
그리고 전 추가적으로 목차 목록임을 알려주는 텍스트에 스타일을 적용하여 텍스트 사이즈를 키웠습니다!
ID 속성을 사용하여 목차 만드는 방법 - 이동될 부분
목차를 만들었으면 클릭할 때 이동되는 부분도 있어야겠죠??
텍스트를 작성할 때에는 p태그를 사용하는 경우도 h태그를 사용하는 경우도 있을 텐데 #을 제외한 태그 앞에 id=""만 붙여주면 됩니다!
예시로 보여드릴까요?? 아까 위에서 id #a와 #b로 만들었죠??
p태그에서 사용한다고 치면
<p id="a">이동되었습니다</p>
h2태그를 사용한다고 하면
<h2 id="b">이동되었습니다</h2>이렇게 목차에서 생성한 id만 태그앞에 넣어주면 됩니다
첫번째목차를클릭시이동되는부분입니다
실제로 목차중에 첫번째 내용을 클릭 시에 윗부분으로 이동되는 걸 확인하실 수 있을 겁니다
포스팅 하나하나가 정성으로 작성할 텐데 만약 포스팅 내용이 많은 경우에는 본문에서 원하는 내용을 찾을 때 매번 스크롤을 내려 찾기가 힘들 거예요 그래서 직접 링크 태그를 사용하여 목차를 만들어두면 보는 사람 입장에서 편하고 원하는 내용을 빨리 찾을 수 있습니다
두번째목차를클릭시이동되는부분입니다
더많은 콘텐츠