HTML5 Keygen 태그 사용법

1. Keygen 태그란?

Keygen 태그는 HTML 폼에서 공개 키를 생성하는 데 사용됩니다. 주로 보안이 필요한 폼에서 사용자 인증을 위해 사용됩니다.

2. 기본 구조

<form action="/submit" method="post">
    <keygen name="public_key" challenge="challenge_string">
    <input type="submit" value="제출">
</form>

3. 자주 사용되는 속성

4. 실제 사용 예제

<!-- 보안 로그인 폼 -->
<form action="/login" method="post">
    <div class="form-group">
        <label for="username">사용자 이름:</label>
        <input type="text" id="username" name="username" required>
    </div>
    
    <div class="form-group">
        <label for="password">비밀번호:</label>
        <input type="password" id="password" name="password" required>
    </div>
    
    <div class="form-group">
        <label for="keygen">보안 키 생성:</label>
        <keygen id="keygen" name="public_key" challenge="login_challenge" keytype="RSA">
    </div>
    
    <button type="submit">로그인</button>
</form>

<!-- 인증서 등록 폼 -->
<form action="/register-certificate" method="post">
    <div class="form-group">
        <label for="cert-name">인증서 이름:</label>
        <input type="text" id="cert-name" name="cert_name" required>
    </div>
    
    <div class="form-group">
        <label for="cert-keygen">인증서 키 생성:</label>
        <keygen id="cert-keygen" name="cert_key" challenge="cert_challenge" keytype="RSA">
    </div>
    
    <button type="submit">인증서 등록</button>
</form>

<script>
// 키 생성 상태 확인
document.querySelectorAll('keygen').forEach(keygen => {
    keygen.addEventListener('change', function() {
        console.log('키가 생성되었습니다:', this.name);
    });
});

// 폼 제출 시 키 확인
document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', function(e) {
        const keygen = this.querySelector('keygen');
        if (!keygen.value) {
            e.preventDefault();
            alert('보안 키를 생성해주세요.');
        }
    });
});
</script>

5. 스타일링 예제

<style>
    /* 폼 그룹 스타일 */
    .form-group {
        margin-bottom: 15px;
    }

    /* 레이블 스타일 */
    label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }

    /* 입력 필드 스타일 */
    input[type="text"],
    input[type="password"] {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
    }

    /* 키 생성 필드 스타일 */
    keygen {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        background: white;
    }

    /* 비활성화된 키 생성 필드 스타일 */
    keygen[disabled] {
        background: #f5f5f5;
        cursor: not-allowed;
    }

    /* 버튼 스타일 */
    button {
        padding: 10px 20px;
        background: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
    }

    button:hover {
        background: #0056b3;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        input[type="text"],
        input[type="password"],
        keygen {
            font-size: 16px;
            padding: 10px;
        }

        button {
            width: 100%;
            padding: 12px;
            font-size: 16px;
        }
    }
</style>

6. 성능 최적화 팁

• 필요한 속성만 사용합니다.
• 적절한 HTML 구조를 사용합니다.
• CSS 선택자를 효율적으로 사용합니다.
• 불필요한 중첩을 피합니다.
• Web Crypto API 사용을 고려합니다.

7. 검증 및 테스트

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

• W3C 마크업 검증 서비스 사용
• 다양한 브라우저에서 테스트
• 모바일 기기에서 테스트
• 보안 검사 도구 사용
• JavaScript 이벤트 처리 테스트