HTML에서 `<button>` 태그는 웹 페이지에서 사용자와 상호작용할 수 있는 버튼을 생성하는 데 사용됩니다. 이 버튼은 다양한 종류와 속성을 가질 수 있으며, 그에 따라 다양한 기능을 수행할 수 있습니다. `<button>` 태그의 종류와 속성에 대해 자세히 살펴보겠습니다. 1. 버튼 종류 `<button>` 태그는 기본적으로 세 가지 종류의 버튼으로 구분됩니다. 이들은 `type` 속성을 통해 정의됩니다. 1.1. submit 버튼 - 설명 : `type="submit"`으로 설정된 버튼은 폼(form) 내에서 사용되며, 사용자가 버튼을 클릭하면 폼 데이터를 서버로 전송합니다. - 예시 : ```html <form action="/submit" method="post"> <button type="submit">제출</button> </form> ``` 1.2. reset 버튼 - 설명 : `type="reset"`으로 설정된 버튼은 폼 내의 모든 입력 필드를 초기값으로 되돌립니다. 사용자가 이 버튼을 클릭하면 폼의 모든 필드가 초기화됩니다. - 예시 : ```html <form> <<a href='https://sangseek.com/sangseeks/input type/ko'>input type</a>="text" value="기본값"> <button type="reset">초기화</button> </form> ``` 1.3. 일반 버튼 - 설명 : `type="button"`으로 설정된 버튼은 특별한 기능을 수행하지 않으며, JavaScript와 함께 사용하여 특정 작업을 실행할 수 있습니다. 이 버튼은 <a href='https://sangseek.com/sangseeks/폼 전송/ko'>폼 전송</a>이나 초기화와 관련이 없습니다. - 예시 : ```html <button type="button" onclick="alert('버튼 클릭!')">클릭하세요</button> ``` 2. 버튼 속성 `<button>` 태그는 다양한 속성을 가질 수 있어 버튼의 동작과 스타일을 조정할 수 있습니다. 2.1. `disabled` - 설명 : 이 속성이 설정된 버튼은 비활성화되어 클릭할 수 없습니다. 사용자가 버튼을 클릭할 수 없도록 하여 특정 조건이 충족될 때까지 버튼을 사용할 수 없게 할 수 있습니다. - 예시 : ```html <button type="button" disabled>비활성화된 버튼</button> ``` 2.2. `name` 및 `value` - 설명 : `name` 속성은 버튼의 이름을 정의하고, `value` 속성은 버튼이 클릭될 때 전송되는 값을 설정합니다. 주로 폼 데이터 전송 시 사용됩니다. - 예시 : ```html <button type="submit" name="submitBtn" value="제출">제출</button> ``` 2.3. `form` - 설명 : 이 속성은 버튼이 속한 폼을 명시적으로 지정할 수 있습니다. 이 속성을 사용하면 버튼이 폼 외부에 있을 때도 해당 폼과 연관시킬 수 있습니다. - 예시 : ```html <form id="myForm"> <input type="text" name="username"> </form> <button type="submit" form="myForm">제출</button> ``` 3. 버튼 스타일링 버튼은 <a href='https://sangseek.com/sangseeks/CS/ko'>CS</a>S를 사용하여 스타일링할 수 있습니다. 기본적으로 브라우저마다 버튼의 스타일이 다르게 표시되지만, CSS를 통해 일관된 디자인을 적용할 수 있습니다. 3.1. CSS 클래스 - 예시 : ```html <button class="my-button">스타일이 적용된 버튼</button> ``` 3.2. 인라인 스타일 - 예시 : ```html <button style="background-color: blue; color: white;">인라인 스타일 버튼</button> ``` 4. 접근성 버튼을 사용할 때는 접근성도 고려해야 합니다. 스크린 리더와 같은 보조 기술을 사용하는 사용자들이 버튼의 기능을 이해할 수 있도록 적절한 텍스트를 제공해야 합니다. 또한, 버튼의 상태(활성화/비활성화)를 명확히 표시하는 것이 중요합니다. 결론 HTML의 `<button>` 태그는 다양한 종류와 속성을 통해 웹 페이지에서 사용자와의 상호작용을 가능하게 합니다. 버튼의 종류에 따라 다양한 기능을 수행할 수 있으며, CSS를 통해 스타일링하여 사용자 경험을 향상시킬 수 있습니다. 접근성을 고려하여 버튼을 설계하는 것도 중요합니다. 이러한 요소들을 종합적으로 고려하여 효과적인 사용자 인터페이스를 구축할 수 있습니다.
