티스토리 링크 버튼 만드는 방법 (feat. 서식 활용)

 안녕하세요, 이번 포스팅은 티스토리 링크 버튼 만드는 방법 대해서 설명드리도록 하겠습니다. 간혹 티스토리를 운영하시다 보면 텍스트로 링크를 하는 것이 좀 식상해서 버튼 형식의 링크로 하고 싶을 때가 있을 겁니다. 

 

 이런 분들을 위해서 티스토리 링크 버튼 만드는 방법을 설명 드리는 동시에 해당 방식을 어떻게 하면 서식을 이용해서 손쉽게 할 수 있는지에 대해서 설명드리도록 하겠습니다. 

목차

1. 티스토리 링크 버튼 만들기

2. 티스토리 링크 버튼 만들기 - 서식 활용

 

 

티스토리 링크 버튼 만들기

 

: 일단 티스토리 링크 버튼을 만들기 위해서는 먼저 해당 링크가 생성되는 구조를 아셔야 합니다. 링크는 클릭을 하면 접속하는 URL 주소가 있어야 하면 해당 링크를 연결하는 텍스트나 도형 같은 매개체가 필요합니다. 

 

 보통 그냥 텍스트를 써서, 티스토리 상위 메뉴에서 "링크" 메뉴를 이용하셔서 URL을 첨부하시는 경우가 많으시 겁니다. 이 부분도 가독성도 높고 링크 연결 텍스트로도 잘 활용을 하실 수 있습니다. 

 

 이와 더불어 조금은 시각적으로 눈에 띄게 버튼 형식을 구현하기 위해서는 해당 텍스트의 타입을 지정하여, CSS 로 꾸며주셔야 합니다.  CSS를 적용한 티스토리 버튼 링크는 아래와 같이 생성할 수 있습니다. 

 

티스토리-버튼-만들기-예제

 

 그럼 위에서 말씀 드린 예제처럼 만드는 방법에 대해서 설명드리도록 하겠습니다. 스텝별로 하나하나 설명 드리도록 하겠습니다. 

 

STEP 1 - 일단 티스토리 버튼 링크 만들기 사이트에 접속을 하셔야 합니다. 해당 사이트 이름이 간단하게 "Button Generator"인데 원하는 디자에 맞게 CSS 코드를 생성을 해줍니다. 접속 링크는 아래와 같습니다. 

 

▶ 티스토리 버튼 링크 만들기 사이트 바로 가기

 

STEP 2 - 접속을 하셨다면 원하시는 왼쪽과 오른쪽 메뉴를 이용하여 디자인 설정을 하시고 중간 오른쪽에 보시면 "Get code" 버튼이 있는데 해당 버튼을 클릭을 하셔서 CSS 코드와 본문에 첨부할 코드를 복사하시면 됩니다.

 

버튼-생성사이트-디자인설정

 

버튼-생성사이트-생성코드

 

 

STEP 3 - 상위 첫번째 라인은 본문에 붙이는 것이고 CSS 코드는 티스토리 스킨 편집 항목에 "CSS" 메뉴 맨 마지막에 붙여 주시면 됩니다. 여기에서 주의하셔야 하는 항목이 "color" 항목에 꼭 "! important"를 넣어 주셔야 합니다.

 

 

.myButton {
	background-color:#44c767;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff !important;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
	background-color:#5cbf2a;
}
.myButton:active {
	position:relative;
	top:1px;
}

 

스킨편집-메뉴

 

 

 

 

 

CSS-코드

 

 위에서 설명 드린 대로 적용을 하시면 아래와 같이 티스토리 버튼 링크가 생성이 되는 것을 확인하실 수 있습니다. 

 

티스토리-버튼-링크-결과

 

 

티스토리 링크 버튼 만들기 - 서식 활용

 

: 다음은 위에서 설명드린 티스토리 링크 버튼 만들기 방법을 서식을 활용하여 조금 더 손쉽게 하려고 합니다. 일단 위에서 설명드린 CSS 코드는 티스토리 스킨 편집을 통해서 적용을 하였다는 가정하에, 본문에 넣을 코드를 서식으로 만들어 줍니다. 

 

<a href="#" class="myButton">green</a>

 

티스토리-버튼-링크-서식

 

 

 티스토리 서식 만드는 게 처음이라면 티스토리 서식 만드는 방법 및 적용 방법은 아래 포스팅을 참조 하시면 도움이 되실 겁니다. 

 

▶ 티스토리 서식 메뉴 사용 방법

티스토리 서식 메뉴 사용 방법 - GOOD TO KNOW

 

▶티스토리 목차 서식 만들기

티스토리 목차 서식 만들기 - GOOD TO KNOW

 

 

 이렇게 서식을 만들 게 되면 글쓰기 하실 때 손쉽게 해당 서식 코드를 가져와서 적용을 하시면 됩니다. 자동적으로 티스토리 링크 버튼이 만들어지는 걸 확인하실 수 있습니다. 

 

 이상입니다. 지금까지 티스토리 링크 버튼 만드는 방법 및 서식 활용하여 티스토리 링크 버튼을 쉽게 적용하는 방법에 대해서 설명 드렸습니다. 도움이 되셨으면 합니다. 감사합니다. 

 

 

 

2021.08.11 - [IT/인스타그램] - 인스타 비공개 보는법

인스타 비공개 보는법

 

 

2023.01.31 - [경제 놀이터/금융정보] - 경기지역화폐 카드 종류 혜택 사용처 정리

경기지역화폐 카드 종류 혜택 사용처 정리

 

일상생활배상책임-보험이란-적용-범위-종류

일상생활배상책임 보험이란 적용 범위 및 종류

 

 

2023.01.31 - [공유 놀이터/생활] - 2023년 경기도 청소년 교통비 신청기간 지원한도 신청방법

2023년 경기도 청소년 교통비 신청기간 지원한도 신청방법

 

2023.01.13 - [IT/Windows] - 윈도우10 컴퓨터 예약 종료 설정 취소 하는 방법

윈도우10 컴퓨터 예약 종료 설정 취소 하는 방법