HTML 버튼 바로가기 태그 만드는 법

 

티스토리와 같은 HTML 문서에 클릭할 수 있는 버튼이 필요하면 버튼박스 태그를 사용합니다. 버튼태그는 HTML에서 버튼 모양으로 표시되는데, 해당 링크나 이동시킬 수 있는 홈페이지 또는 웹페이지 영역으로 사용자를 쉽게 이동시킬 수 있습니다.   

 

HTML 버튼 박스 

 

예시는 버튼 박스를 클릭하면 사용자에게 편리한 링크를 제공하는데 새로운 페이지에서 열리는 버튼을 만들 수 있습니다. HTML5에서 button 태그에 추가된 속성과 속성값이 있는데, 그중에 hyperlink(하이퍼링크)처럼 페이지를 이동하고 페이지를 설정할 수 있는 formaction속성과 속성값이 있습니다.

종류	설명
formaction	form 데이터가 서버로 제출될 때 도착을 URL을 입력 type 속성이 submit일 때 사용할 수 있습니다.
formtarget	form 데이터를 어디에 표시할지 설정 속성값으로 _blank, _self, _parent, _top, 프레임 이름으로 사용할 수 있습니다. target과 비슷합니다.

 

버튼 태그 

1. <form> </form> 태그 사이에 <button> 태그를 입력합니다.
2. formaction 속성에 보낼 주소를 속성값으로 입력합니다. 
3. formtarget 속성에 속성갑으로 _blank를 입력합니다.
4. 버튼 제목을 입력하고 끝나는 태그 </button>로 마무리합니다. 

 

버튼 제목

버튼 박스 속에 제목은 사용자에게 이동시킬 수 있는 홈페이지 URL 주소나 온라인 어필리에이트 링크를 박스에 삽입하고자 한다면, 예를 들어 쿠팡 홈페이지 주소를 입력합니다. 

 

[예시]

• button formaction="사이트 URL 또는 링크 페이지 주소"
• 버튼 제목= "쿠팡 사이트로 이동" 또는 "바로가기" "제품 보러 가기" 등 제목을 입력합니다. 

<form><button formaction="https://www.coupang.com/" formtarget="_blank" type="submit"> 상품 보러 가기 </button></form>

 

[적용]

• 비주얼 스튜디오 코드에서 마우스 오른쪽 버튼을 클릭한 다음 |Open with live server|를 실행합니다.
• 티스토리 HTML에 적용하거나 워드프레스 HTML에 적용합니다. 

 

[테스트]

클릭을 하면 보낼 주소로 이동합니다.