lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

webIntroHtmlChapter3Title

lesson11Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter4Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
    <title>HTML `<button>` 예시</title>
  </head>

  <body>
    
    
    <button type="button">클릭하세요!</button>
    <br /><br />

    
    <form action="#" method="post">
      <button type="submit">제출</button>
    </form>
    <br /><br />

    
    <button type="button" onclick="alert('클릭했어요!')">클릭</button>
    <br /><br />

    
    <button type="button" disabled>비활성화된 버튼</button>
    <br /><br />

    
    <button type="button" autofocus>자동 포커스 버튼</button>
  </body>
</html>

# button 태그

`<button>` 태그는 웹 페이지가 사용자와 상호 작용하는 버튼입니다.

예를 들어 사용자가 버튼을 클릭하면 서버로 데이터를 보내거나, 화면 전환 등의 동작을 수행할 수 있습니다.

<br />

```html title="button 태그 사용 예제"
<button>클릭하세요!</button>
```

위 코드는 "클릭하세요!"라는 텍스트를 포함한 버튼을 생성합니다.

<br />

## 버튼에 기능 추가하기

버튼 자체는 단순한 클릭 가능한 요소일 뿐입니다. 실제로 무언가 특별한 동작을 수행하려면 JavaScript와 같은 스크립트 언어를 사용해야 합니다.

예를 들어, 버튼을 클릭할 때 경고 메시지를 표시하게 하려면 다음과 같이 작성할 수 있습니다.

```html title="클릭 시 경고 메시지 표시"
<button onclick="alert('버튼이 클릭되었습니다!')">클릭하세요!</button>
```

<br />

코드의 별표로 강조된 부분을 따라 입력해 보세요.