HTML5 Details 태그 사용법

1. Details 태그란?

Details 태그는 사용자가 요청할 때만 표시되는 추가 정보를 포함하는 위젯을 만드는 데 사용됩니다. 주로 FAQ, 설명서, 추가 정보 등을 표시할 때 활용됩니다.

2. 기본 구조

<details>
    <summary>자세히 보기</summary>
    <p>추가 정보가 여기에 표시됩니다.</p>
</details>

3. 자주 사용되는 속성

4. 실제 사용 예제

<!-- 기본 FAQ 예제 -->
<div class="faq-example">
    <h3>기본 FAQ 예제</h3>
    <details>
        <summary>HTML이란 무엇인가요?</summary>
        <p>HTML은 웹 페이지를 만드는 마크업 언어입니다.</p>
    </details>
    <details>
        <summary>CSS란 무엇인가요?</summary>
        <p>CSS는 웹 페이지의 스타일을 정의하는 언어입니다.</p>
    </details>
</div>

<!-- 설명서 예제 -->
<div class="manual-example">
    <h3>설명서 예제</h3>
    <details open>
        <summary>시작하기</summary>
        <p>이 문서는 시작하는 방법을 설명합니다.</p>
    </details>
    <details>
        <summary>고급 기능</summary>
        <p>이 문서는 고급 기능을 설명합니다.</p>
    </details>
</div>

<!-- 추가 정보 예제 -->
<div class="info-example">
    <h3>추가 정보 예제</h3>
    <details>
        <summary>참고 사항</summary>
        <ul>
            <li>이 기능은 실험적입니다.</li>
            <li>이 내용은 변경될 수 있습니다.</li>
        </ul>
    </details>
</div>

<style>
    /* FAQ 예제 스타일 */
    .faq-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 설명서 예제 스타일 */
    .manual-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 추가 정보 예제 스타일 */
    .info-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        .faq-example,
        .manual-example,
        .info-example {
            margin: 10px 0;
            padding: 10px;
        }
    }
</style>

5. 스타일링 예제

<style>
    /* 기본 details 스타일 */
    details {
        margin: 10px 0;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* summary 스타일 */
    summary {
        cursor: pointer;
        font-weight: bold;
        color: #333;
    }

    /* 강조 스타일 */
    details.emphasis {
        background-color: #f5f5f5;
    }

    /* 인용 스타일 */
    details.quote {
        background-color: #e8f5e9;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        details {
            margin: 5px 0;
            padding: 5px;
        }
    }
</style>

6. 성능 최적화 팁

• 필요한 경우에만 details 태그를 사용합니다.
• 불필요한 중첩을 피합니다.
• 접근성을 고려한 마크업을 작성합니다.

7. 검증 및 테스트

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

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