데니스의 놀이터

안녕하세요. 후니입니다!

이번 포스팅에서는 HTML5의 <button>태그에 대해서 알아보겠습니다. 

<button>태그와 <button>태그 안에 들어가는 속성(Attribute)들도 많지만 한 개의 버튼을 우선 만들어보고 살펴보겠습니다.

다음은 결과 화면입니다.

<button>버튼 이름</button> 형태를 가지고 있으며 버튼 태그 사이에 버튼의 이름을 지정할 수 있습니다.

간단하게 버튼 한 개 만드는 방법을 알아봤고 이제부터는 <button>태그의 속성들을 살펴보겠습니다.

<button>태그의 type 속성과 속성 값

1. button : 클릭할 수 있는 기능

2. submit : 데이터를 전송할 수 있는 기능

3. reset : 데이터를 리셋하는 기능

<button>태그의 type속성에 들어갈 수 있는 속성 값들은 위처럼 총 세 가지가 있으며 다음 코드는 button, submit. reset을 사용했습니다. <form>태그나 모르는 태그들이 있을 경우엔 일단은 무시하고 진행해도 괜찮지만 이 참에 같이 공부하는걸 추천합니다.

코드를 직접 타이핑 후 실행해보면 <사진1.2>와 같은 결과가 나옵니다.

First name의 텍스트 박스에 값을 입력하고 Second name 텍스트 박스에 값을 입력 후 submit 속성 값을 사용한 Submit버튼을 누르면 다음 화면으로 넘어갑니다. 아직 다음 화면은 만들지 않아서 "파일을 찾을 수 없음"화면이 나오는게 정상입니다. 그리고 값을 입력 후 reset 속성 값을 사용한 Reset버튼을 누르면 입력한 값들이 사라지며 button 속성 값을 사용한 click버튼은 클릭할 수 있는 버튼으로 생성됩니다.