HTML5 Legend 태그 사용법

1. Legend 태그란?

Legend 태그는 HTML 문서에서 `fieldset` 요소의 제목을 정의하는 데 사용되는 태그입니다. 폼의 구조를 명확하게 하고 사용자가 폼의 각 섹션을 쉽게 이해할 수 있도록 도와주며, 접근성을 향상시키는 중요한 역할을 합니다.

2. 기본 구조

<form class="user-form">
    <fieldset>
        <legend>개인 정보</legend>
        <div class="form-group">
            <label for="name">이름</label>
            <input type="text" id="name" name="name">
        </div>
    </fieldset>

    <fieldset>
        <legend class="required">필수 정보</legend>
        <div class="form-group">
            <label for="email">이메일</label>
            <input type="email" id="email" name="email" required>
        </div>
    </fieldset>

    <fieldset>
        <legend>
            <span class="icon">📝</span>
            추가 정보
        </legend>
        <div class="form-group">
            <label for="message">메시지</label>
            <textarea id="message" name="message"></textarea>
        </div>
    </fieldset>
</form>

3. 자주 사용되는 속성

4. 실제 사용 예제

<form class="registration-form">
    <fieldset class="personal-info">
        <legend>
            <span class="icon">👤</span>
            개인 정보
        </legend>
        <div class="form-group">
            <label for="name" class="required">이름</label>
            <input type="text" id="name" name="name" required>
        </div>
        
        <div class="form-group">
            <label for="email" class="required">이메일</label>
            <input type="email" id="email" name="email" required>
        </div>
    </fieldset>

    <fieldset class="preferences">
        <legend>
            <span class="icon">⭐</span>
            선호 사항
        </legend>
        <div class="form-group">
            <label>관심 분야</label>
            <div class="checkbox-group">
                <label>
                    <input type="checkbox" name="interests" value="web">
                    웹 개발
                </label>
                <label>
                    <input type="checkbox" name="interests" value="mobile">
                    모바일 개발
                </label>
            </div>
        </div>
    </fieldset>

    <fieldset class="agreement">
        <legend class="required">
            <span class="icon">📋</span>
            약관 동의
        </legend>
        <div class="form-group">
            <label>
                <input type="checkbox" name="terms" required>
                이용약관에 동의합니다
            </label>
        </div>
    </fieldset>
</form>

5. 스타일링 예제

<style>
    /* 필드셋 기본 스타일 */
    fieldset {
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 20px;
        margin-bottom: 20px;
    }

    /* 범례 기본 스타일 */
    legend {
        font-weight: 600;
        color: #333;
        padding: 0 10px;
    }

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

    /* 필수 입력 필드 범례 */
    legend.required::after {
        content: " *";
        color: #dc3545;
    }

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

    /* 레이블 스타일 */
    label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #333;
    }

    label.required::after {
        content: " *";
        color: #dc3545;
    }

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

    /* 체크박스 그룹 스타일 */
    .checkbox-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .checkbox-group label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: normal;
        cursor: pointer;
    }

    /* 호버 및 포커스 스타일 */
    input:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        fieldset {
            padding: 15px;
        }
        
        .checkbox-group {
            gap: 12px;
        }
        
        input[type="text"],
        input[type="email"] {
            font-size: 16px;
        }
    }
</style>

6. 성능 최적화 팁

• 필요한 legend 태그만 사용합니다.
• 적절한 HTML 구조를 사용합니다.
• CSS 선택자를 효율적으로 사용합니다.
• 불필요한 중첩을 피합니다.
• 접근성을 고려한 마크업을 작성합니다.

7. 검증 및 테스트

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

• W3C 마크업 검증 서비스 사용
• 다양한 브라우저에서 테스트
• 모바일 기기에서 테스트
• 접근성 검사 도구 사용
• 스크린 리더 테스트