본문 바로가기
카테고리 없음

티스토리 링크 버튼 만들기 쉬운 HTML 이용하기

by 행백1 2023. 1. 3.
반응형

 

티스토리 블로그 글을 좀더 고급스러워 지게 보이는 방법이 있습니다

바로 링크를 멋드러지게 만드는 거죠

근데 대부분의 사람들은 css를 이용해서 만드는데

이번엔 html로 만드는 방법을 알아보시죠

 

 

티스토리 링크 버튼 만드는 방법

 

글쓰기 모드로 들어와 아래 그림을 보시면

보통 기본모드로 글씨를 쓰는데

이걸 HTML로 바꾸고

 

아래의 코드를 서식쓰기 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 : #58ccff;에서  #58ccff를 수정하면 됩니다.

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

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

 

 

  위의 코드를 수정하여 새로운 버튼을 만들었습니다.

 - width : 800px, background-color : #1ae0eb, font-size : 25px 로 수정하면 아래 버튼이 생깁니다.

 - 코드에서 "width: 500px;" 를 삭제하시면 텍스트 길이에 따라 버튼 사이즈가 조정됩니다.

 

 

이상으로 티스토리 링크버튼 만드는 방법을 알아봤습니다.

여기까지 보시고 잘 이해가 안되시는 분들은 아래 포스팅에서 좀 더 확인해보시기 바랍니다.

확인해보시고 유용하셨다면 작은 팁도 잊지 말아주세요~~

 

반응형

댓글