블로그 목차 만들기

 

 

안녕하세요 요즘 저는 학원을 다니면서 웹 디자인 공부를 하고 있습니다. 그래서 목차 만드는 방법을 자연스럽게 알게 되었는데요. 예전에 제가 다른 분들 블로그를 방문하면서 목차를 본 적이 있어서 만들고 싶었지만 이게 뭐라고 검색해야 나오는지 몰라서 하지 못했던 기억이 있네요.

 

일단 제가 목차를 만들어 봤는데요. 클릭하면 그 부분으로 이동하고 만드는 방법을 목차를 사용하여 작성해 봤습니다.

 

목차 만드는 방법

1. 박스 만들기

2. 링크 만들기 

3. 링크 경로 설정

 

 

1. 박스 만들기

<div style="background-color: #dbe8fb; padding: 10px; border: 1px solid #79a5e4; width: 300px;">

</div>

HTML 모드로 가서 위에 코드를 적고 기본 모드로 오세요. 그러면 파란 박스가 생겨 있을 겁니다. 그다음 목차의 내용을 작성합니다.

 

박스의 디자인을 수정하고 싶으면 style 부분을 수정하면 됩니다.  

 

 

2. 링크 만들기

작성 후 다시 HTML 모드로 가면 아래처럼 생겨 있을 겁니다.

<div style="background-color: #dbe8fb; padding: 10px; border: 1px solid #79a5e4; width: 300px;">
<p><b>목차 만드는 방법</b></p>
<p>&nbsp;</p>
<p>1. 박스 만들기</p>
<p>2. 링크 만들기</p>
<p>3. 링크 경로 설정</p>
</div>

여기서 클릭할 수 있게 <a>태그를 사용합니다. 

<div style="background-color: #dbe8fb; padding: 10px; border: 1px solid #79a5e4; width: 300px;">
<p><b>목차 만드는 방법</b></p>
<p>&nbsp;</p>
<p><a href="#1">1. 박스 만들기</a></p>
<p><a href="#2">2. 링크 만들기</a></p>
<p><a href="#3">3. 링크 경로 설정</a></p>
</div>

방법은 <a href="#id">목차 제목</a>을 위 코드처럼 추가해 주면 됩니다. 

 

 

3. 링크 경로 설정

마지막으로 위 a 태그의 href="#1" 은 목차를 클릭했을 때 id가 1로 설정되어 있는 위치로 이동시켜 주는 것 입니다. 즉 아래 코드처럼 본문의 제목 부분 태그에 id="1" 을 추가해 주면 됩니다.

<p id="1"><b>1. 파란 박스 코드(박스 만들기)</b></p>
<p id="2"><b>2. 목차 내용 코드(링크 만들기)</b></p>
<p id="3"><b>3. 본문 내용 코드(링크 경로)</b></p>

 

이해가 안되시거나 막히는 부분이 있으면 댓글 남겨주세요!