티스토리 링크 버튼 만드는 방법 (꾸미기)

블로그 글을 쓸다보면 링크를 넣어야 할때가 있는데요.

기본으로 글에 링크를 넣었을때 눈길이 잘 가지 않아서 링크를 클릭하지 않고 그냥 넘어 갈 수 있습니다.

때문에 본 글에서는 눈에 띄는 링크 버튼 쉽게 만들기 방법을 작성했습니다.

1. 버튼을 만들어주는 사이트 이용하기

해당 사이트는 CSS 코드로 작성한 버튼 모양을 미리 보여주기 때문에 사용하기 편한데요.

옆에있는 여러 설정 값들로 버튼을 만들고 해당 코드를 가져와서 티스토리 블로그에 적용할 수 있습니다.

버튼 만들기 페이지에서 'Get Code'를 눌러서 현재 내가 디자인한 코드를 볼 수 있습니다. 해당 코드를 복사합니다.

'티스토리 HTML 편집창'에서 'CSS'를 선택합니다.

그 다음 'CSS 편집창' 맨아래에 '복사해분 버튼 코드'를 붙여넣기하여 'CSS 편집창'에 넣어 줍니다.

버튼을 만든 사이트에서 위에서 가리키는 코드를 복사합니다.

티스토리 글쓰기 창에서 'HTML'을 선택합니다.

그 다음 복사해둔 코드를 위 이미지에서 화살표를 가리키는 부분에 버튼에 표시될 글자를 넣어 줍니다.

추가로 <center> </center> 코드를 위와 같이 추가해주면 버튼이 가운데로 적용 됩니다.(이미지 참고)

아래 잘 적용된 모습을 확인 할 수 있습니다.

'CSS 편집창'에서 약간의 코드를 만져 주면 추가로 버튼의 모양을 꾸밀 수 있습니다.

다음 여러가지 꾸밀 수 있는 코드 방법중 몇 가지를 알아보겠습니다.

위 이미지에서 가리키는 기존의 'padding' 코드를 그대로 놔두면 버튼의 글자에 따라서 버튼의 양쪽 넓이가 줄었다가 늘었다가하는 것을 볼 수 있습니다.

반면 그냥 버튼의 크기를 고정하고 싶다면 (이미지 참고) 'padding' 기존의 패딩 값을 주석 처리하고 'width: 100%' 값을 추가해주면 위 사진과 같이 버튼의 크기가 고정 됩니다.

위 이미지에 코드가 작동하는 부분을 추가적으로 설명해 두었습니다. 각 코드를 수정하여 입맛대로 꾸밀 수 있습니다.

위 이미지에서 가리키고 있는 'color'코드가 원래는 버튼의 글자 색상인데요.

북클럽 스킨에서는 해당 색상을 변경해도 글자에 적용되지 않는 문제가 있습니다. 해당 문제를 해결하는 방법은 관련글에서 추가로 작성해 두었습니다.