HTML <summary> 태그, 숨겨진 콘텐츠의 제목 표시하기

HTML <summary> 태그, 숨겨진 콘텐츠의 제목 표시하기

<summary> 태그는 HTML5에서 제공하는 유용한 요소로, 숨겨진 콘텐츠를 제목으로 간단히 표시하고 사용자가 클릭하면 내용을 펼칠 수 있도록 합니다. 이 글에서는 <summary> 태그의 사용법과 실용적인 활용 사례를 자세히 다룹니다.

 

 

목차

1. <summary> 태그란?
2. 기본 사용법
3. <summary> 태그 스타일링
4. 고급 활용법
5. 자주 발생하는 문제와 해결법
6. 실무에서의 활용 사례
7. 결론

 

1. <summary> 태그란?

<summary> 태그는 <details> 태그 내부에 위치하며, 해당 콘텐츠의 제목 역할을 합니다. 사용자가 제목을 클릭하면 <details>의 나머지 콘텐츠가 펼쳐집니다.

특징:

• HTML5에서 도입된 요소
• 인터랙티브 콘텐츠 제공
• 접근성과 사용자 경험 향상

 

 

2. 기본 사용법

<summary> 태그는 간단한 HTML 구조로 사용 가능합니다:

<details>
    <summary>자세한 정보 보기</summary>
    여기에 숨겨진 콘텐츠가 표시됩니다.
</details>

위 코드는 다음과 같이 동작합니다:

• 브라우저 기본 스타일을 통해 제목이 강조됩니다.
• 사용자가 제목을 클릭하면 숨겨진 콘텐츠가 표시됩니다.

 

 

3. <summary> 태그 스타일링

CSS를 사용해 <summary> 태그를 스타일링할 수 있습니다:

summary {
    font-weight: bold;
    color: #2980b9;
    cursor: pointer;
}

결과:

• 폰트 두께가 두꺼워지고, 색상이 변경됩니다.
• 사용자가 클릭할 수 있음을 시각적으로 표시합니다.

 

 

4. 고급 활용법

<summary> 태그는 다음과 같은 고급 기능과 함께 사용할 수 있습니다:

• 자바스크립트를 활용한 커스텀 이벤트 처리
• 접근성을 위한 ARIA 속성 추가
• 애니메이션 효과 적용

document.querySelector('summary').addEventListener('click', function() {
    alert('Summary clicked!');
});

 

 

 

 

5. 자주 발생하는 문제와 해결법

문제	원인	해결책
제목이 표시되지 않음	<summary> 태그 누락	<details> 내부에 <summary> 추가
스타일이 적용되지 않음	CSS 선택자 오류	올바른 선택자 사용

 

 

6. 실무에서의 활용 사례

<summary> 태그는 FAQ 페이지, 기술 문서, 대화형 콘텐츠 등에 널리 사용됩니다. 예:

• FAQ 섹션에서 답변 숨기기
• 코드 설명을 접을 수 있는 기술 문서
• 단계별 프로세스 제공

 

 

7. 결론

<summary> 태그는 숨겨진 콘텐츠를 간단하고 직관적으로 관리할 수 있게 해줍니다. 특히 사용자 경험 향상과 웹 접근성을 위해 필수적인 요소로 자리 잡고 있습니다.