초간단! 왕초보도 가능한 티스토리 3초컷 클릭 유도 버튼 만들기. HTML 버튼 소스 공유

📌 초보자도 쉽게 넣는 3초컷 티스토리 글에 링크 버튼 넣는 법!

📝 목차

1. 티스토리 [버튼] 이란?
2. 티스토리 버튼 만드는 기본 코드
3. 티스토리 버튼 코드 사용법
4. 응용하기(1) :버튼의 색상 및 모양 바꾸기
5. 응용하기(2): CSS 추가 스타일링 방법
6. 완성 예시 및 복붙용 코드 공유 < 3초컷 버튼 만들기 >
7. 마무리

1. 티스토리 [버튼] 이란?

티스토리 글을 읽다 보면 아래 이미지처럼 생긴 버튼을 종종 볼 수 있어요.

이 버튼은 특정 페이지의 주소와 연결되어 있어서, 클릭하면 새로운 창에서 해당 페이지가 열립니다.
주로 글과 관련된 추가적인 정보를 안내하거나, 신청 폼, 외부 링크, 제품 페이지 등을 연결할 때 자주 활용되죠.

티스토리를 취미로 운영하는 분들께도 유용한 기능이지만,
수익형 블로그 운영을 목표로 하신다면 꼭 알아두셔야 할 필수 기능입니다.

[버튼 링크]는 관련 정보를 방문자에게 더 편리하게 제공하고,
자연스럽게 클릭을 유도해 블로그 체류 시간을 늘리는 데 도움이 됩니다.

이는 광고 수익을 높이는 데 효과적일 뿐만 아니라,
자체 상품 판매나 제휴 마케팅 페이지로 연결해 추가 수익을 얻는 데도 유리하죠.

오늘은 왕초보도 쉽게 따라 할 수 있는,
티스토리 포스팅에 [버튼]을 넣는 방법을 소개해드릴게요.

코드 공유는 [목차 6번 완성 예시 및 복붙용 코드 공유]를 보시면 됩니다.

설명을 건너 뛰고 코드 복붙해서 바로 쓰실 분들은 목차에서 6번을 바로 누르세요! 😉

2. 티스토리 버튼 만드는 기본 코드

티스토리는 HTML 편집 기능을 지원해서,
아래처럼 간단한 코드만 넣어주면 버튼을 만들 수 있어요.

노란색으로 표시된 부위에 [연결한 링크 주소]를 넣고,
파란색으로 표시된 부위에 버튼에 새길 [문구]를 넣어주면 됩니다.

위 코드를 저장해 두셨다가, [링크 주소] 부분과 [문구]만 바꿔서 계속 활용하시면 됩니다.

어때요? 참 쉽죠? 😄

위 코드를 적용하면 아래와 같은 버튼이 생성됩니다.

( 이 버튼을 누르면 제 티스토리 홈화면이 새 창으로 띄워지도록 설정하였습니다. )

3. 티스토리 버튼 코드 사용법

티스토리 글쓰기 메뉴 우측 상단을 보면 [기본모드]라고 되어 있는 것을 눌러, [HTML] 모드로 변경하여 버튼 코드를 원하는 위치에 붙여 넣어주면 끝입니다.

초보자분들은 헷갈리지 않으려면 복사한 코드를 메모장에 붙여 넣은 다음,

[링크 주소]와 [문구]를 수정해 놓고 붙여 넣는 게 쉽습니다.

① 복사한 코드를 메모장에 붙여 넣어 수정한다.

② 포스팅에서 [버튼]을 넣을 위치에 '임시 표시'를 한다. (ex. 여기, 가나다, 홍홍홍 )

③ 글쓰기 모드를 [HTML]로 바꿔서 '임시 표시'가 된 자리를 찾아 코드를 붙여 넣고, 기본 모드로 돌아와 임시 표시를 지운다.

글이 길면 코드를 붙여 넣을 위치를 쉽게 찾기 힘든데요!

특정한 단어로 임시 표기를 해두면 [HTML] 모드에서 붙여 넣기 할 위치를 찾기 쉬워지니 참고하세요~😉

이제 필요하실 때마다,

위 코드를 저장해 뒀다가 [링크 주소]와 [버튼 문구]만 바꿔서 붙여 넣기 하면

누구나 3초 컷으로 간편하게 [티스토리 버튼]을 만들 수 있습니다.

여기까지는 [버튼 만들기의 기본]입니다.

기본 형태로만 사용하실 분들은 목차 6번으로 가셔서 코드만 가져가셔서 사용하셔도 돼요!

하지만...

버튼의 색상도 바꾸고 싶고, 모양도 바꾸고 싶다면?

아래에서 다양하게 응용하는 법을 자세히 설명해 드리겠습니다.

4. 응용하기(1) : 버튼의 색상 및 모양 바꾸기

이번에는 버튼의 모양과 색상을 바꾸는 방법을 알아보겠습니다.

위와 동일한 코드입니다. (밑줄색과 설명이 연결되어 있습니다.)

이 코드에 적힌 일부 텍스트를 변경해 주면 됩니다.

padding: 버튼 내부의 여백을 설정합니다. padding:10px 20px;은 상하 10px, 좌우 20px의 여백을 설정합니다.
background-color: 버튼의 배경색을 설정합니다. 예시에서는 #4CAF50이 사용되었으며, #부분을 다른 색상 코드로 변경할 수 있습니다. #4CAF50 대신 red와 같이 색상의 영어 명칭을 적어도 됩니다.
color: 버튼 텍스트의 색을 설정합니다. 예시에서는 white로 설정되어 있습니다.
border: 버튼의 테두리를 설정합니다. border:none;으로 테두리를 제거합니다. 테두리를 설정하려면 1px solid #ccc와 같이 작성할 수 있습니다.
border-radius: 버튼의 모서리 둥글기를 설정합니다. 5px는 모서리가 둥글게 처리되는 정도를 나타냅니다. 이를 변경하여 더 둥글거나 각진 모서리를 만들 수 있습니다.
cursor: 버튼을 클릭할 때 커서 모양을 지정합니다. cursor:pointer;는 클릭할 수 있는 버튼을 나타내는 손가락 모양의 커서를 표시합니다. 버튼을 클릭할 때 손가락 모양 말고, 다른 모양으로 설정할 수도 있는데요. 아래 <주요 커서값 목록>을 참고하여, 'pointer'글자 자리에 [값 설명] 칸에 있는 텍스트를 적어주면 다른 모양으로 커서를 바꿀 수 있어요.

<주요 커서(cursor) 값 목록>

값설명

auto	브라우저 기본값 (상황에 따라 자동)
default	기본 화살표
pointer	클릭 가능한 요소 (손가락 아이콘)
text	텍스트 입력 가능 (I자 모양)
move	이동 가능한 영역 (십자 화살표)
grab	드래그 가능한 항목 (손 모양)
grabbing	드래그 중인 상태의 손 모양
not-allowed	금지 표시 (🚫 모양)
wait	대기 상태 (모래시계 또는 원형)
progress	작업 중 (화살표+대기 아이콘)
crosshair	십자선 모양 (정밀 선택용)
help	도움말 가능 (물음표 커서)
none	커서 표시 안 함

위 설명을 바탕으로,

라운드가 더 둥글고, 노란 테두리의 빨간 버튼을 만들어 본 예시입니다.

근데...

버튼이 조금 작은 것 같다고요...?

글꼴도 마음에 안 든다고요?

버튼에 그림자를 설정해서 조금 더 임팩트 있게 보이고 싶다고요..?

그럼 CSS 추가 스타일링을 이용해서 버튼의 사이즈를 조절하고, 글꼴과 글자의 크기, 그림자를 넣는 법을 알려드리겠습니다.

5. 응용하기(2): CSS 추가 스타일링 방법

버튼의 글꼴, 버튼 글자의 크기, 버튼의 크기(너비와 높이), 버튼의 그림자 등을 변경하는 속성은 다음과 같습니다.

font-family: 버튼의 글꼴을 설정할 수 있습니다. 예: font-family: Arial, sans-serif;
font-size: 버튼 텍스트의 크기를 설정합니다. 예: font-size: 16px;
width/height: 버튼의 너비와 높이를 설정할 수 있습니다. 예: width: 150px; height: 50px;
box-shadow: 버튼에 그림자를 추가할 수 있습니다. 예: box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
hover: 마우스를 올렸을 때 색상 변경, 강조 효과 등
focus: 포커스가 갔을 때 (ex. 탭 키) 테두리 강조 등
active: 클릭하는 순간 버튼 축소 효과 등

이런 속성들을 적용할 수 있 두 가지 방법이 있는데요!

기본 코드 안에 추가하는 방식과 외부에 CSS를 분리하여 작성하는 방법이 있습니다.

1. 인라인 스타일 방식 (style 속성 안에 추가)

기존 버튼 코드에 직접 스타일을 더 추가하는 방식입니다.

파란색 부분이 추가된 부분입니다.

이 방식은 간편하지만, 많은 스타일을 추가하면 가독성이 떨어지고 유지보수가 어렵다는 단점이 있습니다.

2. CSS 클래스 방식 (스타일을 <style> 또는 외부 CSS에 분리)

두 번째 방식은 HTML에서 class="btn-style"처럼 클래스를 지정하고, <style> 태그 안에 CSS 코드를 따로 작성하는 방식입니다.

<head>
  <style>
    .btn-style {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      font-family: Arial, sans-serif;
      box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    }

    .btn-style:hover {
      background-color: #45a049;
    }

    .btn-style:active {
      transform: scale(0.98);
    }
  </style>
</head>
<body>
  <a href="https://원하는링크.com" target="_blank">
    <button class="btn-style">홈페이지 바로가기</button>
  </a>
</body>

노란색으로 표시된 부분의 속성들을 조정하는 방법입니다.

이 방식은 초보자에게는 더 어렵게 느껴지지만, 코드가 더 깔끔하고 확장성 및 재사용성이 좋습니다.

인라인 스타일	style 속성에 직접 추가	빠르고 간단	스타일이 길어지면 복잡해짐
CSS 클래스	<style>에 별도로 정의	재사용 가능, 깔끔함	초보자에겐 조금 복잡할 수 있음

장단점을 비교하여 본인에게 편리한 방법을 사용하면 됩니다.

CSS방식으로 버튼을 크게 만들어 본 예시입니다.

( 버튼 크기: 가로 700px, 세로 100px / 버튼 색상: red / 커서를 올렸을 때 색상: 그린 / 폰트 크기: 40 px/ 모서리 라운드 :20px / 그림자 적용 )

홈화면으로 바로가기

다양한 속성을 조정해 눈에 확 띄는 버튼이 만들어졌네요^^

6. 완성 예시 및 복붙용 코드 공유

빨간색의 적당히 사이즈의 버튼이 제일 많이 활용되는 것 같아서 이렇게 만들어봤습니다.

<완성예시>

더 알아보기

<HTML 코드 공유>

또는,

&lt;a 
  style=&quot;display: inline-block; 
          text-align: center; 
          line-height: 60px; 
          width: 300px; 
          height: 60px; 
          background-color: red; 
          color: white; 
          font-size: 24px; 
          font-family: Arial, sans-serif; 
          border-radius: 20px; 
          box-shadow: 2px 2px 5px rgba(0,0,0,0.2); 
          text-decoration: none; 
          cursor: pointer;&quot; 
  href=&quot;https://링크주소/&quot; 
  target=&quot;_blank&quot; 
  rel=&quot;noopener&quot;&gt;
  더 알아보기
&lt;/a&gt;

둘 중 하나를 사용하시고, 코드에서 아래 텍스트만 수정해주시면 됩니다!

https://링크주소/ →라고 적힌 부분 원하는 링크 주소(http://~) 로 고치기
더 알아보기 → 라고 적힌 부분 원하는 글자로 고치기 ( 텍스트 변동없이 그대로 쓰려면 안 고쳐도 됨 )

7. 마무리

이번 포스팅을 통해 티스토리 버튼의 기본부터 응용까지, 필요한 내용을 한 번에 정리해 보았습니다.

처음에는 어려워 보여도 몇 번만 연습해 보면 금방 쉬워질 거예요.

링크 버튼은 블로그 글의 퀄리티를 높이는 아주 쉬운 방법이니 꼭 활용해 보세요!

직접 적용해 보면서 더 나은 스타일로 발전시켜 나가면 더 좋겠죠?!
티스토리 운영에 관한 다음 팁도 기대해 주세요! 😉

캐쉬리즘 :: 재미있는 지식과 돈 되는 정보들