HTML 요소 정리: <details> 및 <summary>

<details> 및 <summary> 요소란?

HTML의 <details> 요소는 사용자가 클릭하여 확장할 수 있는 숨겨진 콘텐츠를 제공하는 데 사용됩니다. <summary> 요소는 그 제목 역할을 하며, 사용자가 클릭하면 해당 <details> 요소의 내용을 표시하거나 숨길 수 있습니다.

기본 사용법

<details>
  <summary>제목을 클릭하여 내용을 확인하세요</summary>
  <p>이 부분은 클릭 시 나타나는 내용입니다.</p>
</details>

• <details> : 숨겨진 콘텐츠를 포함하는 요소입니다.
• <summary> : 클릭 가능한 제목을 정의합니다.

실전 예제: 국민 내일배움카드 설명

<div>
  <details>
    <summary>국민 내일배움카드</summary>
    <figure>
      <img src="/src/assets/thumbnail/learn-card.png" alt="국민 내일배움카드 이미지" />
    </figure>
    <p>
      급격한 기술 발전 및 노동시장 변화에 대응하는 사회안전망 차원에서 국민 스스로 직업능력개발훈련을 실시할 수 있도록 훈련비 등을 지원받을 수 있는 카드를 의미한다.
    </p>
  </details>
</div>

• <summary> : "국민 내일배움카드"라는 제목을 제공하여 클릭할 수 있도록 함.
• <figure> : 관련 이미지를 포함하여 시각적인 정보 제공.
• <p> : 국민 내일배움카드에 대한 설명 추가.

활용 사례

1. FAQ(자주 묻는 질문) 섹션

   <details>
     <summary>환불 정책은 어떻게 되나요?</summary>
     <p>구매 후 7일 이내에는 전액 환불이 가능합니다.</p>
   </details>

2. 기술 문서에서 추가 정보 제공

   <details>
     <summary>HTML5의 새로운 기능</summary>
     <ul>
       <li>시맨틱 태그 지원</li>
       <li>비디오 및 오디오 요소</li>
       <li>로컬 스토리지</li>
     </ul>
   </details>

정리

• <details>와 <summary>는 사용자가 원하는 경우에만 정보를 표시하도록 도와주는 편리한 요소입니다.
• 별도의 JavaScript 없이도 클릭 이벤트를 통해 내용을 확장/축소할 수 있어 사용자 경험을 향상시킵니다.
• 이미지나 리스트 같은 다양한 콘텐츠를 포함할 수 있어 FAQ, 설명서, 숨겨진 정보 제공에 유용합니다.

이번 학습을 통해 <details>와 <summary>를 활용하여 웹페이지에서 보다 직관적인 사용자 경험을 제공하는 방법을 배웠습니다!