티스토리 링크버튼 수정하는 방법 정리

티스토리 링크버튼 수정하는 방법을 알려드립니다.

지난번 엄청나게 간단한 방법을 안내드렸는데 '그래도 너무 똑같은 건 싫다, 색도 좀 바꾸고 싶고 모양도 좀 달랐으면 좋겠다 ' 하시는 분들도 계실 겁니다. 그래서 오늘은 지난번 알려드린 html 서식에서 어느 부분을 어떻게 변경하면 디자인이 달라지는 알려드리도록 하겠습니다.

👉🏻지난번 글을 안 보셨다면 아래를 클릭해 주세요. 👇

티스토리 링크버튼 1분만에 초간단 만드는 방법

티스토리 링크버튼 수정

📄 목차
▶티스토리 링크버튼 수정하는 법
▶ 디자인 수정 해보기

티스토리 링크버튼 수정하는 법

▶아래는 지난번 제가 예시로 보여 드렸던 모양입니다. (코드는 아래 첨부파일에 있어요 )

링크버튼 코드.txt

0.00MB

링크버튼 서식

✅위의 메모장 첨부파일을 지난번에 링크버튼 만드는 법을 보신 분이라면 서식으로 저장을 해두셨을 텐데요, html모드로 들어가면 바로 이렇게 생긴 영어인 듯 영어 아닌 영어 같은 html 이 나옵니다. 제가 노란 줄 쳐놓은 것은 여러분들의 취향에 맞게 색과 글씨 크기 등을 변경할 수 있습니다. (수정은 html 모드에서만 하실 수 있습니다.)

▶backgound-color: 버튼 상자의 배경색을 지칭합니다. #003f74가 지금 저 남색(정확한 남색은 아니지만)같은 배경색을 지칭하는 숫자코드인데요, 다른 색으로 변경하시고 싶으시다면 다른 다양한 색들의 숫자코드를 확인하실 수 있는 사이트를 알려드립니다.

💡아래 사이트로 이동하시면 파스텔톤의 색부터 정말 다양한 색들과 어울리는 색의 조합까지 팔렛트처럼 만들어서 보여주고 있어요. 원하는 색에 마우스를 갖다 대시면 #과 함께 숫자와 영어조합의 코드가 나올텐데 그걸 클릭하시면 복사가 됩니다. 그걸 저 서식에 넣어주시면 됩니다.

Color Palettes for Designers and Artists - Color Hunt

컬러헌트 사용법

▶font-size: 글씨의 사이즈로 상자 안의 글씨크기를 조정하실 수 있습니다. html모드에서 숫자를 조정하시고 기본모드로 가서 변경된 크기를 확인하시면서 마음에 드는 크기로 정하시면 됩니다.

▶color: 글씨의 색깔입니다. 만약에 배경색을 밝은 색으로 선택하셨는데 글씨의 색은 위에서 처럼 흰색으로 하시면 눈에 잘 안 띄겠죠? (#ffffff는 흰색입니다. ) 그럼 글씨 색도 위에서 설명드린 사이트에서 어울리는 색조합 판단하셔서 색깔코드 가져오시면 됩니다.

▶border: 테두리 입니다. 지금은 0으로 되어있어서 테두리가 안 보이는데요 숫자를 높일수록 테두리의 굵기는 진해집니다.

디자인 수정 해보기

 

위의 버튼은 이렇게 만들어졌습니다.

---

어떤가요? 해보시니 별거 아니죠? 이렇게 다양한 색깔의 조합으로 클릭률을 높이는 나만의 버튼으로 만들어 보시는 것도 좋을 것 같습니다.

 

🎈티스토리 블로그 꾸미는 것에 관심있으시다면 아래글들도 읽어보세요.

 

티스토리 글씨체 변경하는 법

티스토리 글 제목 배경 이미지 없애는 법