HTML에서 `<button>` 태그의 `type` 속성은 버튼의 기능을 정의하는 중요한 요소입니다. 이 속성은 세 가지 주요 값 중 하나를 가질 수 있으며, 각각의 값은 버튼이 클릭되었을 때의 동작을 결정합니다. 아래에서 각 값에 대해 자세히 설명하겠습니다. 1. `type="button"` `type="button"`은 기본적인 버튼을 생성합니다. 이 버튼은 클릭 시 <a href='https://sangseek.com/sangseeks/어떠한/ko'>어떠한</a> 기본 동작도 수행하지 않으며, JavaScript와 같은 스크립트를 통해 사용자 정의 동작을 수행하도록 설정할 수 있습니다. 예를 들어, 사용자가 버튼을 클릭했을 때 특정 함수를 호출하거나, 다른 요소의 스타일을 변경하는 등의 작업을 수행할 수 있습니다. ```html <button type="button" onclick="alert('버튼이 클릭되었습니다!')">클릭하세요</button> ``` 2. `type="submit"` `type="submit"`은 폼(form) 내에서 사용될 때, 해당 폼의 데이터를 서버로 전송하는 역할을 합니다. 이 버튼을 클릭하면 브라우저는 폼에 입력된 데이터를 수집하고, 지정된 `action` 속성에 따라 데이터를 전송합니다. 만약 `action` 속성이 정의되어 있지 않다면, 현재 페이지로 데이터를 전송하게 됩니다. 일반적으로 로그인 폼이나 회원가입 폼 등에서 사용됩니다. ```html <form action="/submit" method="post"> <input type="text" name="username" <a href='https://sangseek.com/sangseeks/require/ko'>require</a>d> <button type="submit">제출</button> </form> ``` 3. `type="reset"` `type="reset"`은 폼 내에서 사용될 때, 사용자가 입력한 모든 데이터를 초기 상태로 되돌리는 버튼입니다. 이 버튼을 클릭하면 폼 필드의 값이 처음 로드된 상태로 돌아가며, 사용자가 입력한 모든 내용이 삭제됩니다. 주의할 점은 이 버튼이 클릭되면 사용자가 입력한 내용이 모두 사라지므로, 사용자가 실수로 클릭하지 않도록 주의해야 합니다. ```html <form> <input type="text" name="username"> <button type="reset">초기화</button> </form> ``` 결론 이처럼 `<button>` 태그의 `type` 속성은 버튼의 기능을 정의하는 데 중요한 역할을 합니다. `type="button"`은 기본적인 클릭 동작을 위한 버튼, `type="submit"`은 폼 데이터를 제출하는 버튼, `type="reset"`은 폼 데이터를 초기화하는 버튼으로 각각의 용도에 맞게 사용됩니다. 이러한 속성을 적절히 활용하면 사용자 인터페이스를 보다 직관적이고 효율적으로 설계할 수 있습니다.
