HTML5 Button 태그 사용법

1. Button 태그란?

Button 태그는 HTML 문서에서 클릭 가능한 버튼을 생성하는 데 사용되는 태그입니다. 사용자와의 상호작용을 위한 다양한 기능을 수행할 수 있으며, 폼 제출, 링크 이동, JavaScript 함수 실행 등에 활용됩니다.

2. 기본 구조

<div class="button-group">
    <button type="submit" class="primary-btn">제출하기</button>
    <button type="reset" class="secondary-btn">초기화</button>
    <button type="button" class="outline-btn">취소</button>
</div>

<div class="button-group">
    <button type="button" disabled>비활성화 버튼</button>
    <button type="button" class="icon-btn">
        <span class="icon">📝</span>
        작성하기
    </button>
</div>

3. 자주 사용되는 속성

4. 실제 사용 예제

<form class="user-form">
    <div class="form-group">
        <label for="username">사용자 이름</label>
        <input type="text" id="username" name="username" required>
    </div>
    
    <div class="form-group">
        <label for="email">이메일</label>
        <input type="email" id="email" name="email" required>
    </div>
    
    <div class="button-group">
        <button type="submit" class="primary-btn">
            <span class="icon">✓</span>
            저장하기
        </button>
        
        <button type="reset" class="secondary-btn">
            <span class="icon">↺</span>
            초기화
        </button>
        
        <button type="button" class="outline-btn" onclick="history.back()">
            <span class="icon">←</span>
            뒤로가기
        </button>
    </div>
</form>

<div class="action-buttons">
    <button type="button" class="icon-btn" onclick="toggleTheme()">
        <span class="icon">🌙</span>
        테마 변경
    </button>
    
    <button type="button" class="icon-btn" onclick="toggleNotifications()">
        <span class="icon">🔔</span>
        알림 설정
    </button>
    
    <button type="button" class="icon-btn" disabled>
        <span class="icon">🔒</span>
        잠금
    </button>
</div>

5. 스타일링 예제

<style>
    /* 버튼 기본 스타일 */
    button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    /* 아이콘 스타일 */
    .icon {
        margin-right: 8px;
        font-size: 18px;
    }

    /* 기본 버튼 스타일 */
    .primary-btn {
        background-color: #007bff;
        color: #fff;
    }

    .primary-btn:hover {
        background-color: #0056b3;
    }

    /* 보조 버튼 스타일 */
    .secondary-btn {
        background-color: #6c757d;
        color: #fff;
    }

    .secondary-btn:hover {
        background-color: #545b62;
    }

    /* 아웃라인 버튼 스타일 */
    .outline-btn {
        background-color: transparent;
        border: 1px solid #007bff;
        color: #007bff;
    }

    .outline-btn:hover {
        background-color: #007bff;
        color: #fff;
    }

    /* 아이콘 버튼 스타일 */
    .icon-btn {
        background-color: transparent;
        color: #333;
        padding: 8px 16px;
    }

    .icon-btn:hover {
        background-color: #f8f9fa;
    }

    /* 비활성화 버튼 스타일 */
    button:disabled {
        background-color: #e9ecef;
        color: #6c757d;
        cursor: not-allowed;
        opacity: 0.65;
    }

    /* 버튼 그룹 스타일 */
    .button-group {
        display: flex;
        gap: 10px;
        margin-top: 20px;
    }

    .action-buttons {
        display: flex;
        gap: 10px;
        margin-top: 20px;
        justify-content: flex-end;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        .button-group,
        .action-buttons {
            flex-direction: column;
        }
        
        button {
            width: 100%;
        }
    }
</style>

6. 성능 최적화 팁

• 필요한 버튼만 사용합니다.
• 적절한 이벤트 핸들러를 사용합니다.
• 버튼의 상태를 명확히 표시합니다.
• 일관된 스타일을 유지합니다.
• 접근성을 고려한 마크업을 작성합니다.

7. 검증 및 테스트

button 태그가 올바르게 사용되었는지 확인하는 방법:

• W3C 마크업 검증 서비스 사용
• 다양한 브라우저에서 테스트
• 모바일 기기에서 테스트
• 접근성 검사 도구 사용
• 이벤트 핸들러 테스트