티스토리 뷰

안녕하세요. 타이가입니다. 오늘은 티스토리 링크 버튼 만드는 방법에 대해 알려드리겠습니다.

저도 공유받은 방법인데 사용해보니 좋아서 공유해봅니다.

 

아래 코드를 서식쓰기 html 모드에서 복사해서 붙여넣고 사용하시면 됩니다. 

 

<p><button style="width: 500px;

height: 50px; 

background-color: #58ccff; 

font-size: 25px; 

font-weight: bold; 

color: white; 

border: 0; 

border-radius: 30px; 

display: flex; 

flex-direction: column; 

justify-content: center; align-items: center; 

text-decoration: none; 

margin: auto;" 

type="button">테스트 링크버튼 입니다.</button>

</p>

<p data-ke-size="size16">&nbsp;</p>

 

글쓰기에서 서식을 불러오면 아래 그림과 같이 버튼이 생성됩니다. 

 

텍스트를 클릭하셔서 원하는 문구로 수정해서 사용하고, 입력한 텍스트를 더블클릭해서 블럭으로 잡은 후에

글쓰기 상단 링크를 클릭하여 URL 주소를 바로 입력하면 됩니다. 

 

 

 

 

버튼의 폭, 컬러, 글자크기도 수정이 가능합니다.

- 버튼 폭은 코드에서 width ; 500px;에서 숫자를 조정하면 됩니다.

- 컬러는 background-color: 뒷부분 을 수정하면 됩니다.

- 글자크기는 font-size : 25px;에서 숫자를 조정하시면 됩니다.

- 컬러 수정시 참고도구 : 구글에서 "컬러피커"를 입력하시면 아래 그림을 볼 수 있습니다. 여기서 원하는 색을 찍은 후 코드를 복사해서 코드 컬러부분에서 수정하시면 됩니다. 

 

 

 

 

정말 쉽죠??  기본적으로 코드만 넣어놓고 수정해서 쓰시면 되니 꼭 나만의 링크버튼으로 만들어서 사용해보시기 바랍니다. ^^

 

반응형