1. Chat GPT란
ChatGPT는 OpenAI에서 개발한 대화형 인공지능 모델로, 최신의 GPT 아키텍처를 기반으로 합니다. 본 글은 GPT-4를 사용해 작성했다. 이 모델은 다양한 주제와 대화 상황에서 인간과 유사한 자연어 처리 능력을 가지며, 질문에 대한 답변, 정보 검색, 의견 제시 등 다양한 기능을 수행할 수 있습니다.
2. 왜 Chat GPT를 이용했어?
Chat GPT에게 물어보기 전에 구글에서 몇가지 글을 찾아봤는데, 어떤 파일도 다운받아서 업로드 하라고 하고, 뭔가 어려웠다. 그래서 겸사겸사 Chat GPT에게 물어봤더니, 띠용? 내 생각보다 너무 잘 알려줬다.
자세한 후기는 아래에서 좀더 다뤄보도록 하자
3. 먼저 방법부터 알려주겠다
최종 결과물은 우측 상단에, 스크롤을 따라다니는 목차이다. Chat GPT를 통해 원하는 방법대로 수정도 가능하다
매번 글을 쓸때마다 수정할 필요가 없다는게 가장 큰 장점이다
본 페이지는 코드 복사가 안되기 때문에, 아래 txt파일을 다운받아 붙여넣길 바란다.
블로그 관리 -> 스킨편집 -> HTML 편집
</head> 바로 앞에 아래 코드를 삽입한다
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#toc {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
padding: 1em;
margin-bottom: 2em;
}
#toc ul {
list-style: none;
padding-left: 0;
}
#toc ul ul {
padding-left: 1em;
}
</style></body> 바로 앞에 아래 코드를 삽입한다
<script>
$(document).ready(function () {
var toc = $('<div id="toc"><h2>목차</h2><ul></ul></div>');
var ul = toc.find('ul');
$('article h2, article h3').each(function () {
var el = $(this);
var id = el.text().replace(/\s+/g, '-').toLowerCase();
el.attr('id', id);
ul.append('<li><a href="#' + id + '">' + el.text() + '</a></li>');
});
if (ul.children().length) {
$('article').prepend(toc);
$('article').css('position', 'relative');
$('#toc').css({
'position': 'fixed',
'top': '10px',
'right': '10px',
'z-index': 1000
});
}
});
</script>이러면 끝난다.
아래는 Chat GPT로부터 어떻게 결론을 얻게 되었는지 그 과정을 나열해 보았다.
4. Chat GPT에게 뭐라고 질문한거야?
1-1) 첫번째 질문
tistory 블로그에 목차를 자동으로 넣는 방법 알려줘
1-2) 첫번째 질문에 대한 답변
Tistory 블로그에서 목차를 자동으로 생성하려면, 사용자 정의 HTML 및 JavaScript 코드를 활용해야 합니다. 아래 단계를 따라 목차를 생성하는 방법을 알려드리겠습니다.
1. 블로그 관리 페이지로 이동하세요.
2. 관리자 메뉴에서 '꾸미기'를 선택한 후, '사용자 정의'를 클릭하세요.
3. '사용자 정의 편집' 창에서, <head> 태그 안에 다음과 같은 스크립트와 스타일 코드를 추가하세요.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#toc {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
padding: 1em;
margin-bottom: 2em;
}
#toc ul {
list-style: none;
padding-left: 0;
}
#toc ul ul {
padding-left: 1em;
}
</style>4. 이제 본문에 들어갈 목차를 자동으로 생성하는 스크립트를 추가해야 합니다. 아래 코드를 </body> 태그 바로 앞에 추가하세요.
<script>
$(document).ready(function () {
var toc = $('<div id="toc"><h2>목차</h2><ul></ul></div>');
var ul = toc.find('ul');
$('article h2, article h3').each(function () {
var el = $(this);
var id = el.text().replace(/\s+/g, '-').toLowerCase();
el.attr('id', id);
ul.append('<li><a href="#' + id + '">' + el.text() + '</a></li>');
});
if (ul.children().length) {
$('article').prepend(toc);
}
});
</script>
1-3) 결과물
본문내에 만들고 싶은 의지와 달리, 맨 위에 위치하게 되었다
2-1) 두번째 질문.
본문 최 상단에 위치하게 하고 싶어
2-2) 두번째 답변
본문의 최상단에 목차를 위치하게 하려면, 스크립트를 약간 수정해야 합니다. 아래와 같이 스크립트를 수정한 후 </body> 태그 바로 앞에 붙여 넣으세요.
<script>
$(document).ready(function () {
var toc = $('<div id="toc"><h2>목차</h2><ul></ul></div>');
var ul = toc.find('ul');
$('article h2, article h3').each(function () {
var el = $(this);
var id = el.text().replace(/\s+/g, '-').toLowerCase();
el.attr('id', id);
ul.append('<li><a href="#' + id + '">' + el.text() + '</a></li>');
});
if (ul.children().length) {
$('article').prepend(toc);
$('article').css('position', 'relative');
$('#toc').css({
'position': 'absolute',
'top': 0,
'right': 0,
'z-index': 1000
});
}
});
</script>
2-3) 두번째 결과물
이번엔 우측 최상단으로 목차가 이동했다
3-1) 세번째 질문
생각해보니, 본문내에 위치하는것보다 우측에서 계속 보여주는게 더 좋겠다는 생각이 들었다.
그래서 이렇게 질문 해 보았다.
최상단에 있지만, 스크롤을 내리면 바로 사라져. 스크롤을 내릴때 따라오게 만들 수는 없을까?
3-2) 세번째 답변
스크롤을 내릴 때 목차가 따라오게 하려면, 스크립트를 수정하여 스크롤 이벤트에 따라 목차의 위치를 조절할 수 있습니다. 아래와 같이 수정된 스크립트를 </body> 태그 바로 앞에 붙여 넣으세요.
<script>
$(document).ready(function () {
var toc = $('<div id="toc"><h2>목차</h2><ul></ul></div>');
var ul = toc.find('ul');
$('article h2, article h3').each(function () {
var el = $(this);
var id = el.text().replace(/\s+/g, '-').toLowerCase();
el.attr('id', id);
ul.append('<li><a href="#' + id + '">' + el.text() + '</a></li>');
});
if (ul.children().length) {
$('article').prepend(toc);
$('article').css('position', 'relative');
$('#toc').css({
'position': 'fixed',
'top': '10px',
'right': '10px',
'z-index': 1000
});
}
});
</script>
3-3) 세번째 결과
지금 우측에 보이는것처럼, 목차가 잘 따라오게 되어 있다.
5. 결론
따로 뭔가 설치할 필요도 없었고, 몇번의 채팅 과정으로 원하는 결과를 얻을 수 있었다. 비록 21년 9월까지의 검색결과이기 때문에 세부적인게 틀리긴 하더라도, 굉장히 유용하게 쓰일 수 있음을 알 수 있었다. 나같은 컴맹도 시키는데로만 했더니 이런 결과가 나왔는데 .. 앞으로 정말 많은 분야에 쓰이게 될 것 같다.
'알게된 꿀팁들' 카테고리의 다른 글
| 애플페이 vs 삼성페이 한눈에 비교하기, 애플페이 가맹점 확인하는 방법 (0) | 2023.03.22 |
|---|---|
| 화성시 온국민평생장학금 신청방법 간단히 요약! (0) | 2023.03.22 |
| 자동차 환경개선부담금 휴대폰으로 납부하기(안드로이드, 아이폰) (0) | 2023.03.17 |
| 이태원 상품 회복 상품권 사용할만한 장소, 살 것 추천 (0) | 2023.03.10 |
| M1맥북 밤마다 배터리 닳는 이유와 해결책! (0) | 2023.03.05 |