HTML의 버튼 태그는 무엇인가요?
HTML 버튼 태그는 웹 페이지에서 사용자와 상호작용하기 위해 클릭할 수 있는 버튼을 생성하는 데 사용됩니다. 이 버튼은 사용자가 웹 페이지에서 어떤 작업을 수행할 수 있도록 해주며, 주로 폼 제출, 링크 이동, 페이지 새로고침 등에 사용됩니다.
버튼을 만들기 위해서는 HTML 버튼 태그인 <button>을 사용합니다. <button> 태그에는 다양한 속성을 추가하여 버튼의 모양, 크기, 색상 등을 변경할 수도 있습니다.
HTML에서 버튼 태그는 언제 사용되나요?
HTML에서 버튼 태그는 사용자 인터랙션을 위해 사용됩니다. 버튼을 클릭하면 일부 동작이 트리거되어 사용자 경험을 개선할 수 있습니다. 예를 들어, 버튼을 사용하여 다음과 같은 동작을 수행할 수 있습니다.
- 웹 페이지에서 다른 페이지로 이동
- 사용자가 입력한 데이터를 서버로 제출
- 특정 액션을 수행하도록 JavaScript 코드를 실행
- 모달 창 또는 팝업 창을 열거나 닫음
- 미디어 재생 또는 일시 중지
버튼 태그는 다양한 속성을 가지고 있어서, 버튼의 모양과 크기, 동작 등을 조정할 수 있습니다.
버튼 태그의 기본 구조
<button>기본 버튼</button>
이 버튼은 "기본 버튼"이라는 텍스트가 표시되며, 클릭하면 아무런 동작이 일어나지 않습니다. 버튼이 클릭될 때 어떤 동작을 수행하도록 하려면 자바스크립트 등의 프로그래밍 언어를 사용하여 클릭 이벤트를 처리해야합니다. 이 부분은 자바스크립트 자습서에서 자세히 확인해보도록 하겠습니다.
버튼 태그에서 사용할 수 있는 속성
버튼 태그에서 사용되는 속성은 일반적인 텍스트 태그나 영역을 지정하는 태그와는 다른 속성들이 많습니다. 이 부분은 위에서 말한 자바스크립트와 연결되어 사용되기 때문인데요. 이런 태그들이 사용되는구나 정도로만 숙지해두시면 됩니다.
type
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button">Click Me</button>type 속성은 버튼의 종류를 지정합니다. type 속성은 다양한 값을 가질 수 있으며, 가장 일반적인 값은 submit, reset, button입니다.
accesskey
<button accesskey="a">Add Item</button>accesskey 속성은 버튼에 단축키를 지정합니다. 이 속성은 키보드를 사용하여 버튼을 빠르게 활성화할 수 있도록 합니다.
autofocus
<button autofocus>Submit</button>autofocus 속성은 페이지가 로드될 때 버튼이 자동으로 포커스되도록 합니다.
disabled
<button disabled>Disabled Button</button>disabled 속성은 버튼을 비활성화합니다. 비활성화된 버튼은 클릭되지 않으며, 사용자의 입력도 받을 수 없습니다.
form
<form id="my-form">
<button form="my-form">Submit</button>
</form>form 속성은 버튼이 속한 폼의 이름을 지정합니다.
formaction
<form action="/submit">
<button type="submit" formaction="/alt-submit">Submit to Alternative URL</button>
</form>formaction 속성은 폼 제출 시 호출할 URL을 지정합니다.
formenctype
<form action="/submit" enctype="multipart/form-data">
<button type="submit">Submit</button>
</form>formenctype 속성은 폼 데이터 전송 유형을 지정합니다.
formmethod
<form action="/submit" method="post">
<button type="submit" formmethod="get">Submit with GET</button>
</form>formmethod 속성은 폼 데이터 전송 방식을 지정합니다.
formnovalidate
<form action="/submit">
<button type="submit" formnovalidate>Submit without Validation</button>
</form>formnovalidate 속성은 폼 데이터 유효성 검사를 비활성화합니다.
formtarget
<form action="/submit" target="_blank">
<button type="submit">Submit to New Window</button>
</form>formtarget 속성은 폼 데이터 전송 대상을 지정합니다.
name
<button name="submit-btn">Submit</button>name 속성은 버튼의 이름을 지정합니다.
버튼 태그 스타일링
스타일 속성을 사용하여 직접 스타일 규칙을 작성할 수도 있습니다. 예를 들어, 다음과 같이 style 속성을 사용하여 버튼의 배경색과 글꼴 색상을 지정할 수 있습니다.
<button style="background-color: #4CAF50; color: white; font-size: 16px;">확인 버튼</button>위 코드에서 background-color 속성은 버튼의 배경색을 지정하고, color 속성은 버튼의 글꼴 색상을 지정했습니다. 또한 font-size 속성을 사용하여 글꼴 크기를 조정하였습니다. 실제 웹 페이지에서는 아래 이미지와 같이 표시됩니다.
