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 />

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

`<button>` 태그는 사용자가 클릭할 수 있는 버튼을 생성하며, 이를 통해 서버로 데이터를 전송하거나 화면 전환 등의 동작을 수행할 수 있습니다. 이 태그는 웹 페이지의 상호작용성을 높이는 중요한 요소입니다.

### `<button>` 태그는 웹 페이지에서 사용자의 상호 작용을 가능하게 하는 버튼을 생성하는 데 사용된다.

button 태그

버튼에 기능 추가하기

<button> 태그는 웹 페이지에서 사용자의 상호 작용을 가능하게 하는 버튼을 생성하는 데 사용된다.

`<button>` 태그는 웹 페이지에서 사용자의 상호 작용을 가능하게 하는 버튼을 생성하는 데 사용된다.