티스토리 '본문'에 내부 하이퍼링크를 넣어 '목차' 만들기

목차 이미지 (샘플)

 

<목차>

1. 만드는 이유 

2. 만드는 방법 

 

2-1 목차를 글로 쓴다 (기본모드)

2-2 html 모드로 가는 방법 

2-3 각 목차에 href 속성을 준다 (html 모드)

2-4 가고자 하는 곳에 id 속성을 준다 (html 모드) --> 링크 작동 완성 

 

만드는 이유 

 

글이 길어지면 처음 읽을 때는 전체를 천천히 다 읽더라도, 경우에 따라서는 어느 부부만 때에 따라 찾아가면서 읽어야 하는 경우도 있다. 그러나 글의 모든 순서를 다 외우고 있는 것이 아니라면 쉽게쉽게 찾아가는 것이 꼭 간단한 일만은 아니라서 불편한 경우들이 있는데, 이렇게 되면 상당히 많은 마우스 휠을 굴려서 화면을 아래위로 스크롤을 해본 경험이 누구나 있을 것이다.

 

이런 점을 보완하기 위해 '글' 상단에 목차를 만들어 두고, 필요한 곳을 쉽게 찾아 갈 수 있게 해두면 여러모로 편한 점이 있다. 그러나 그렇다고 해서 그러한 조치가 너무 굉장한 노력이 필요하다면 아마 하기 힘들 수도 있을 것이다. 그러나 그것이 그리 어렵지도 않더라, 더구나 html을 잘 모르는 나 같은 사람도 약간의 배움만으로 할 수 있게 해주는 면이 있어서 만들어 두려고 한다. 

 

만드는 방법 

 

2-1. 목차를 글로 쓴다 

• 이것을 위해서는 따로 배울 것은 없다. 그냥 평상 시에 글을 쓰던 대로 '글'을 쓰되 '목차' 형태로 쓰기만 하면 된다. 예를 들어 "대분류, 1. 소분류 첫번째 어쩌구, 2. 소분류 두번째 어쩌구" 하는 식으로 '큰제목'과 '작은제목'을 구분해 가면서 만들어도 되고, 그저 나열하듯이 주욱 써내려 가도 된다.  

2-2. html 모드로 가는 방법 

• '글쓰기' 메뉴에 있는 html 모드로 들어간다. 

'기본모드'에서 'html모드'로 들어가기

 

2-3. 각 "목차항목"에 href 속성을 준다 (html 모드)

• href="#속성이름" 형태로 href 즉 하이퍼링크 속성에 그 "이름"을 지정한다. 

목차 항목들에 href 속성을 입힌 모습

• href 속성 값을 입히면 그 '목차항목'들은 기본적으로 '파란 글씨'에 '밑줄'이 생기게 되는데 그 모양이 마음에 들지 않으면 style 속성 (style="text-decoration: none")을 사용해 아래 그림 처럼 다른 형태로 바꿔도 된다. (아래그림은 파란글씨는 그대로 두고, 밑줄만 없앤 형태이다. 글자 색깔은 위의 style 속성의 ~~ none; 뒤에 "color: blue;" 같은 형태로 추가해서 바꿀 수 있다.) 

style 속성을 이용해 '목차항목'의 표현을 바꾼 모습

 

2-4. 가고자 하는 곳에 id 속성을 준다 (html 모드)

• id="href속성이름" 형태로 그 href가 가리키는 곳 위치에 id 속성을 준다. 
• 이때 주의할 것은 목차항목에 순서에 따라 1,2,3 식으로 '넘버링'을 하는 경우에는 에디터가 제공하는 '넘버링' 기능으로 그 속성값을 주는 것 보다는, 손으로 일일이 "목차의 숫자"를 하나하나 써 넣으시기를 권한다. 그렇게 하는 이유는 따로 없으나, 그렇게 하는 것이 나중에 id 속성을 줄 때 훨씬 덜 헛갈리기 때문이다.  

href 속성이 가르키는 위치에 id 속성 값을 준다.

 

자동 목차 생성 방법 

 

약간의 기능들을 더 추가하면 html 이나 CSS 기능을 이용해서 글 내부에 존재하는 'h1~4' 까지의 제목 속성들을 인덴테이션 까지 넣어서 자동으로 목차가 생성되도록 하는 방법도 있다. 그러나 너무 많은 테크니컬한 기능에 대한 공부는 전문적인 프로그래머가 아니라면 오히려 '글쓰기'에 대한 의지를 저해 하므로, 그렇게까지 홈페이지 기능 자체를 공부할 필요는 없다고 본다. 

 

..

2024.11.14 - [문화일기/영화, 무협, 트롯] - 강철부대 박보람 양해주 두 스나이퍼의 저격수 이야기

강철부대 박보람 양해주 두 스나이퍼의 저격수 이야기

2024.11.10 - [문화일기/영화, 무협, 트롯] - 정숙한 세일즈 - JTBC 주말드라마, 넷플릭스

정숙한 세일즈 - JTBC 주말드라마, 넷플릭스

2024.11.08 - [문화일기/꿈해몽] - 눈에 대한 꿈 해몽

눈에 대한 꿈 해몽

2024.11.07 - [문화일기/영화, 무협, 트롯] - 강철부대W 707 전민선 대원

강철부대W 707 전민선 대원