티스토리 블로그 글을 쓸 때 사용하면 좋은 목차의 필요성과 만드는 방법에 대해 알려드릴게요. 글을 보다 구조화하고 독자들이 내용을 쉽게 찾아볼 수 있도록 목차에 내부 링크를 넣으면 가독성이 올라감에 따라 검색엔진에도 긍정적인 영향을 끼칩니다. 우리 함께 스킨편집 없이 목차 링크를 만드는 방법을 따라해 보아요!
티스토리 블로그 글을 작성하다 보면, 글 내에 다양한 섹션과 주제를 다루어야 할 때가 많습니다. 이때 목차는 독자들에게 글의 구조를 명확히 보여주고, 원하는 정보를 손쉽게 찾아갈 수 있게 하는 도구입니다. 아래 글을 통해 목차 링크 만드는 방법과 필요선에 대해 알려드릴게요~
티스토리 블로그 목차 링크를 '스킨편집(html편집)' 없이 만드는 방법을 알려드릴게요. 아래 목차 링크 코드를 사용해서 '서식(html모드 작성)'에 넣어둔다면 편리하게 사용할 수 있습니다. 더욱 심화해서 사용하고 싶다면 목차링크를 만들 때 사용되는 코드의 의미를 파악하여 활용해 보세요!
목차 생성을 위해 블로그 글 본문의 목차를 생성하고 각 섹션에 해당하는 제목에 'ID'를 부여해야합니다. 'ID'는 섹션을 식별하기 위한 고유한 식별자로 사용됩니다.
목차 링크를 만들기 위해서는 본문의 상단에 목차 링크를 추가합니다. 링크를 클릭하면 해당 내용(섹션)으로 바로 이동하게 됩니다.
<nav class="toc">
<p>< 목차 ></p>
<ul>
<li><a href="#section-1">첫번째 섹션 제목</a></li>
<li><a href="#section-2">두 번째 섹션 제목</a></li>
</ul>
</nav>
<h2 id="section-1">첫 번째 섹션 제목</h2>
내용 작성
<h2 id="section-2">두 번째 섹션 제목</h2>
내용 작성
보통 '<a>' 태그를 사용하여 목차 링크를 생성하며, 링크의 'href' 속성을 이용하여 목차 항목과 실제 콘텐츠를 연결합니다.예를 들어 우리가 외부링크나, 관련글로 넣는 내부링크를 사용했을 때 'html모드'로 작성한 글을 보면 '<a href="">'이 사용된 것을 볼 수 있습니다.
아래 각 코드의 의미에 대한 설명입니다.
'1. 목차 생성 및 링크 만들기' 내용의 코드를 보면, 'href' 속성에 '#section-1'이 포함되어 있습니다. 이는 사용자가 "첫 번째 섹션 제목" 링크를 클릭하면 페이지 내의 'id'인 "section-1"인 위치로 내려가게 됩니다.
그렇기 때문에 작성된 코드의 '#sedtion-1', 'section-1'을 사용하지 않고, '#c1', 'id=c1'식으로 대체해서 사용이 가능합니다. 부가 설명으로 #에 있는 영문 내용와 id에 있는 영문이 일치해야 해당 내용의 위치로 내려가는 원리입니다.
티스토리 글을 작성할 때 목차를 사용하게 되면, 독자들은 글의 흐름을 파악하기 쉽습니다. 또한, 목차에 내부 링크를 걸어 자신이 관심 있는 부분으로 바로 이동할 수 있어 사용자들에게 편리함을 제공합니다.
하지만, 목차를 무분별하게 사용하면 오히려 가독성을 해칠 수 있습니다. 구조화된 글이 아닌 단순한 여행 후기, 제품 후기 등과 같이 분할하기 어려운 경우에는 무리하게 사용할 필요가 없습니다. 전문적인 구조화된 글에 주로 사용하면 방문자들의 가독성을 높이는 데 효과적입니다.
티스토리 블로그 목차 링크 만드는 방법과 필요성에 대해 알아보았습니다.
수익형 블로그를 운영하면서 사용자가 오래 머무를 수 있도록 가독성 높은 글을 작성하거나 그에 따른 스타일을 구축하는 것이 필요합니다. 이를 위해서 목차를 활용하는 것도 한가지 방법입니다. 목차 링크 설정으로 구조화된 글을을 만들어 보세요!
티스토리 블로그 꾸미기 관련글
⬇️티스토리 블로그 글씨체, 크기 간격 변경하는 법 알아보기
⬇️티스토리 블로그 '매거진 스킨' 썸네일 크기 변경하는 법 알아보기
⬇️티스토리 블로그 본문 제목 밑줄 넣는 법 알아보기