미니 티스토리 블로그 도전기

Chat CPT 활용해서 HTML 목차 서식 만들어보기

재린이미니 2023. 8. 17. 15:12
728x90
반응형

티스토리 블로그 목차 만들기

  -대부분의 사람들이 그럴지 모르겠지만, 나는 네이버 블로그를 먼저 시작하였고 생각보다 쉽게 네이버 블로그 투데이를 500에서 1000을 만들었다. 그래서 자신감 있게 티스토리 블로그를 도전했지만 HTML과 컴퓨터 언어에 대해서 전혀 알지 못하는 나에게 티스토리 블로그는 서식 하나를 바꾸기에도 너무 어려웠다. 

 

- 거기다가, 꼭 SEO에 맞게 글을 써야 한다고 해서 SEO에 대해서도 공부를 해야 하였고, 고마운 분이 만들어 주신 기본 서식을 찾아서 나의 글의 기본서식으로 쓰고 있다.

 

 그런데 다른 티스토리 블로그 글에서는 글의 목차가 만들어져 있고, 누르면 그곳으로 이동할수도 있었다. 나의 글에도 적용하고 싶어서 방법들을 알아보다가 'Chat GPT'를 활용하라는 글을 보게 되었고 도전해보았다. 

1. Chat gpt로 HTML 목차 만들기 

- chat gpt는 유료 버전인 4.0 버전과 무료버전이 있다. 물론 유료 버전을 사용하면 정말 좋은 HTML이 나오는 것 같지만 나는 무료 버전만 사용할 수 있어서, 여러가진 방법으로 물어보다가 딱 내가 원하는 HTML을 찾게 되었다. 

 

-윗 부분은 잘 모르겠지만, 아랫 부분에 목차 밑에 부분과 section 부분을 잘 복사하여서 사용하면 될 것 같았다.

 

chatgpt를활용한html결과

2. 저장해둔 서식 수정하기 

-내가 기본으로 사용하고 있는 서식에 관한 포스팅은 아래 글을 참고 하면 좋을 것 같다.

https://minijusung.tistory.com/44

 

티스토리 블로그 서식 적용으로 가독성 올리기

티스토리 블로그 서식 적용하기 네이버 블로그 보다 조금 더 딱딱한 티스토리 블로그. 거기다가 seo도 더 엄격한 티스토리 블로그. 그래서 뭔가 글을 써도 예쁘지가 않다. 하지만 블린이인 나는

minijusung.tistory.com

-우선 지금 내가 사용하는 서식의 기본 모습과 기본 HTML을 확인해보면

기본서식과HTML

-위와 같다. <h1>으로 된 것이 제목이고 <p>로 되어 있는 것이 본문인 것 같은데 그래도 한 번 확인을 해보자.

기본HTML

-기본 서식에 있는 제목1과 본문1, 제목2와 본문2의 HTML을 확인해보니 예상과 같게 <h>는 제목을 <p>는 본문을 뜻한다. 그렇다면 이제 저장해놓은 하늘색 서식에 chat gpt를 통해서 만들어낸 목차 HTML을 복사해서 적절하게 수정을 해보자.

 

-솔직히 말해서 chat gpt가 만들어 낸 HTML에 앞부분이 무엇을 뜻하는지는 모르겠어서, 그냥 목차 뒷 부부분을 수정하였서 붙여넣기를 해보았다. 그랬더니 짜란! 목차가 적용이 된 서식이 완성이 되었다. 이제 이것을 적용하여서 그때 그때 목차를 수정하여서 글을 쓰면 SEO에도 더 좋고 보시는 분들도 더 좋은 글이 되지 않을까?

목차가생긴HTML

- 티스토리 블로그에 대해서 허상이다. 말이 많지만 꾸준히 해보려고 노력하고 있다. 원래는 재테크 글을 주로 적고 싶었는데, 전문가가 아닌 비전문가로서 글을 적으니 생각보다 쉽지가 않다. 그래도 서식도 하나씩 바꿔보면서 꾸준히 적어보아야 겠다. 

 

 

 

728x90
반응형