HTML <button>: 버튼 요소

HTML <button> 요소는 사용자가 마우스, 키보드, 손가락, 음성 및 기타 보조 기술로 활성화할 수 있는 상호작용형 요소입니다. 활성화하면 양식의 제출이나 대화상자를 닫는 등 프로그램 가능한 동작을 수행합니다.

버튼의 기본 스타일은 사용자 에이전트가 구동 중인 플랫폼의 버튼과 유사한 형태를 가지지만, CSS를 사용하면 원하는 대로 바꿀 수 있습니다.

<button type="button">즐겨찾기에 추가</button>

button {
  background: cornflowerblue;
  border: none;
  border-radius: 4px;
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1em;
  padding: 8px 20px;
}

button:hover {
  background: dodgerblue;
}

button:active {
  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

특성

전역 특성을 포함합니다.

command

이 버튼이 제어하는 요소에 수행할 동작을 지정합니다. 제어 대상 요소는 commandfor 특성으로 지정할 수 있습니다. 가능한 값은 다음과 같습니다.

show-modal

<dialog> 요소를 모달로 표시합니다. 대화상자가 이미 열려있는 경우 아무 동작도 하지 않습니다.

close

<dialog> 요소를 닫습니다. 대화상자가 이미 닫혀있는 경우 아무 동작도 하지 않습니다.

show-popover

팝오버를 표시합니다. 팝오버가 이미 표시된 경우 아무 동작도 하지 않습니다. 자세한 내용은 Popover API를 참고하세요.

hide-popover

팝오버를 숨깁니다. 팝오버가 이미 숨겨진 경우 아무 동작도 하지 않습니다. 자세한 내용은 Popover API를 참고하세요.

toggle-popover

팝오버의 표시/숨김 상태를 전환합니다. 자세한 내용은 Popover API를 참고하세요.

사용자 지정 값

두 개의 하이픈(--)으로 시작하는 사용자 지정 값을 설정할 경우, 제어 대상 요소에 CommandEvent를 송신합니다.

commandfor

<button>이 다른 상호작용 요소를 제어하도록 합니다. 제어 대상 요소의 id를 지정해야 합니다. 제어 동작은 command 특성으로 지정할 수 있습니다.

disabled

지정하면 사용자의 상호작용을 비활성화, 즉 버튼의 클릭과 포커스 획득을 막는 불리언 특성입니다.

form

이 버튼을 양식 소유자(<form> 요소)와 연결합니다. 같은 문서 상에 존재하는 <form>의 id 값을 지정하세요. 이 특성이 존재하지 않으면 <button>의 양식 소유자는 가장 가까운 조상 <form>이 됩니다.

form 특성을 사용하면 <button>이 <form>의 자손이 아니어도 연결할 수 있으며, form 특성이 가리키는 <form>이 조상 <form>보다 우선합니다.

formaction

버튼을 클릭했을 때 데이터를 제출할 URL을 지정합니다. 버튼의 양식 소유자에 지정한 action 특성보다 우선합니다. 양식 소유자가 없으면 아무 효과도 없습니다.

formenctype

버튼이 (양식 소유자가 존재하고, type의 값이 submit인) 제출용 버튼일 때, 제출할 데이터를 인코딩하는 방법을 지정합니다. 가능한 값은 다음과 같습니다.

• application/x-www-form-urlencoded: 기본값입니다.
• multipart/form-data: type이 file인 <input>을 제출할 때 사용합니다.
• text/plain: 디버깅 용도로 사용하는 값입니다. 실제 사용자가 제출하는 데이터의 인코딩에는 사용하지 말아야 합니다.

버튼의 양식 소유자에 지정한 enctype 특성보다 우선합니다.

formmethod

버튼이 (양식 소유자가 존재하고, type의 값이 submit인) 제출용 버튼일 때, 제출할 데이터를 전송할 HTTP 메서드를 지정합니다. 가능한 값은 다음과 같습니다.

• post: 양식의 데이터를 HTTP 요청의 본문에 넣어서 서버로 전송합니다. 로그인 키처럼 공개해선 안되는 정보를 포함해야 할 때 사용하세요.
• get: 양식의 데이터를 action URL 뒤의 쿼리 문자열로 붙여서 서버로 전송합니다. 검색 창처럼 양식이 유발하는 부수효과가 없을 때 사용하세요.
• dialog: 양식이 <dialog> 안에 있을 때, 양식을 제출하면 대화상자를 닫습니다.

버튼의 양식 소유자에 지정한 method 특성보다 우선합니다.

formnovalidate

버튼이 (양식 소유자가 존재하고, type의 값이 submit인) 제출용 버튼일 때, 제출 시 양식의 데이터를 검증하지 않음을 지정하는 불리언 특성입니다. 버튼의 양식 소유자에 지정한 novalidate 특성보다 우선합니다.

formtarget

버튼이 (양식 소유자가 존재하고, type의 값이 submit인) 제출용 버튼일 때, 제출 결과를 표시할 위치를 지정합니다. 가능한 값은 브라우징 맥락(탭, 창, <iframe>)의 이름입니다.

다음의 키워드는 특별한 뜻을 가지고 있습니다.

• _self (기본값): 결과를 현재 브라우징 맥락에 보여줍니다.
• _blank: 결과를 새롭게 생성한 이름 없는 브라우징 맥락에 보여줍니다.
• _parent: 현재 페이지가 프레임 안에 존재하는 경우, 결과를 현재 브라우징 맥락의 부모에 보여줍니다. 부모가 없으면 _self와 동일합니다.
• _top: 결과를 최상위 브라우징 맥락에 보여줍니다. 최상위 브라우징 맥락이란 현재 맥락의 조상 중 부모가 없는 맥락입니다. 현재 맥락이 부모를 가지지 않으면 _self와 동일합니다.

버튼의 양식 소유자에 지정한 target 특성보다 우선합니다.

name

버튼의 이름입니다. 양식을 제출할 때 버튼의 value와 쌍을 이뤄 데이터에 포함됩니다.

popovertarget

<button>을 팝오버 제어 버튼으로 지정합니다. 제어할 팝오버 요소의 id를 지정해야 합니다. Popover API를 참고하세요.

popovertargetaction

<button>이 제어하는 팝오버 요소에 대해 수행할 작업을 지정합니다. 가능한 값은 다음과 같습니다.

• hide: 팝오버 요소를 숨깁니다. 이미 숨겨진 팝오버 요소에 대해서는 아무런 효과가 없습니다.
• show: 팝오버 요소를 표시합니다. 이미 표시된 팝오버 요소에 대해서는 아무런 효과가 없습니다.
• toggle: 팝오버 요소의 숨김/표시 상태를 전환합니다. 팝오버 요소가 숨겨져 있으면 표시하고, 표시되어 있으면 숨깁니다. popovertargetaction 특성을 지정하지 않았을 때의 기본 값입니다.

type

버튼의 기본 동작입니다. 가능한 값은 다음과 같습니다.

• submit: 버튼이 양식의 데이터를 서버로 제출합니다. <form>과 연결된 버튼에 type을 지정하지 않았거나 유효하지 않은 값을 지정했을 때의 기본 값입니다.
• reset: <input type="reset">처럼, 클릭하면 자신이 속한 양식의 모든 컨트롤을 기본 값으로 초기화합니다. 초기화 여부를 따로 사용자에게 물어보지 않기 때문에 조심해야 합니다.
• button: 버튼이 기본 동작을 가지지 않습니다. 따라서 클릭해도 아무런 동작을 하지 않습니다. 대신, 클라이언트 사이드 스크립트에서 이벤트를 수신해서 원하는 동작을 하도록 설정할 수 있습니다.

value

버튼의 값입니다. 양식을 제출할 때 버튼의 name과 쌍을 이뤄 데이터에 포함됩니다.

참고

<input>과는 달리, <button>의 안에는 <i>, <br>, 심지어 <img> 등 HTML 콘텐츠를 넣을 수 있고, ::after와 ::before 의사 요소를 사용하는 복잡한 렌더링도 가능합니다.

버튼을 제출 용도로 추가하는 것이 아니면 type 특성을 button으로 설정하세요. 그렇지 않으면 의도하지 않은 데이터를 제출해서 비정상적인 요청을 보낸 후 비정상적인 응답을 받을 수 있고, 그 응답을 불러오려고 시도하는 과정에서 문서의 현재 상태가 유실될 수 있습니다.

접근성

아이콘 버튼

아이콘만 사용하는 버튼에는 접근 가능한 이름이 없습니다. 스크린 리더 등 보조 기술은 문서를 분석하고 접근성 트리를 생성할 때 접근 가능한 이름에 의존합니다.

아이콘 버튼에 접근 가능한 이름을 제공하려면 버튼의 기능을 간결하게 설명하는 텍스트를 <button> 안에 배치하세요.

<button type="button">
  <img src="/assets/icons/favorite.svg" aria-hidden />
  즐겨찾기에 추가
</button>

여러 CSS 속성을 조합하면 보조 기술은 읽을 수 있지만 시각적으로는 보이지 않는 텍스트를 만들 수 있습니다.

그러나, 보조 기술은 사용하지 않더라도 아이콘의 의미나 버튼의 용도에 익숙하지 않은 사용자들도 텍스트를 읽을 수 있다면 도움이 된다는 사실을 기억하세요. 특히 기술과 친숙하지 않거나, 문화권이 달라서 아이콘을 다르게 받아들일 수 있는 사용자에게 있어 보조 텍스트의 존재 유무는 큰 차이를 만듭니다.

크기와 간격

크기

버튼과 같은 대화형 요소는 상호작용하기 충분한 크기의 활성화 영역을 가져야 합니다. 운동조절 장애를 가진 사용자뿐만 아니라 터치 스크린처럼 정확하지 않은 입력 도구 사용자도 충분한 활성화 영역 크기에 도움을 받습니다. 최소 44x44의 CSS 픽셀 크기를 권고합니다.

간격

버튼을 포함한 대화형 요소 다수를 시각적으로 가까이 배치할 땐 서로를 분리하는 공간을 둬야 합니다. 운동조절 장애를 가진 사용자가 원하지 않는 요소와 상호작용하는 것을 방지할 수 있습니다.

ARIA 상태 정보

버튼의 상태를 설명하기 위한 올바른 ARIA 특성은 aria-checked나 aria-selected가 아닌 aria-pressed입니다. ARIA button 역할에서 더 알아보세요.

버튼 스타일

요소가 포커스를 받았을 때 나타나는 포커스 링은 제거하지 않는 게 제일 좋습니다. 하지만 버튼 스타일을 재정의해야 하는 경우 저시력 사용자가 포커스 위치를 인지할 수 있도록, 그리고 인지력 저하를 겪는 사용자가 포커스 상태를 이해할 수 있도록 충분한 대비를 확보해야 합니다.

:focus-visible 의사 클래스를 사용하면 키보드 포커스를 받은 <button>처럼, :focus 요소 중에서도 사용자 에이전트의 휴리스틱이 강조가 필요하다고 판단한 요소에만 스타일을 적용할 수 있습니다. 자세한 내용은 :focus vs. :focus-visible을 참고하세요.

Web Content Accessibility Guidelines (WCAG)를 만족하려면 본문 글씨는 4.5:1, 제목 등 큰 글씨는 3:1의 대비가 필요합니다. 글씨와 배경의 대비란 두 색의 휘도(luminosity)를 비교한 값입니다. 큰 글씨란 18.66px 이상의 굵은 텍스트, 또는 24px 이상의 글씨를 말합니다.

• WebAIM: Color Contrast Checker
• Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

명세

HTML Standard

브라우저 호환성