사용자의 상호작용을 위한 버튼을 만들자 HTML <button> 태그

BUTTON 태그란?

 

<button> 태그는 사용자가 클릭해서 이벤트를 발생시킬 수 있는 버튼을 만드는 태그입니다. 

 

사용법

<button>클릭하세요</button>

• button은 쌍으로 존재하는 태그입니다
• <button> </button> 사이에 text를 입력합니다

 

예시

See the Pen Untitled by 40's Programmer (@40sProgrammer) on CodePen.

간단하게 누를 수 있는 버튼을 만들었습니다.

 

BUTTON 태그의 다양한 속성

<button> 태그는 3가지 주요 속성을 지닙니다.

 

사용법

<button type="button" onclick="alert('Hello World!')>클릭하세요</button>
<button disabled>클릭안되는 버튼입니다</button>

• type은 버튼의 타입을 정합니다. 기본값은 "submit"입니다.
  • "submit": 폼을 제출하는 버튼으로 사용됩니다
  • "reset": 폼 내용을 리셋하는 버튼으로 사용됩니다
  • "button": 일반 버튼으로 사용됩니다
• onclick은 버튼이 클릭되었을 때 실행할 JavaScript 코드를 정합니다
• disabled는 버튼을 사용자가 클릭할 수 없게 제어합니다

 

예시

See the Pen button by 40's Programmer (@40sProgrammer) on CodePen.

 

위의 코드에서는 button 태그에 CSS 스타일을 적용했습니다.

 

예시

See the Pen button by 40's Programmer (@40sProgrammer) on CodePen.

 

버튼을 disabled 했습니다. 비교해보세요.