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

버튼 만들기

버튼은 사용자가 웹 페이지에서 특정 동작을 수행할 수 있도록 하는 요소입니다. 버튼을 만들기 위해 주로 사용되는 태그는 button 태그와 input 태그의 type 속성을 "button"으로 설정한 것입니다.

button 태그

<button>내용</button>

button 태그는 태그 사이의 내용으로 버튼의 텍스트를 지정합니다.

input 태그 (type = "button")

<input type="button" value="내용">

input 태그는 type 속성을 "button"으로 지정하여 버튼을 생성합니다. value 속성은 버튼의 텍스트를 지정합니다.

버튼 활용하기

버튼은 클릭, 마우스 오버 등의 이벤트에 따라 다양한 동작을 수행할 수 있습니다. 이를 위해 자바스크립트와 함께 사용할 수 있습니다.

클릭 이벤트

<button onclick="alert('클릭 이벤트')">클릭</button>

버튼을 클릭하면 onclick 속성에 지정된 자바스크립트 코드가 실행됩니다. 위 예시에서는 클릭 시 경고창이 뜨도록 설정되어 있습니다.

마우스 오버 이벤트

<button onmouseover="changeColor(this)">오버</button>

<script>
function changeColor(element) {
  element.style.backgroundColor = "yellow";
}
</script>

버튼에 마우스를 올리면 onmouseover 속성에 지정된 자바스크립트 함수가 실행됩니다. 위 예시에서는 버튼의 배경색을 노란색으로 변경하는 함수가 호출됩니다.

마무리

버튼을 만들기 위해 button 태그와 input 태그의 type 속성을 사용할 수 있습니다. 이를 통해 사용자가 웹 페이지에서 원하는 동작을 쉽게 수행할 수 있습니다. 버튼에는 다양한 이벤트를 추가하여 원하는 동작을 연결할 수 있으며, 이를 통해 더욱 다양하고 유연한 사용자 경험을 구현할 수 있습니다.