블로그에 목차를 클릭하면 해당 섹션으로 이동하게 만드는 기능은 독자가 원하는 정보를 빠르게 찾을 수 있게 도와줍니다. 여기서는 티스토리와 블로그스팟에서 이 기능을 구현하는 방법을 소개합니다.
▣ 티스토리에서 목차 설정 방법
1. 목차 작성
먼저, 글 작성 화면에서 목차를 만듭니다. 각 목차 항목에 고유한 href 속성을 설정합니다.
<ul>
<li><a href="#section1">섹션 1</a></li>
<li><a href="#section2">섹션 2</a></li>
<li><a href="#section3">섹션 3</a></li>
</ul>
</div>
2.섹션 ID 설정
각 섹션의 제목에 해당 ID를 추가합니다.
<p>섹션 1의 내용...</p>
<h2 id="section2">섹션 2</h2>
<p>섹션 2의 내용...</p>
<h2 id="section3">섹션 3</h2>
<p>섹션 3의 내용...</p>
3.HTML 모드로 전환
티스토리 글 작성기에서 HTML 모드로 전환하여 위의 코드를 붙여넣습니다.
4.CSS 스타일링 (선택사항)
필요에 따라 목차를 스타일링하여 보기 좋게 만들 수 있습니다.
background-color: #f9f9f9;
padding: 10px;
border: 1px solid #ccc;
}
#toc ul {
list-style-type: none;
padding: 0;
}
#toc li {
margin: 5px 0;
}
#toc a {
text-decoration: none;
color: #007BFF;
}
#toc a:hover {
text-decoration: underline;
}
▣ 블로그스팟(Blogger)에서 목차 설정 방법
1.목차 작성
블로그스팟의 글 작성 화면에서 목차를 만듭니다. 각 목차 항목에 고유한 href 속성을 설정합니다.
<ul>
<li><a href="#section1">섹션 1</a></li>
<li><a href="#section2">섹션 2</a></li>
<li><a href="#section3">섹션 3</a></li>
</ul>
</div>
2. 섹션 ID 설정
각 섹션의 제목에 해당 ID를 추가합니다.
<p>섹션 1의 내용...</p>
<h2 id="section2">섹션 2</h2>
<p>섹션 2의 내용...</p>
<h2 id="section3">섹션 3</h2>
<p>섹션 3의 내용...</p>
3. HTML 모드로 전환
블로그스팟 글 작성기에서 HTML 모드로 전환하여 위의 코드를 붙여넣습니다.
4. CSS 스타일링 (선택사항)
필요에 따라 목차를 스타일링하여 보기 좋게 만들 수 있습니다.
background-color: #f9f9f9;
padding: 10px;
border: 1px solid #ccc;
}
#toc ul {
list-style-type: none;
padding: 0;
}
#toc li {
margin: 5px 0;
}
#toc a {
text-decoration: none;
color: #007BFF;
}
#toc a:hover {
text-decoration: underline;
}
◑ 설명
1. HTML 문서 구조
● <!DOCTYPE html>: HTML5 문서임을 선언합니다.
● <html lang="ko">: HTML 문서의 언어를 한국어로 설정합니다.
● <head>: 메타데이터를 포함하는 섹션으로, 여기서 CSS 스타일도 정의합니다.
● <body>: 실제 콘텐츠가 들어가는 섹션입니다.
2. 목차
● <div id="toc">: 목차를 감싸는 요소입니다.
● <ul> 및 <li>: 목차 항목을 리스트 형태로 만듭니다.
● <a href="#section1">섹션 1</a>: 클릭 시 id="section1"로 이동하는 링크입니다.
3. 섹션
● <section id="section1">: 각 섹션을 감싸는 요소입니다. id 속성은 목차 링크와 연결됩니다.
● <h2>: 섹션의 제목입니다.
● <p>: 섹션의 내용을 담는 단락입니다.
4. CSS 스타일링
● 목차와 섹션을 보기 좋게 스타일링합니다.
● #toc 스타일은 목차의 배경색, 패딩, 테두리 등을 설정합니다.
● section 스타일은 각 섹션 간의 간격을 설정합니다.
결론
티스토리와 블로그스팟에서 목차 클릭 시 섹션으로 이동하게 만드는 방법은 HTML과 간단한 CSS를 통해 구현할 수 있습니다. 각 섹션에 고유한 ID를 부여하고, 목차에서 이 ID를 참조하면 됩니다. 초보자도 쉽게 따라할 수 있는 방법이니, 이 기능을 활용해 독자들이 더 편리하게 글을 읽을 수 있도록 해보세요.
'블로그 운영 팁' 카테고리의 다른 글
| 블로그 키워드 찾는 방법 - 구글 알리미로 최신 트렌드 모니터링으로 키워드 찾기 (0) | 2024.07.20 |
|---|---|
| 초보 블로거들이 자주하는 실수와 그 해결 방법, 성공적인 블로그 운영을 위한 팁 (0) | 2024.06.26 |
| 애드센스 승인 받는 법! 트래픽과 수익을 끌어올리는 에드센스 블로그 주제 선정 방법 (0) | 2024.06.24 |
| 돈 되는 블로그 글 작성법, SEO 최적화로 에드센스 수익 창출하기 (0) | 2024.06.13 |
| 돈 되는 블로그 포스팅 제목 작성법, 클릭률 높이는 비결 (0) | 2024.06.13 |
