소개
HTML details 태그는 제목이나 텍스트에 대한 추가 세부 정보와 정보를 제공하는 방법을 제공합니다. <details> 태그는 기본적으로 내부의 텍스트를 숨기고 사용자가 화살표 버튼을 클릭할 때만 텍스트를 표시합니다. 이 랩에서는 사용자 정의 요약과 함께 HTML <details> 태그를 사용하는 방법을 배웁니다.
참고:
index.html에서 코딩을 연습할 수 있으며 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
기본 <details> 태그
선호하는 텍스트 편집기에서 index.html 파일을 생성합니다.
다음 코드를 복사하여 index.html 파일에 붙여넣습니다.
<details>
<summary>Click to see more</summary>
<p>This text is hidden and can be seen by clicking on the arrow button.</p>
</details>
이것은 <details> 태그를 사용하는 기본적인 예시입니다. <details> 태그 내부의 텍스트는 기본적으로 숨겨지며 사용자는 화살표 버튼을 클릭하여 텍스트를 볼 수 있습니다.
사용자 정의 요약
이제 <details> 태그에 대한 사용자 정의 요약을 만들어 보겠습니다. 기존 코드를 다음과 같이 수정합니다.
<details>
<summary>Read more about the author</summary>
<p>
John Doe is a writer who has published numerous books in different genres.
</p>
</details>
위의 코드에서 <summary> 태그를 사용하여 "Read more about the author"라는 사용자 정의 요약을 추가하고 <details> 태그 내부에 저자 세부 정보를 제공했습니다.
이미지 추가
<details> 태그에 이미지를 추가해 보겠습니다. 다음 코드를 복사하여 index.html 파일에 붙여넣습니다.
<details>
<summary>Click to see more</summary>
<p>This text is hidden and can be seen by clicking on the arrow button.</p>
<img src="https://via.placeholder.com/150" alt="placeholder" />
</details>
위의 코드에서 <img> 태그를 사용하여 이미지를 추가했습니다. 사용자가 화살표 버튼을 클릭하면 <details> 태그 내부의 이미지와 텍스트가 표시됩니다.
open 속성 추가
이제 <details> 태그에 open 속성을 추가하여 텍스트를 기본적으로 표시해 보겠습니다. 기존 코드를 다음과 같이 수정합니다.
<details open>
<summary>Read more about the author</summary>
<p>
John Doe is a writer who has published numerous books in different genres.
</p>
<img src="https://via.placeholder.com/150" alt="placeholder" />
</details>
<details> 태그의 open 속성은 웹 페이지에서 텍스트가 기본적으로 보이도록 보장합니다.
요약
이 랩에서는 HTML <details> 태그를 사용하여 모든 제목 또는 텍스트에 대한 추가 세부 정보와 정보를 제공하는 방법을 배웠습니다. 또한 사용자 정의 요약을 사용하고 <details> 태그에 이미지를 추가하는 방법도 배웠습니다.
