블로그는 많은 사람들이 자신의 이야기와 정보를 공유하는데 널리 사용되는 플랫폼입니다. 블로그 글에 버튼(링크)을 추가하면 독자들에게 눈에 띄는 CTA(Call To Action)를 제공하여 더욱 효과적으로 원하는 페이지로 이동하게 할 수 있습니다. 이 글에서는 블로그에서 버튼(링크)을 만드는 방법을 초보자를 대상으로 상세히 설명하겠습니다.
티스토리 버튼(링크) 만들기
1. 먼저 티스토리 대시보드에 로그인 후 글쓰기를 위해 '글쓰기' 탭을 클릭합니다.
2. 글 쓰기 화면에서는 본문에 들어갈 내용을 작성합니다.
3. 링크를 걸고자 하는 텍스트(텍스트는 드래그)나 이미지를 클릭한 후, 글쓰기 툴바의 '링크' 아이콘(사슬 모양)을 클릭합니다.
4. 이제 링크를 걸고자 하는 웹 페이지의 URL을 '링크 주소'란에 입력합니다.
5. '새 창으로 열기' 옵션을 체크하면, 클릭 시 링크가 새 창에서 열립니다.
6. 확인을 클릭하면 선택한 텍스트 또는 이미지에 링크가 추가됩니다.
HTML을 활용한 버튼(링크) 만들기
1. '<a>' 태그로 버튼 만들기
<a href="링크주소" target="_blank" style="display: inline-block; text-decoration: none; color: #fff; background-color: #007bff; padding: 10px 15px; border-radius: 5px;">버튼 텍스트</a>위 코드는 기본적인 버튼 스타일을 적용한 코드입니다.
href에는 연결하려는 링크 주소를, target="_blank"는 링크를 새 탭에서 열기 위한 설정입니다.
style 부분은 버튼의 디자인을 정하는 부분으로, 배경색, 글자색, 패딩(버튼 내부의 공간), 테두리 모양 등을 설정합니다.
<a>는 'anchor'의 줄임말로, 웹 페이지에서 다른 위치 또는 다른 웹 페이지로 이동하게 해주는 하이퍼링크를 만들 때 사용합니다.
href="링크주소": href는 'hypertext reference'의 줄임말로, 링크가 이동할 URL을 지정합니다. 여기에 이동하고자 하는 웹페이지의 URL을 입력하면 됩니다.
target="_blank": target 속성은 링크를 클릭했을 때 어디에 결과 페이지를 표시할지를 지정합니다. _blank는 새 창 또는 탭에서 페이지를 열도록 지정합니다.
style="...": style 속성은 HTML 요소에 인라인 CSS(스타일 정보)를 적용할 때 사용됩니다. 이 예시에서는 버튼의 디자인을 설정하고 있습니다.
display: inline-block;: 요소를 인라인 블록 요소로 지정합니다. 이 속성은 요소가 텍스트처럼 한 줄에 나란히 배치되면서도, 블록 요소처럼 너비와 높이 등을 지정할 수 있게 해줍니다.
text-decoration: none;: 링크의 밑줄을 제거합니다.
color: #fff;: 버튼의 텍스트 색상을 흰색으로 설정합니다. #fff는 흰색을 나타내는 RGB 코드입니다.
background-color: #007bff;: 버튼의 배경색을 파란색으로 설정합니다. #007bff는 파란색을 나타내는 RGB 코드입니다.
padding: 10px 15px;: 버튼 내부의 공간(패딩)을 설정합니다. 첫 번째 값(10px)은 상하 패딩, 두 번째 값(15px)은 좌우 패딩을 나타냅니다.
border-radius: 5px;: 버튼의 모서리를 둥글게 만듭니다. 값이 클수록 더 둥글어집니다.
버튼 텍스트: 이 부분은 버튼에 표시될 텍스트입니다. 원하는 텍스트로 변경하시면 됩니다.
이렇게 설정하면, 원하는 디자인의 버튼을 생성하고, 해당 버튼을 클릭하면 지정한 URL로 이동하는 기능을 구현할 수 있습니다.
2. '<button>' 태그로 버튼 만들기
<button onclick="location.href='링크주소'" style="background-color: #4CAF50; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border: none; border-radius: 4px;">버튼 텍스트</button>위 코드는 버튼 클릭 시 설정된 URL로 이동하게 만드는 코드입니다.
onclick 속성에 location.href='링크주소'를 지정하면, 버튼을 클릭할 때 해당 링크로 이동하게 됩니다.
style 부분은 버튼의 디자인을 설정합니다.
위의 각 코드를 복사하여 티스토리의 글 쓰기 화면에서 'HTML' 탭을 클릭하고, 원하는 위치에 붙여 넣기 하시면 됩니다.
그리고 '링크주소' 부분을 원하는 URL로, '버튼 텍스트' 부분을 원하는 텍스트로 변경하시면 됩니다.
위의 코드는 HTML에서 <button> 태그를 이용하여 특정 링크로 이동하는 기능을 가진 버튼을 생성하는 예시입니다.
<button> 태그는 클릭 가능한 버튼을 만드는 데 사용됩니다.
onclick="location.href='링크주소'": onclick 속성은 사용자가 버튼을 클릭할 때 실행될 자바스크립트 코드를 지정합니다. 여기서는 'location.href'를 사용해 사용자가 버튼을 클릭하면 지정된 URL('링크주소')로 이동하도록 설정되어 있습니다.
style="...": 이 부분은 버튼의 디자인에 대한 CSS 스타일을 지정하는 인라인 스타일입니다. 아래와 같은 스타일을 적용하였습니다↓
background-color: #4CAF50;: 버튼의 배경색을 #4CAF50(녹색)으로 지정합니다.
color: white;: 버튼의 글자 색을 흰색으로 지정합니다.
padding: 15px 32px;: 버튼의 내부 여백을 지정합니다. 위쪽과 아래쪽 여백을 15px, 왼쪽과 오른쪽 여백을 32px로 설정했습니다.
text-align: center;: 버튼 내의 텍스트 정렬을 가운데로 지정합니다.
text-decoration: none;: 텍스트의 밑줄을 제거합니다.
display: inline-block;: 요소를 인라인 블록으로 지정합니다. 이는 요소를 텍스트처럼 한 줄에 나열하면서도 블록 요소처럼 너비와 높이 등을 지정할 수 있게 해 줍니다.
font-size: 16px;: 글자 크기를 16px로 설정합니다.
margin: 4px 2px;: 버튼 주변의 외부 여백을 지정합니다. 위쪽과 아래쪽 여백을 4px, 왼쪽과 오른쪽 여백을 2px로 설정했습니다.
cursor: pointer;: 마우스 커서가 버튼 위로 이동했을 때, 커서를 포인터 형태로 표시하도록 설정합니다.
border: none;: 버튼의 테두리를 제거합니다.
border-radius: 4px;: 버튼 모서리의 둥근 정도를 4px로 설정하여 둥글게 만듭니다.
버튼 텍스트: 이 부분은 버튼에 표시될 텍스트입니다. 원하는 텍스트로 변경하시면 됩니다.
이렇게 설정하면, 원하는 디자인의 버튼을 생성하고, 해당 버튼을 클릭하면 지정한 URL로 이동하는 기능을 구현할 수 있습니다.
링크 버튼을 만들면 '클릭률'이 올라간다.
티스토리 플랫폼에서 링크 버튼을 만드는 방법부터, HTML을 활용하여 자체적으로 꾸며진 버튼을 생성하는 방법까지 다양한 방법을 탐색해 보았습니다. 이 정보가 여러분의 웹사이트나 블로그에서 효과적으로 사용자의 참여를 유도하는 링크 버튼을 설계하는 데 도움이 되었기를 바랍니다.
이러한 버튼은 단순히 사용자를 한 페이지에서 다른 페이지로 이동시키는 기능을 넘어서, 사용자 경험을 향상하고 웹사이트의 전반적인 성과를 올려주는 중요한 도구입니다. 적절하게 설계하고 배치된 버튼은 클릭률을 높이고, 웹사이트에 더 많은 트래픽을 유도하며, 결국 사용자의 참여와 참여를 증가시킵니다.
따라서 이 가이드를 사용하여 실제 링크 버튼을 생성해 보시고, 그 효과를 체험해 보시기를 권장합니다. 여러분의 티스토리 블로그가 클릭률을 높이고 더 많은 사용자에게 도달하는 데 성공하길 바랍니다.
SEO에 도움 될만한 워드프레스 플러그인 추천
웹사이트의 트래픽과 전환율 높이기 검색 엔진 최적화 (SEO)는 웹사이트의 가시성을 높이는 데 중요한 역할을 합니다. 이는 웹사이트의 트래픽을 늘리고, 브랜드 인식을 증가시키며, 전환율을 향
edmblackbox.tistory.com
티스토리 버튼(링크) 만들기 : 따라하며 배우는 초보자용
티스토리 완벽 가이드 보기 포스팅 내 특정 페이지(내부 링크)로 방문자를 유입시키고 싶은데 방법을 모르겠는가? 여러 방법이 있지만 매력적인 버튼을 만들면 클릭률(ctr)을 올릴 수 있다. 클릭
yeko90.tistory.com
'IT' 카테고리의 다른 글
| 구글 서치 "문자열의 이스케이프 시퀀스가 잘못됨" 해결 방법 (0) | 2023.08.05 |
|---|---|
| CHAT GPT는 무엇이고 어떻게 사용하는가? chat gpt 총정리! (0) | 2023.06.30 |
| 애드센스 구글 애널리틱스 4(GA4) 속성 연결하는 방법 (1) | 2023.06.26 |
댓글