블로그용 버튼, 코딩 몰라도 되는 HTML 버튼 생성

GPT로 블로그용 버튼 만들기

---

블로그 버튼 제작

 

GPT를 활용해 HTML 버튼을 자동 생성해본 실제 사용법 리뷰입니다. 티스토리 블로그에 직접 적용한 후기까지 자세히 정리했어요.

블로그 운영을 하다 보면 버튼 하나 넣는 것도 막막할 때가 있어요. 코딩을 모른다면 더더욱 어렵게 느껴지죠. 그런데 요즘은 GPT를 활용하면 이런 HTML 코드를 직접 만들 수 있다는 사실, 알고 계셨나요? 오늘은 코딩을 하나도 몰라도 GPT를 이용해 블로그용 버튼을 자동 생성해본 후기를 공유해보려고 해요.

 

---

1. 버튼이 필요한 블로그 상황 예시

코딩 지식 없이도 버튼 제작

방문자에게 다른 글을 유도하거나 외부 링크를 자연스럽게 연결하려면 버튼이 유용해요. 하지만 HTML 지식이 없다면 어디서부터 시작해야 할지 모르겠죠.

 

 

2. GPT에게 HTML 버튼 요청한 프롬프트 공개

다양한 버튼 디자인 구현

제가 사용한 프롬프트는 이렇습니다. 예시: 블로그에 사용할 심플한 파란색 버튼을 HTML로 만들어줘. 링크는 https://dosveces.tistory.com/ 으로 연결해줘. 

 

 

3. 생성된 코드 살펴보기

GPT가 만들어준 코드는 아래와 같아요.

  <a href="https://dosveces.tistory.com/" style="display:inline-block; background-color:#007BFF; color:white; padding:10px 20px; text-decoration:none; border-radius:5px;">바로가기</a>
  

바로가기

 

 

4. 티스토리에 실제 적용해본 후기

위 코드를 티스토리 HTML 편집기에 붙여넣으니 깔끔하게 버튼이 나타났어요. 모바일에서도 잘 보이고, 링크도 정상 작동했습니다.

티스토리에 즉시 적용

 

 

5. 버튼 디자인 수정 방법과 한계

간편한 스타일 수정

 

텍스트 색상이나 배경색, 크기 등은 프롬프트를 조금만 바꾸면 쉽게 수정 가능했어요. 다만 복잡한 애니메이션이나 반응형까지는 한 번에 생성되진 않더라고요. 그래도 노코드 사용자에겐 충분히 유용합니다.

 

 

 

 

6. 내가 만든 "티스토리 버튼 생성기"

티스토리 버튼 생성기

 

 

"좀더 자세한 정보를 원하시면 눌러주세요, https://dosveces.tistory.com/ ,▶️"

을 넣으니 아래와 같이 <style>을 생성해줬다. 

 

버튼 <style>

 

 

이건 HTML 모드에서 글 처음에 넣어주면 되고 이 style을 호출하기 위해 본문에 사용할 코드도 같이 제공해 주었다.

 

<a href="https://dosveces.tistory.com/" class="custom-button" target="_blank>▶️

 

좀더 자세한 정보를 원하시면 눌러주세요</a>

 

이제 티스토리에 사용할 버튼을 직접 생성해 보세요!

 

ChatGPT - 티스토리 버튼 생성기 [Moment Insight]

 

 

📌ChatGPT Plus 70% 할인 구매 팁

ChatGPT Plus 70% 할인 구매 팁, GamsGo 후기 대공개