본문 바로가기
소소한 일상 정리/유튜브 | 블로그 | SNS

티스토리 블로그에 이미지 없이 HTML 사용으로 Button 만들기

by 코코쥬안 cocojuan 2023. 1. 13.

HTML | 티스토리 블로그에 기본 Button 만들기

 

 

▣ 목록 (LIST) ▣

1. HTML BUTTON TAG 사용법 

2. Cocojuan 블로그에 사용할 버튼 만들기

 

 

 


 

1. HTML BUTTON TAG 사용법 

  (1) 기본구조 | <button> </button>

  (2) 상세설명

   • 높이 height: 100px;

   •  배경색상 background-color: skyblue;

   •  모서리 라운드 크기 border-radius: 25px;

   •  글자크기 font-size: 25px;

   •  글자 찐하게 나오게 하기 font-weight: bold;

   •  글자색상 color: white;

   •  버튼의 글자 간격
     -  상황에 맞게 marin: auto;
     - 오른쪽에서 간격 두기 margin-right:=5px;
     - 왼쪽에서 간격 두기 margin-left:=5px;

 

 

 

 

2. Cocojuan 블로그에 사용할 버튼 만들기

  (1) 버튼 만들기

<p> <div align="center"><button style="height: 40px; background-color: skyblue; border-radius: 20px; font-weight: bold; color: white; margin: auto;" type="button">Cocojuan Button Test</button></div></p>

 

  (2) 사용법: 더블 클릭한 후 글자 변경, 상단에 링크 버튼 클릭해 링크 사용하기

 

 

 

이상으로

티스토리 블로그에 이미지 없이 HTML 사용해 버튼 만드는 방법에 대해 알아보았습니다.

 

 

 

 

 

댓글