버튼 만들기 button 태그, (input type = "button")

버튼 만들기

버튼을 만들기 위해 HTML에서는 button 태그나 input 태그의 type 속성을 이용할 수 있습니다.

button 태그

button 태그는 버튼을 생성하는 데 사용되며, 버튼 내부에 텍스트나 아이콘 등 다양한 내용을 넣을 수 있습니다. 다음은 button 태그의 일반적인 사용 방법입니다.

<button>버튼</button>

버튼에 내용을 추가하고 싶다면 태그 내부에 원하는 내용을 추가하면 됩니다.

<button>
  <i class="fas fa-plus"></i>
  추가
</button>

위의 예제는 Font Awesome 아이콘을 이용해 "추가"라는 텍스트와 함께 플러스 아이콘을 버튼 내에 넣는 예시입니다.

input 태그 (type="button")

input 태그를 사용해서도 버튼을 만들 수 있습니다. type 속성을 "button"으로 설정하면 버튼이 생성됩니다.

<input type="button" value="버튼">

버튼 내용을 설정하기 위해 value 속성을 사용합니다. 위의 예제는 "버튼"이라는 텍스트를 버튼 내에 넣는 예시입니다.

버튼 이벤트 처리

HTML 버튼에 이벤트를 추가하기 위해서는 JavaScript를 사용해야 합니다. addEventListener 메서드를 사용하여 버튼에 클릭 이벤트를 추가할 수 있습니다.

<button id="myButton">버튼</button>

<script>
  const button = document.getElementById('myButton');
  button.addEventListener('click', function() {
    alert('버튼이 클릭되었습니다.');
  });
</script>

위의 예제는 버튼이 클릭되었을 때 "버튼이 클릭되었습니다."라는 경고창을 띄우는 것을 보여줍니다.

버튼을 누르면 호출할 함수를 직접 지정하려면 다음과 같은 방법을 사용할 수 있습니다.

<button onclick="myFunction()">버튼</button>

<script>
  function myFunction() {
    alert('버튼이 클릭되었습니다.');
  }
</script>

위의 예제는 onclick 속성을 사용하여 버튼 클릭 시 myFunction 함수를 호출하는 예시입니다. 함수 내에서 원하는 동작을 정의할 수 있습니다.

위의 예제에서는 JavaScript를 사용했지만, 이벤트 처리에는 다양한 방법이 있으니 자신에게 가장 편한 방식을 선택하면 됩니다.

이렇게해서 버튼을 생성하고 원하는 동작을 할당하는 방법을 알아봤습니다. 이를 응용하여 다양한 버튼을 만들고 원하는 동작을 연결해보세요!

yynt

버튼 만들기 button 태그, (input type = "button")