HTML5 Fieldset 태그 사용법

1. Fieldset 태그란?

Fieldset 태그는 HTML 문서에서 관련된 폼 요소들을 그룹화하는 데 사용되는 태그입니다. `legend` 태그와 함께 사용하여 그룹의 제목을 지정할 수 있으며, 폼의 구조를 명확하게 하고 접근성을 향상시키는 역할을 합니다.

2. 기본 구조

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

    <fieldset>
        <legend>선호 사항</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>
</form>

3. 자주 사용되는 속성

4. 실제 사용 예제

<form class="registration-form">
    <fieldset class="personal-info">
        <legend>개인 정보</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>
        
        <div class="form-group">
            <label for="phone">전화번호</label>
            <input type="tel" id="phone" name="phone">
        </div>
    </fieldset>

    <fieldset class="preferences">
        <legend>선호 사항</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>
                <label>
                    <input type="checkbox" name="interests" value="design">
                    디자인
                </label>
            </div>
        </div>
        
        <div class="form-group">
            <label for="experience">경력</label>
            <select id="experience" name="experience">
                <option value="">선택하세요</option>
                <option value="junior">주니어 (1-3년)</option>
                <option value="mid">미드레벨 (3-5년)</option>
                <option value="senior">시니어 (5년 이상)</option>
            </select>
        </div>
    </fieldset>

    <fieldset class="agreement">
        <legend>약관 동의</legend>
        <div class="form-group">
            <label>
                <input type="checkbox" name="terms" required>
                이용약관에 동의합니다
            </label>
        </div>
        <div class="form-group">
            <label>
                <input type="checkbox" name="privacy" 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;
    }

    /* 폼 그룹 스타일 */
    .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"],
    input[type="tel"],
    select {
        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,
    select:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
    }

    /* 비활성화 스타일 */
    fieldset:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

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

6. 성능 최적화 팁

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

7. 검증 및 테스트

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

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