HTML5 Label 태그 사용법

1. Label 태그란?

Label 태그는 HTML 문서에서 폼 요소의 레이블을 정의하는 데 사용되는 태그입니다. 사용자가 폼 요소를 더 쉽게 식별하고 사용할 수 있도록 도와주며, 접근성을 향상시키는 중요한 역할을 합니다.

2. 기본 구조

<div class="form-group">
    <label for="username">사용자 이름</label>
    <input type="text" id="username" name="username">
</div>

<div class="form-group">
    <label>
        <input type="checkbox" name="agree">
        이용약관에 동의합니다
    </label>
</div>

<div class="form-group">
    <label for="gender">성별</label>
    <select id="gender" name="gender">
        <option value="">선택하세요</option>
        <option value="male">남성</option>
        <option value="female">여성</option>
    </select>
</div>

3. 자주 사용되는 속성

4. 실제 사용 예제

<form class="user-form">
    <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>
    
    <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="message">메시지</label>
        <textarea id="message" name="message" rows="4"></textarea>
    </div>
    
    <div class="form-group">
        <label>
            <input type="checkbox" name="agree" required>
            개인정보 수집 및 이용에 동의합니다
        </label>
    </div>
</form>

5. 스타일링 예제

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

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

    /* 필수 입력 필드 레이블 */
    label.required::after {
        content: " *";
        color: #dc3545;
    }

    /* 체크박스 그룹 스타일 */
    .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[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 16px;
    }

    /* 체크박스 스타일 */
    input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 0;
    }

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

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        .checkbox-group {
            gap: 12px;
        }
        
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        textarea {
            font-size: 16px; /* iOS에서 확대 방지 */
        }
    }
</style>

6. 성능 최적화 팁

• 불필요한 중첩을 피합니다.
• 적절한 HTML 구조를 사용합니다.
• CSS 선택자를 효율적으로 사용합니다.
• 레이블 텍스트를 간결하게 유지합니다.
• 접근성을 고려한 마크업을 작성합니다.

7. 검증 및 테스트

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

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