<button>: 버튼 요소
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
HTML <button>
요소는 클릭 가능한 버튼을 나타냅니다. 버튼은 양식 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다. 기본값의 HTML 버튼은 사용자 에이전트의 호스트 플랫폼과 비슷한 디자인을 따라가지만, 외형은 CSS로 변경할 수 있습니다.
시도해보기
콘텐츠 카테고리 | 플로우 콘텐츠, 구문 콘텐츠, 대화형 콘텐츠, 양식 관련 콘텐츠(나열됨, 레이블 가능, 제출 가능), 뚜렷한 콘텐츠. |
---|---|
가능한 콘텐츠 | 대화형 콘텐츠를 제외한 구문 콘텐츠. |
태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
암시적 ARIA 역할 | button |
가능한 ARIA 역할 |
checkbox , link ,
menuitem ,
menuitemcheckbox ,
menuitemradio , radio ,
switch , tab
|
DOM 인터페이스 | HTMLButtonElement |
특성
이 요소는 전역 특성을 포함합니다.
autofocus
-
페이지 로드 후, 이 버튼에 포커스가 위치해야 하는지 나타냅니다. 문서 내에서 하나의 요소만
autofocus
특성을 가질 수 있습니다. autocomplete
비표준-
This attribute on a
<button>
is nonstandard and Firefox-specific. Unlike other browsers, Firefox persists the dynamic disabled state of a<button>
across page loads. Settingautocomplete="off"
disables this feature; see Firefox bug 654072. disabled
-
버튼과 사용자의 상호작용, 즉 누르거나 클릭하는 것을 막습니다.
Firefox, unlike other browsers, persist the dynamic disabled state of a
<button>
across page loads. Use theautocomplete
attribute to control this feature. form
-
버튼과 연결할
<form>
요소("양식 소유자"). 같은 문서에 존재하는<form>
요소의id
특성 값을 사용해야 합니다.form
특성을 지정하지 않았으나 조상 중<form>
요소가 존재하면 해당<form>
과 연결됩니다.form
특성을 사용하면 버튼을<form>
요소에 넣지 않고도 연결할 수 있고, 조상 중<form>
이 있더라도 소유자를 재정의할 수 있습니다. formaction
-
<button>
이 제출 버튼인 경우, 제출한 정보를 처리할 URL. 지정한 경우, 버튼의 양식 소유자가 가진action
특성보다 우선합니다. 양식 소유자가 존재하지 않으면 영향을 주지 않습니다. formenctype
-
<button>
이 제출 버튼인 경우,formenctype
특성은 양식을 서버로 제출할 때 사용할 양식 데이터 인코딩을 지정합니다. 가능한 값은 다음과 같습니다.application/x-www-form-urlencoded
: 기본값.multipart/form-data
:type
특성이file
인<input>
이 존재하는 양식에서 사용하세요.text/plain
: 디버깅 전용으로 명세에 추가된 값입니다. 실제 양식 제출 시 사용해선 안됩니다.
지정한 경우, 버튼의 양식 소유자가 가진
enctype
특성보다 우선합니다. formmethod
-
<button>
이 제출 버튼인 경우,formmethod
특성은 양식을 서버로 제출할 때 사용할 HTTP 메서드를 지정합니다. 가능한 값은 다음과 같습니다.post
: 양식의 데이터를 HTTP 요청 본문에 넣습니다. 비밀번호처럼, 양식 데이터 중 공개하지 않아야 하는 항목이 있으면 사용하세요.get
: 양식action
URL 뒤에?
를 추가한 후 양식 데이터를 덧붙입니다. 검색 양식처럼, 양식이 사이드 이펙트를 갖지 않을 때 사용하세요.
지정한 경우, 버튼의 양식 소유자가 가진
method
특성보다 우선합니다. formnovalidate
-
<button>
이 제출 버튼인 경우,formnovalidate
특성은 양식을 제출할 때 유효성 검사를 하지 않겠다는 것을 지정합니다. 지정한 경우, 버튼의 양식 소유자가 가진novalidate
특성보다 우선합니다. formtarget
-
<button>
이 제출 버튼인 경우,formtarget
특성에는 양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름을 사용할 수 있습니다. 가능한 값은 브라우징 맥락(탭, 창,<iframe>
)의 이름 또는 키워드입니다. 지정한 경우, 버튼의 양식 소유자가 가진target
특성보다 우선합니다. 다음 키워드는 특별한 뜻을 가지고 있습니다._self
: 응답을 현재 브라우징 맥락에 표시합니다. 기본값._blank
: 응답을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다._parent
: 응답을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면_self
와 동일하게 행동합니다._top
: 응답을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면_self
와 동일하게 행동합니다.
name
-
버튼의 이름. 제출할 때, 버튼의
value
특성과 함께 양식 데이터의 일부를 구성합니다. type
-
버튼의 행동 방식. 가능한 값은 다음과 같습니다.
submit
: 버튼이 서버로 양식 데이터를 제출합니다. 지정하지 않은 경우 기본값이며, 유효하지 않은 값일 때도 사용합니다.reset
:<input type="reset">
처럼, 모든 컨트롤을 초깃값으로 되돌립니다.button
: 기본 행동이 없으며 클릭했을 때 아무것도 하지 않습니다. 클라이언트측 스크립트와 연결할 수 있습니다.
value
-
버튼의 초깃값. 제출할 때, 버튼의
value
특성과 함께 양식 데이터의 일부를 구성합니다.
참고
<button>
요소는 <input>
요소보다 스타일을 적용하기 훨씬 수월합니다. <input>
은 value
특성에 텍스트 값밖에 지정할 수 없지만, <button>
은 내부 HTML 콘텐츠(<em>
, **
, 심지어 <img>
도)에 더해 ::after
와 ::before
의사 요소를 사용하는 복잡한 렌더링도 가능합니다.
양식 제출용 버튼이 아니라면 type
특성을 button
으로 지정하는걸 잊지 마세요. 기본값에서는 버튼을 눌렀을 때 양식 데이터를 제출하고, (존재하지 않는) 응답을 불러오려고 시도하는 과정에서 문서의 현재 상태가 사라질 수 있습니다.
예제
<button name="button">눌러보세요</button>
접근성 고려사항
아이콘 버튼
아이콘만 사용해 기능을 표현하는 버튼은 접근 가능한 이름을 갖지 않습니다. 접근 가능한 이름은 스크린 리더 등 접근성 보조 기술이 문서를 분석하고 접근성 트리를 생성할 때 사용할 수 있는 프로그램 훅을 제공합니다. 그 후 보조 기술이 페이지 콘텐츠를 탐색하고 조작할 때 접근성 트리를 사용합니다.
아이콘 버튼에 접근 가능한 이름을 부여하려면, <button>
요소의 기능을 간략히 묘사하는 텍스트를 안에 포함하세요.
예제
<button name="favorite" type="button">
<svg aria-hidden="true" viewBox="0 0 10 10">
<path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
</svg>
Add to favorites
</button>
텍스트를 숨기고 싶은 경우, 접근 가능한 방식은 CSS 속성을 조합해 시각적으로는 숨기고, 보조 기술은 읽을 수 있는 형태로 남기는 것입니다.
그러나, 버튼의 텍스트를 시각적으로 남겨놓는 것은 아이콘의 뜻이나 버튼의 기능에 익숙하지 않은 사용자도 도울 수 있다는 점을 명심해야 합니다. 특히 기술과 가깝지 않거나, 문화적으로 다른 해석을 할 수 있는 사용자를 고려하세요.
크기와 간격
크기
버튼과 같은 대화형 요소는 상호작용하기 충분한 크기의 활성화 영역을 가져야 합니다. 충분한 크기는 운동 조절 장애를 가진 사용자와, 터치스크린처럼 정확하지 않은 입력 도구 사용자처럼 다양한 사람을 돕습니다. 최소 44x44의 CSS 픽셀 크기를 권고합니다.
- Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1
- Target Size and 2.5.5 | Adrian Roselli
- Quick test: Large touch targets - The A11Y Project
간격
버튼과 같은 대화형 요소 다수를 시각적으로 가까이 배치할 땐 서로를 분리하는 공간을 둬야 합니다. 간격은 운동 조절 장애를 가진 사용자가 원하지 않는 상호작용을 하는걸 방지할 수 있습니다.
간격은 margin
과 같은 CSS 속성으로 설정할 수 있습니다.
Firefox
Firefox will add a small dotted border on a focused button. This border is declared through CSS in the browser stylesheet, but you can override it to add your own focused style using <a href="/ko/docs/Web/CSS/::-moz-focus-inner">button::-moz-focus-inner { }</a>
.
If overridden, it is important to ensure that the state change when focus is moved to the button is high enough that people experiencing low vision conditions will be able to perceive it.
Color contrast ratio is determined by comparing the luminosity of the button text and background color values compared to the background the button is placed on. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for large text. (Large text is defined as 18.66px and bold
or larger, or 24px or larger.)
클릭과 포커스
<button>
을 클릭했을 때 포커스를 얻는 여부는 브라우저와 운영체제에 따라 다릅니다. 아래 표는 <input>
이 type="button"
또는 type="submit"
일 때도 동일합니다.
데스크톱 브라우저 | Windows 8.1 | OS X 10.X |
---|---|---|
Firefox | 예 - Firefox 30.0 | (tabindex 가 존재해도) 아니오 - Firefox 63 |
Chrome | 예 - Chrome 35 | 예 - Chrome 65 |
Safari | N/A | (tabindex 가 존재해도) 아니오 - Safari 12 (bug 22261) |
Internet Explorer | 예 - Internet Explorer 11 | N/A |
Presto | 예 - Opera 12 | 예 - Opera 12 |
모바일 브라우저 | iOS 7.1.2 | Android 4.4.4 |
---|---|---|
Safari Mobile | (tabindex 가 존재해도) 아니오 |
N/A |
Chrome 35 | (tabindex 가 존재해도) 아니오 |
예 |
명세
Specification |
---|
HTML Standard # the-button-element |
브라우저 호환성
BCD tables only load in the browser