[HTML] button 태그

728x90

HTML <button> 태그란?

<button> 태그는 클릭할 수 있는 버튼을 생성하는 HTML 요소입니다. 이 버튼을 클릭하면 특정 동작(이벤트)을 실행할 수 있으며, 폼 제출, JavaScript 실행, 링크 이동 등 다양한 기능을 수행할 수 있습니다.

주요 특징

내용을 포함할 수 있는 태그 → 버튼 안에 텍스트, 아이콘, 이미지 등 추가 가능.
기본적으로 클릭 가능 → 마우스로 클릭하거나 키보드(Enter, Space)로 조작 가능.
폼(form)과 함께 사용 가능 → <form> 태그 내에서 입력값을 제출하는 버튼으로 사용됨.

기본 사용법

<button>클릭하세요</button>

출력 결과:

※ <button> 태그를 사용하면 기본 스타일이 적용된 버튼이 생성됩니다.

<button> 태그의 속성

💡 type (버튼의 동작 지정)

<button> 태그에는 type 속성이 있으며, 기본값은 "submit"입니다.

type 값	설명
submit	(기본값) 폼 데이터를 서버로 제출
reset	폼 입력값을 초기화
button	아무 동작 없음 (JS를 이용해 동작 추가해야 함)

✅ 예제: type="submit" (폼 제출 버튼)

<form action="/submit" method="post">
    <label for="name">이름:</label>
    <input type="text" id="name" name="name">
    <button type="submit">제출</button>
</form>

폼 안에서 submit 버튼을 클릭하면 입력한 데이터를 서버로 전송합니다.

✅ 예제: type="reset" (폼 초기화 버튼)

<form>
    <input type="text" placeholder="이름 입력">
    <button type="reset">초기화</button>
</form>

버튼을 누르면 입력한 값이 초기화됩니다.

✅ 예제: type="button" (JavaScript와 함께 사용)

<button type="button" onclick="alert('버튼이 클릭되었습니다!')">클릭</button>

JavaScript 이벤트를 추가하여 클릭 시 동작을 실행할 수 있습니다.

💡 disabled (버튼 비활성화)

<button disabled>비활성화된 버튼</button>

출력 결과:

💡 name과 value (form 데이터 전송 시 사용)

<form>
    <button type="submit" name="action" value="save">저장</button>
    <button type="submit" name="action" value="delete">삭제</button>
</form>

서버로 전송되는 데이터 (action=save 또는 action=delete)를 구분할 때 사용됩니다.

버튼 안에 다양한 요소 포함 가능

<button> 태그는 단순한 텍스트뿐만 아니라 아이콘, 이미지, HTML 요소도 포함할 수 있습니다.

<button>
    <img src="icon.png" alt="아이콘" width="20"> 버튼 클릭
</button>

버튼 내부에 이미지를 넣을 수도 있습니다.

버튼 스타일링 (CSS 활용)

💡 버튼 크기와 색상 변경

<style>
    .custom-btn {
        background-color: blue;
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
    }
</style>

<button class="custom-btn">스타일 적용된 버튼</button>

CSS를 이용해 버튼의 모양을 자유롭게 변경할 수 있습니다.

💡 hover (마우스 올릴 때) 효과 추가

<style>
    .hover-btn {
        background-color: green;
        color: white;
        padding: 10px 20px;
        border: none;
    }
    .hover-btn:hover {
        background-color: darkgreen;
    }
</style>

<button class="hover-btn">마우스 올려보세요</button>

마우스를 올리면 버튼 색상이 바뀝니다.

💡 버튼 아이콘 추가 (FontAwesome 사용)

<head>
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<button>
    <i class="fas fa-thumbs-up"></i> 좋아요
</button>

아이콘과 함께 버튼을 만들 수 있습니다.

Javascript와 함께 사용

💡 버튼 클릭 이벤트 추가

<button onclick="alert('버튼이 클릭되었습니다!')">클릭하세요</button>

버튼을 클릭하면 알림창이 뜹니다.

💡 버튼 클릭 시 요소 변경

<button onclick="changeText()">텍스트 변경</button>
<p id="text">변경 전 텍스트</p>

<script>
    function changeText() {
        document.getElementById("text").innerText = "변경된 텍스트";
    }
</script>

버튼을 클릭하면 <p> 태그의 내용이 변경됩니다.

<button> 태그와 <input type="button"> 차이점

태그	차이점
<button>	내부에 텍스트, 이미지, 아이콘, HTML 요소 추가 가능
<input type="button">	텍스트만 포함 가능 (닫는 태그 없음)

<button>텍스트와 <strong>굵은 글씨</strong> 포함 가능</button>
<input type="button" value="텍스트만 가능">

※ <button>은 유연성이 높아 더 추천되는 방법입니다.

728x90

저작자표시 비영리 변경금지

'프로그래밍 > HTML' 카테고리의 다른 글

[HTML] br 태그 (줄바꿈) (57)	2025.02.07
[HTML] body 태그 (87)	2025.02.07
[HTML] blockquote 태그 (긴 인용문) (151)	2025.02.06
[HTML] bdo 태그 (강제 문자 정렬) (72)	2025.02.06
[HTML] bdi 태그 (문자 정렬 문제 해결) (65)	2025.02.05

취미 탈출 프로젝트

[HTML] button 태그