티스토리 블로그 디자인, 챗GPT로 H2태그(제목1) 꾸미기

티스토리에서 제공하는 공식 디자인은 아주 깔끔합니다. 군더더기를 모두 제거한 느낌이죠. 그럼에도, 블로그에 애정을 갖다 보면 조금씩 꾸며보고 싶은 충동을 느끼게 됩니다. 가장 먼저 꾸밀 수 있는 부분은 H태그입니다. HTML, CSS를 알아야 수월하지만, 몰라도 상관없습니다. 챗GPT가 알아서 해주니까요. 

 

챗GPT로 H2태그(제목1) 꾸미기 

① 먼저 챗GPT에게 '홈페이지 디자인 전문가'라는 정체성을 부여합니다. 챗GPT 전문가들이 말하기를, 정체성을 부여하면 대답이 더 풍성해진다고 합니다.

 

② 이후 'H2 태그 디자인 코드'를 추천해 달라고 합니다. 어떤 코드가 사용되는지 모르기 때문에 주석으로 설명을 해달라고 추가합니다. 

 

③ 챗GPT가 그럴싸한 H2 태그를 만들어 냅니다. CSS코드를 잘 모르는 분들은 주석을 보시고요. 그래도 이해가 안 되는 분은 챗GPT에게 해당코드를 물어보시기 바랍니다. 

 

 

④ 챗GPT가 추천한 H2태그를 붙여넣어야 합니다. 문제는 '어디에 넣느냐'라는 것이죠. 

기존에 작성한 글에서 소제목(제목1, H2태그)을 찾습니다. [마우스 드래그 → 마우스 우클릭 → 검사]  순서로 진행합니다. 화면 오른쪽에 개발자도구 창이 열리면서 알 수 없는 코드들이 보입니다. 당황하지 마시고, h2를 찾습니다.

 

⑤ H2 코드가 여러개 보이시죠. 개발자도구는 이 코드 값을 변경할 수 있습니다. 하나씩 건드려보고 어떤 코드가 맞는지 찾습니다. '북클럽' 스킨은 article-view h2를 찾으면 됩니다.

 

 

 

⑥ 티스토리 에서 [관리자모드 → 스킨편집 → HTML 편집 → CSS] 순서로 이동합니다. CSS 코드 화면을 한 번 클릭한 후, [컨트롤+F]를 눌러 'article-view h2'를 찾습니다. 아까 개발자도구에서 봤던 H2 코드가 보입니다. 

 

⑦ 챗GPT 코드를 복사하여 붙여넣습니다. 이때 주의할 점이 있습니다. 전체가 아니라 중괄호{ } 안의 내용만 복사해야 합니다.  또, 챗GPT가 '호버 효과'라는 코드도 생성해 줬습니다. 이건 마우스가 H2 위에 위치하면, 디자인 효과가 생기는 코드입니다. 굳이 넣지 않아도 됩니다.

 

꼭 넣고 싶은 분은  'article-view h2:hover'를 만들어주세요. 또 하나! 기존 H2 코드는 주석/* */으로 묶어둡니다. 다시 예전코드를 사용할 수도 있으니까 말이죠.

 

⑧ 미리보기로 변경된 H2 디자인을 확인합니다. 마음에 들지 않는다면, 챗GPT에게 다른 디자인을 요청합니다. 다른 블로그에서 예쁜 H2 디자인을 봤다면, 그 특징을 챗GPT에게 설명해 주세요. 이런 식으로 H2 태그를 새롭게 디자인할 수 있습니다. 

 

⑨ H3, H4 태그도 동일한 방식으로 챗GPT를 활용해 꾸밀 수 있습니다.