오늘은 티스토리 포스팅에 회색 배경에 검정 테두리의 목차를 생성하고, 각 목차를 클릭하면 해당 본문으로 이동하는 HTML 코드에 대해 설명해 드리겠습니다.
1. 목차 생성하기
- 먼저, 티스토리 포스팅 작성 페이지에서 본문에 목차를 추가하고 싶은 위치에 커서를 놓습니다.
- 그 다음, 편집기 상단의 'HTML' 도구를 클릭하여 HTML 모드로 전환합니다.
- HTML 코드에서 다음과 같이 목차를 작성합니다.
<div id="toc">
<ul>
<li><a href="#section1">첫번째 타이틀</a></li>
<li><a href="#section2">두번째 타이틀</a></li>
<li><a href="#section3">세번째 타이틀</a></li>
</ul>
</div>
- 위 코드에서 `#section1`, `#section2`, `#section3`은 각각 본문의 해당 섹션의 id와 일치해야 합니다.
2. 목차 스타일 지정하기
- 목차의 스타일을 지정하려면, 스킨 편집에서 CSS를 수정해야 합니다.
- 스킨 편집 페이지로 이동한 후, 'CSS 편집' 탭을 클릭합니다.
- CSS 코드 상단에 다음과 같은 코드를 추가합니다.
#toc {
border: 1px solid black;
background-color: lightgray;
}
- 위 코드는 목차의 테두리와 배경색을 지정합니다.
3. 본문 섹션 id 지정하기
- 마지막으로, 본문의 각 섹션에 id를 지정해야 합니다.
- HTML 모드로 전환한 후, 각 섹션의 제목 앞에 다음과 같은 코드를 추가합니다.
<h2 id="section1">첫번째 타이틀</h2>
<h2 id="section2">두번째 타이틀</h2>
<h2 id="section3">세번째 타이틀</h2>
- 위 코드에서 `id` 속성의 값은 목차에서 지정한 값과 일치해야 합니다.
이상으로, 티스토리 포스팅에 회색 배경에 검정 테두리의 목차를 생성하고, 각 목차를 클릭하면 해당 본문으로 이동하는 방법에 대해 설명드렸습니다. 참고하시기 바랍니다. 😊
댓글