HTML 에서 <summary> 태그는 웹 페이지에 있는 콘텐츠에 대한 확장 가능하고 축소 가능한 요약 요소를 생성하는 데 사용됩니다.
참고:
index.html에서 코딩을 연습하고 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
<summary> 태그를 추가하기 전에, 확장 또는 축소할 수 있는 콘텐츠 섹션을 생성해야 합니다. 이를 위해 <details> 태그를 사용합니다. <body> 태그 내의 index.html 파일에 다음 코드를 추가하십시오.
<details>
<summary>Click me to see the content</summary>
<p>Content goes here.</p>
</details>위 코드에서, 콘텐츠의 요약을 정의하기 위해 details 태그 안에 summary 태그를 추가했습니다.
현재 콘텐츠 상태를 제공하기 위해 aria-expanded 속성을 details 태그에 추가할 수 있습니다. 콘텐츠가 확장되면 aria-expanded의 값은 true가 되고, 축소되면 값은 false가 됩니다. aria-expanded 속성을 포함하려면 <summary> 태그 뒤에 다음 코드를 추가하십시오.
<details>
<summary aria-expanded="false">Click me to see the content</summary>
<p>Content goes here.</p>
</details>summary 태그는 특별한 속성을 가지고 있지 않지만, CSS 를 사용하여 스타일을 지정할 수 있습니다. summary 태그에 스타일을 추가하려면 <style> 태그에 다음 코드를 추가하십시오.
summary {
padding: 10px;
background-color: #eee;
cursor: pointer;
}details 태그 안에 더 많은 콘텐츠를 추가할 수 있으며, 이는 자동으로 확장 및 축소됩니다. 첫 번째 단락 뒤에 다음 코드를 추가하여 더 많은 콘텐츠를 추가하십시오.
<details>
<summary aria-expanded="false">Click me to see the content</summary>
<p>Content goes here.</p>
<p>More content.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</details>웹 페이지에 여러 개의 확장 가능한 섹션을 추가할 수 있습니다. 다른 확장 가능한 섹션을 생성하려면 다음 코드를 추가하십시오.
<details>
<summary aria-expanded="false">Another section</summary>
<p>Content of another section</p>
</details><summary> 태그는 웹 페이지에서 콘텐츠의 확장 및 축소 가능한 섹션을 생성하는 데 사용될 수 있습니다. details 태그 안에 더 많은 콘텐츠를 추가하고 스타일링을 사용하여 summary 태그의 모양을 사용자 정의할 수 있습니다. aria-expanded 속성을 추가하여 장애가 있는 사용자를 위해 콘텐츠의 현재 상태를 제공할 수 있습니다.
