HTML - button

button tag(버튼 태그)는 버튼을 만들어준다.

<button>버튼<button>

버튼 배경색이랑 글자색은 CSS를 이용해서 변경을 시킬 수 있다.

<button style="background-color: red; color: white;">버튼</button>

또한 버튼에 id, class, name, value 속성을 줄 수도 있다. id랑 class 속성을 이용해서도 CSS를 적용 시킬 수 있다.

버튼은 언제 사용하면 될까?

가장 많이 사용이 되는 경우는 아무래도 아이디랑 비밀번호 기입 후 로그인 버튼 클릭해서 로그인하는 것 아닌가 싶다. 즉 버튼을 클릭해서 다음 동작이 일어나게 만든다.

서버에 저장하거나 통신을 하기 위해서 보통 form tag를 이용한다.
form tag 안에 input 태그랑 button tag가 들어간다.
button 대신 <input type="submit">으로도 가능하다.

대충 예를 들면 이렇다.

<form>
  <input type="text" id="name" name="name">
  <button>버튼</button>
</form>

버튼에는 type 속성을 적용 시킬 수 있다.
button 속성을 아무것도 넣지 않으면 submit으로 인식한다.

<button type="submit">
<button type="reset">
<button type="button">

type 속성에 reset을 넣었다. 이런 경우에는 input에 넣은 걸 reset 시켜준다.

type 속성에 button을 넣으면 submit이 되지 않는다. 자바스크립트로 무언가 이벤트 기능을 만들 때 적용하면 된다. 예: alert() method(경고창 함수)를 사용.

직접 하나씩 해보면 감이 조금씩 올 것이다.