버튼제너레이터로 버튼만들기 HTML에서만

 

 

버튼 제너레이터 사이트에서 버튼 만들기

블로그 글쓰기의 가독성을 높이기 위해서는 여러 블로그 글쓰기의 꾸미기를 익혀야 한다.
버튼 만들기 코드를 CSS에 붙여 넣기를 두 번 시도는 해봤는데 잘 안돼서

그냥 HTML에서 코드를 붙여넣기 하여서 한다. 시간이 좀 들어도 여러 색깔로 바꿀 수도 있고

유튜브에서 티스토리 버튼 넣기로 검색하여 맠코딩님 영상 하나 보고 댓글 Q & A보고 하면서  
HTML에서만으로 버튼 만들기를 하고 있다.

 

티스토리, 워드프레스 블로그에 버튼 쉽게 만들어 넣는 법 맠코딩TV

 

 

 

 

HTML에서만 버튼 코드 넣어 만들기

 

HTML에서만 버튼 만들기

 

버튼제너레이터

 

 

• 1. 위 사진의 맨 우측 상단 1번 빨강 네모 상자의

<a href="#" class="myButton">olive</a>

을 HTML 창에 원하는 위치에 붙여 넣기 하고

 

 

• 2. 앞뒤로 div center를 넣어준다. ⬇️⬇️⬇️

<div>

<center>

<a href="#" class="myButton">olive</a>

</center>

</div>

 

 

• 3. herf="#'에서 #에 버튼 만들기로 열고 싶은 'https://주소'를 복사넣기 하여 넣어준다.

그리고 위 사진의 2번 파랑 네모 상자의 코드를 

style="#" 입력하여 class 글자 앞이든 <a                 > 이 부분 어디든 아무 곳에나 넣어준다.

 

그런데 보라색 형관펜 부분에서 초록색 영문자랑 { }이 괄호는 빼주고 복붙해 준다.

 

 

그리고 새창에서 열리도록 하기 위해서 <a          > 이 부분 어디든 아무 곳에나 

target="_blank" rel="noopener noreferrer"

⬆️⬆️⬆️을 넣어 준다.

 

그래야지 새창에서 열린다.

(이것은 방금전 구글링하여 나도 알아냈다.

기존에 위 타켓 렐 안 넣은 버튼넣기 코드 찾아서 노가다 해야한다.)

 

 

• 4. olive라고 되어 있는 곳에 버튼에 넣을 글씨를 써 준다.

버튼 제너레이터의 버튼 위 마다 CSS가 적혀있어 찾아보니

CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드라고 한다.

 

지금은 초자라서 버튼만들기 HTML에서만 코드넣기하여 하는 방법 밖에 모르나 

CSS로도 완벽히 제대로 숙지하게 되면 또 포스팅을 해야겠다.

 

로그니즘님 가르침대로 양파 벗기듯 꼬리에 꼬리를 무는, 오가닉님 말처럼 그로쓰해킹이 성장의 밑거름이구나.