HTML 버튼에 링크 만들기

1. <a> 및 <button> 태그를 사용하여 HTML에서 링크 역할을 하는 버튼 생성
2. button 태그의 onclick 속성을 사용하여 HTML에서 링크 역할을 하는 버튼 생성
3. <a> 및 <input> 태그를 사용하여 HTML에서 링크 역할을 하는 버튼 생성
4. HTML 양식을 사용하여 HTML에서 링크 역할을 하는 버튼 만들기

링크 역할을 하는 HTML 버튼을 만드는 방법을 설명합니다.

<a> 및 <button> 태그를 사용하여 HTML에서 링크 역할을 하는 버튼 생성

<button> 태그를 사용하여 HTML 버튼을 만들 수 있습니다. <button> 태그는 클릭 가능한 버튼을 정의합니다. 앵커 태그 <a>를 사용하여 하이퍼링크를 만듭니다. 한 페이지를 다른 페이지로 연결합니다. 앵커 태그 안에 <button> 태그를 중첩하여 링크 역할을 하는 버튼을 만들 수 있습니다. href 속성을 통해 링크 주소를 지정할 수 있습니다.

예를 들어 HTML 본문 내부에 앵커 요소를 만듭니다. 앵커 요소 내부에 href 속성을 작성하고 https://www.youtube.com URL을 지정합니다. 그런 다음 <button> 태그를 사용하여 버튼을 생성합니다. <button> 태그 안에 Youtube라는 텍스트를 씁니다. 이제 버튼 태그를 닫고 앵커 태그를 닫습니다.

아래 예제는 링크 역할을 하는 HTML 버튼을 만드는 과정을 보여줍니다. Youtube로 리디렉션되는 버튼이 생성됩니다.

예제 코드:

<a href="https://www.youtube.com">
<button>Youtube</button>
</a> 

button 태그의 onclick 속성을 사용하여 HTML에서 링크 역할을 하는 버튼 생성

버튼 태그 내 onclick 속성을 사용하여 HTML에서 링크 역할을 하는 버튼을 생성할 수도 있습니다. 이 속성은 요소를 마우스로 클릭하면 발생합니다. 마우스를 클릭하면 스크립트가 실행됩니다. 그러나 이 과정에서 먼저 버튼을 만든 다음 원하는 URL만 추가합니다. 우리는 또한 이 방법에서 약간의 JavaScript를 사용할 것입니다. window.location 객체를 사용하여 현재 페이지 주소를 가져와 새 페이지로 리디렉션합니다.

예를 들어 HTML 본문 내에서 처음에 <button> 태그를 만듭니다. 버튼 태그 내에서 onclick 속성을 사용하고 window.location.href로 설정합니다. 그런 다음 window.location.href를 사용하여 대상 URL https://www.facebook.com/을 지정합니다. 그런 다음 <button> 태그 사이에 Facebook이라는 텍스트를 작성합니다.

HTML에서 이벤트 속성의 일부인 onclick 속성을 사용했습니다. 이런 식으로 링크 역할을 하는 HTML 버튼을 만들 수 있습니다.

예제 코드:

<button onclick="window.location.href='https://www.facebook.com/'">Facebook</button>

<a> 및 <input> 태그를 사용하여 HTML에서 링크 역할을 하는 버튼 생성

<input> 태그를 사용하여 HTML 버튼을 만들 수 있습니다. <input> 태그는 <form> 태그 요소이기도 합니다. 사용자가 데이터를 입력할 수 있는 입력 필드를 지정합니다. type 속성을 사용하여 버튼을 만들고 button 값으로 지정할 수 있습니다. value 속성을 사용하여 버튼의 내용을 작성할 수 있습니다. 그런 다음 앵커 태그를 사용하여 <input> 태그를 래핑할 수 있습니다. 그러면 링크 역할을 하는 버튼이 생성됩니다.

예를 들어 앵커 태그를 작성하고 href 속성을 통해 그 안에 대상 URL을 지정합니다. URL을 https://www.facebook.com/으로 작성합니다. 그런 다음 <input> 태그를 작성하고 type 속성을 button으로 지정합니다. 그런 다음 value 속성에 Facebook 텍스트를 지정합니다. 앵커 태그를 닫습니다.

아래 예는 Facebook이라는 이름의 버튼을 생성합니다. 클릭하면 Facebook으로 리디렉션됩니다. 따라서 링크 역할을 하는 버튼을 만들 수 있습니다.

예제 코드:

<a href="https://www.facebook.com/">
<input type="button" value="Facebook">
</a>

HTML 양식을 사용하여 HTML에서 링크 역할을 하는 버튼 만들기

이 방법에서는 <form> 태그를 사용하여 링크 역할을 하는 버튼을 만듭니다. action 속성을 사용하여 목적지 URL을 지정합니다. method 속성은 양식 데이터를 보내는 방법을 지시합니다. 양식은 action 속성에 지정된 페이지로 전달됩니다. 양식 데이터를 제출할 때 유형 버튼을 제출로 설정할 수 있습니다.

예를 들어, HTML 본문 내에서 <form> 태그를 만들고 method 속성에 get을 사용합니다. 이제 action 속성 안에 원하는 URL을 지정하십시오. 그런 다음 <button> 요소를 사용하여 버튼을 만들고 type 속성을 submit으로 설정합니다. 그런 다음 버튼에 원하는 텍스트를 지정합니다. 그런 다음 <button> 태그를 닫고 <form> 태그를 닫습니다. 그런 다음 위에 열려 있는 나머지 태그를 모두 닫습니다.

예제 코드:

<form method="get" action="https://www.youtube.com/">
<button type="submit">Continue</button>
</form>