path: root/files/ko/web/html/element/input/button/index.html

---
title: <input type="button">
slug: Web/HTML/Element/Input/button
tags:
  - Element
  - Forms
  - HTML
  - HTML forms
  - Input Element
  - Input Type
translation_of: Web/HTML/Element/input/button
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong><code>button</code></strong> 유형의 {{htmlelement("input")}} 요소는 단순한 푸시 버튼으로 렌더링 됩니다. 이벤트 처리기(주로 {{event("click")}} 이벤트)를 부착하면, 사용자 지정 기능을 웹 페이지 어느 곳에나 제공할 수 있습니다. </span></p>

<div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-standard")}}</div>

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

<div class="note">
<p><strong>참고</strong>:  <code>&lt;input&gt;</code> 요소의 <code>button</code> 유형도 전혀 틀리지 않은 방법이지만, 이후에 생긴 {{HTMLElement("button")}} 요소를 사용하는 것이 선호되는 방식입니다. <code>&lt;button&gt;</code>의 레이블 텍스트는 여는 태그와 닫는 태그 사이에 넣기 때문에, 심지어 이미지까지도 포함할 수 있습니다.</p>
</div>

<table class="properties">
 <tbody>
  <tr>
   <td><strong>{{anch("값")}}</strong></td>
   <td>버튼의 레이블로 사용할 {{domxref("DOMString")}}</td>
  </tr>
  <tr>
   <td>이벤트</td>
   <td>{{event("click")}}</td>
  </tr>
  <tr>
   <td>지원하는 공용 특성</td>
   <td>{{htmlattrxref("type", "input")}}, {{htmlattrxref("value", "input")}}</td>
  </tr>
  <tr>
   <td><strong>IDL 특성</strong></td>
   <td><code>value</code></td>
  </tr>
  <tr>
   <td>메서드</td>
   <td>없음</td>
  </tr>
 </tbody>
</table>

<h2 id="값">값</h2>

<p><code>&lt;input type="button"&gt;</code> 요소의 {{htmlattrxref("value", "input")}} 특성은 버튼의 레이블로 사용할 {{domxref("DOMString")}}을 담습니다.</p>

<div id="summary-example3">
<pre class="brush: html">&lt;input type="button" value="클릭하세요"&gt;</pre>
</div>

<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p>

<p><code>value</code>를 지정하지 않으면 빈 버튼이 됩니다.</p>

<div id="summary-example1">
<pre class="brush: html">&lt;input type="button"&gt;</pre>
</div>

<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p>

<h2 id="버튼_사용하기">버튼 사용하기</h2>

<p><code>&lt;input type="button"&gt;</code> 요소는 아무런 기본 기능도 가지지 않습니다. (유사한 요소인 <code><a href="/ko/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code>과 <code><a href="/ko/docs/Web/HTML/Element/input/reset">&lt;input type="reset"&gt;</a></code>은 각각 양식을 제출하고 초기화할 수 있습니다.) 버튼이 뭐라도 하게 만들려면 JavaScript 코드를 작성해야 합니다.</p>

<h3 id="간단한_버튼">간단한 버튼</h3>

<p>{{event("click")}} 이벤트 처리기를 부착한 간단한 버튼을 통해 기계를 켜고 끄는 기능을 만드는 것으로 시작해보겠습니다. (기계라고는 하지만, 그냥 버튼의 <code>value</code>와 문단 내용을 바꾸는 것입니다.)</p>

<pre class="brush: html">&lt;form&gt;
  &lt;input type="button" value="기계 켜기"&gt;
&lt;/form&gt;
&lt;p&gt;기계가 멈췄습니다.&lt;/p&gt;</pre>

<pre class="brush: js">var btn = document.querySelector('input');
var txt = document.querySelector('p');

btn.addEventListener('click', updateBtn);

function updateBtn() {
  if (btn.value === '기계 켜기') {
    btn.value = '기계 끄기';
    txt.textContent = '기계가 켜졌습니다!';
  } else {
    btn.value = '기계 켜기';
    txt.textContent = '기계가 멈췄습니다.';
  }
}</pre>

<p>위의 스크립트는 DOM의 <code>&lt;input&gt;</code>을 나타내는 {{domxref("HTMLInputElement")}} 객체의 참조를 획득해 변수 <code>button</code>에 저장합니다. 그 후 {{domxref("EventTarget.addEventListener", "addEventListener()")}}를 사용해, {{event("click")}} 이벤트가 발생했을 때 실행할 함수를 생성합니다.</p>

<p>{{EmbedLiveSample("간단한_버튼", 650, 100)}}</p>

<h3 id="버튼에_키보드_단축키_추가하기">버튼에 키보드 단축키 추가하기</h3>

<p>접근 키라고도 불리는 키보드 단축키는 사용자가 키보드의 키 혹은 키 조합을 통해 버튼을 누를 수 있는 방법을 제공합니다. 단축키를 추가하는 법은, 다른 {{htmlelement("input")}}과 마찬가지로, {{htmlattrxref("accesskey")}} 전역 특성을 추가하는 것입니다.</p>

<p>이번 예제에서는 이전 예제에 더해 <kbd>s</kbd> 키를 접근 키로 지정합니다. (브라우저/운영체제에 따라 특정 조합키를 같이 눌러야 할 수도 있습니다. <code><a href="/ko/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code> 문서를 방문해 조합키 목록을 확인하세요.)</p>

<div id="accesskey-example1">
<pre class="brush: html">&lt;form&gt;
  &lt;input type="button" value="기계 켜기" accesskey="s"&gt;
&lt;/form&gt;
&lt;p&gt;기계가 멈췄습니다.&lt;/p&gt;
</pre>
</div>

<div class="hidden">
<pre class="brush: js">var btn = document.querySelector('input');
var txt = document.querySelector('p');

btn.addEventListener('click', updateBtn);

function updateBtn() {
  if (btn.value === '기계 켜기') {
    btn.value = '기계 끄기';
    txt.textContent = '기계가 켜졌습니다!';
  } else {
    btn.value = '기계 켜기';
    txt.textContent = '기계가 멈췄습니다.';
  }
}</pre>
</div>

<p>{{EmbedLiveSample("버튼에_키보드_단축키_추가하기", 650, 100)}}</p>

<div class="note">
<p><strong>참고</strong>: 위 예제의 문제는, 사용자 입장에선 어떤 단축키가 있는지 알 수도 없다는 것입니다! 실제 웹 사이트에서는, 쉽게 접근 가능한 곳에 놓인 링크로 단축키 정보를 설명하는 문서를 가리키는 등 사이트 디자인을 방해하지 않는 선에서 단축키 정보를 제공해야 할 것입니다.</p>
</div>

<h3 id="버튼_활성화와_비활성화">버튼 활성화와 비활성화</h3>

<p>버튼을 비활성화하려면 간단히 {{htmlattrxref("disabled")}} 전역 특성을 지정하는 것으로 충분합니다.</p>

<div id="disable-example1">
<pre class="brush: html">&lt;input type="button" value="Disable me" disabled&gt;</pre>
</div>

<p>런타임에서 바꿀 땐 요소의 <code>disabled</code> 속성에 <code>true</code>나 <code>false</code>를 설정하면 끝입니다. 이번 예제의 버튼은 활성화 상태지만, 누르는 순간 <code>btn.disabled = true</code>를 통해 비활성화합니다. 그 후, {{domxref("WindowTimers.setTimeout","setTimeout()")}} 함수를 통해 2초 후 다시 활성화 상태로 되돌립니다.</p>

<div class="hidden">
<h6 id="Hidden_code_1">Hidden code 1</h6>

<pre class="brush: html">&lt;input type="button" value="활성"&gt;</pre>

<pre class="brush: js">var btn = document.querySelector('input');

btn.addEventListener('click', disableBtn);

function disableBtn() {
  btn.disabled = true;
  btn.value = '비활성';
  window.setTimeout(function() {
    btn.disabled = false;
    btn.value = '활성';
  }, 2000);
}</pre>
</div>

<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p>

<p><code>disabled</code> 특성을 지정하지 않은 경우 부모 요소의 <code>disabled</code>를 상속합니다. 이 점을 이용하면, 여러 개의 요소를 {{HTMLElement("fieldset")}} 등 부모 요소로 감싸고, 그 부모의 <code>disabled</code> 를 사용해 한꺼번에 상태를 통제할 수 있습니다.</p>

<p>다음 예제로 한 번에 비활성화하는 예제를 볼 수 있습니다. 이전 예제와 거의 똑같지만, 다른 점은 <code>disabled</code> 특성을 <code>&lt;fieldset&gt;</code>에 설정한다는 점입니다. 1번 버튼을 눌러보세요. 모든 버튼이 비활성화되고, 2초 후 활성화됩니다.</p>

<div class="hidden">
<h6 id="Hidden_code_2">Hidden code 2</h6>

<pre class="brush: html">&lt;fieldset&gt;
  &lt;legend&gt;Button group&lt;/legend&gt;
  &lt;input type="button" value="Button 1"&gt;
  &lt;input type="button" value="Button 2"&gt;
  &lt;input type="button" value="Button 3"&gt;
&lt;/fieldset&gt;</pre>

<pre class="brush: js">var btn = document.querySelector('input');
var fieldset = document.querySelector('fieldset');

btn.addEventListener('click', disableBtn);

function disableBtn() {
  fieldset.disabled = true;
  window.setTimeout(function() {
    fieldset.disabled = false;
  }, 2000);
}</pre>
</div>

<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p>

<h2 id="유효성_검사">유효성 검사</h2>

<p>버튼은 제한할 값이 없으므로 유효성 검사의 대상이 아닙니다.</p>

<h2 id="예제">예제</h2>

<p>아래 예제는 {{htmlelement("canvas")}} 요소와 CSS(분량 조절을 위해 생략), JavaScript를 사용해 만든 매우 단순한 그림 그리기 앱입니다. 위쪽 두 컨트롤은 색과 펜 크기를 조절할 때 사용하고, 버튼은 클릭하면 캔버스의 그림을 모두 지우는 함수를 호출합니다.</p>

<pre class="brush: html">&lt;div class="toolbar"&gt;
  &lt;input type="color" aria-label="펜 색상"&gt;
  &lt;input type="range" min="2" max="50" value="30" aria-label="펜 크기"&gt;&lt;span class="output"&gt;30&lt;/span&gt;
  &lt;input type="button" value="캔버스 지우기"&gt;
&lt;/div&gt;

&lt;canvas class="myCanvas"&gt;
  &lt;p&gt;Add suitable fallback here.&lt;/p&gt;
&lt;/canvas&gt;</pre>

<div class="hidden">
<pre class="brush: css">body {
  margin: 0;
  overflow: hidden;
  background: #ccc;
}

.toolbar {
  width: 150px;
  height: 75px;
  background: #ccc;
  padding: 5px;
}

input[type="color"], input[type="button"] {
  width: 90%;
  margin: 0 auto;
  display: block;
}

input[type="range"] {
  width: 70%;
}

 span {
   position: relative;
   bottom: 5px;
 }</pre>
</div>

<pre class="brush: js">var canvas = document.querySelector('.myCanvas');
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight-85;
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0,0,width,height);

var colorPicker = document.querySelector('input[type="color"]');
var sizePicker = document.querySelector('input[type="range"]');
var output = document.querySelector('.output');
var clearBtn = document.querySelector('input[type="button"]');

// covert degrees to radians
function degToRad(degrees) {
  return degrees * Math.PI / 180;
};

// update sizepicker output value

sizePicker.oninput = function() {
  output.textContent = sizePicker.value;
}

// store mouse pointer coordinates, and whether the button is pressed
var curX;
var curY;
var pressed = false;

// update mouse pointer coordinates
document.onmousemove = function(e) {
  curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
  curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}

canvas.onmousedown = function() {
  pressed = true;
};

canvas.onmouseup = function() {
  pressed = false;
}

clearBtn.onclick = function() {
  ctx.fillStyle = 'rgb(0,0,0)';
  ctx.fillRect(0,0,width,height);
}

function draw() {
  if(pressed) {
    ctx.fillStyle = colorPicker.value;
    ctx.beginPath();
    ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);
    ctx.fill();
  }

  requestAnimationFrame(draw);
}

draw();</pre>

<p>{{EmbedLiveSample("예제", '100%', 600)}}</p>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comments</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '&lt;input type="button"&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '&lt;input type="button"&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("html.elements.input.input-button")}}</p>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li>{{HTMLElement("input")}} 요소와 그 인터페이스 {{domxref("HTMLInputElement")}}.</li>
 <li>보다 현대적인 {{HTMLElement("button")}} 요소.</li>
</ul>