6.1 <details> 태그
HTML5에선 <details>와 <summary> 요소가 추가되어 인터랙티브한 드롭다운 블록을 만들 수 있게 됐어.
이 요소들 덕분에 사용자는 내용을 펼치거나 접을 수 있고, 사용자 경험을 개선하며 웹 페이지에서 공간을 절약할 수 있어.
<details> 요소는 펼치거나 접을 수 있는 블록을 만드는 데 사용돼. 이 안에는 아무 HTML 콘텐츠나 넣을 수 있어.
<details>를 열면 중첩된 콘텐츠가 표시되고, 닫으면 숨겨져.
문법:
HTML
<details>
<summary>제목</summary>
<!-- 숨겨진 내용 -->
</details>
open 속성:
이 속성이 존재하면 <details> 블록이 기본적으로 열려 있어.
<details> 사용 예시
HTML
<details open>
<summary>기본 정보</summary>
<p>이 정보는 기본적으로 보이는데, open 속성이 설정되어 있기 때문이야.</p>
</details>
설명
<details>: 숨겨진 콘텐츠를 위한 컨테이너를 생성해.<summary>: 항상 보이는 제목을 정의하고, 이걸 클릭하면 콘텐츠를 펼치거나 접을 수 있어.
6.2 <summary> 태그
<sumary> 요소는 <details> 내에서 제목을 만드는 데 사용돼. 이 제목은 항상 보이며,
<details> 블록의 내용을 펼치거나 접는 컨트롤 역할을 해.
문법:
HTML
<details>
<summary>제목</summary>
<!-- 숨겨진 내용 -->
</details>
사용 예시:
HTML
<details>
<summary>자세히 보기</summary>
<p>이것은 블록을 열면 보이는 숨겨진 내용이야.</p>
</details>
<details>와 <summary> 사용의 장점
- 사용자 경험 향상: 사용자가 보고 싶은 콘텐츠를 스스로 조절할 수 있어.
- 공간 절약: 많은 정보를 인터랙티브한 제목 뒤에 숨길 수 있어.
- 의미론적 마크업: HTML 문서 구조를 개선하고 사용자와 검색 엔진에 접근성을 향상시켜.
6.3 JavaScript와의 상호작용
<details>와 <sumary> 요소는 JavaScript로 쉽게 제어할 수 있어서
더 인터랙티브한 웹 페이지를 만들 수 있어.
JavaScript 사용 예시:
HTML
<details>
<summary>자세히 보기</summary>
<p>이것은 블록을 열면 보이는 숨겨진 내용이야.</p>
</details>
<details open>
<summary>기본 정보</summary>
<p>이 정보는 기본적으로 보이는데, open 속성이 설정되어 있기 때문이야.</p>
</details>
<button id="toggleDetails">펼치기/접기</button>
JavaScript
// 'toggleDetails' id를 가진 버튼을 찾아 클릭 이벤트 핸들러를 추가
document.getElementById('toggleDetails').addEventListener('click', () => {
// 페이지의 모든 'details' 요소를 찾기
document.querySelectorAll('details').forEach(detail => {
// 각 'details' 요소의 'open' 속성 값을 반전
detail.open = !detail.open;
});
});
설명:
- "펼치기/접기" 버튼: 페이지의 모든
<details>요소의 상태를 제어해. - 클릭 이벤트: 모든
<details>요소의 open 속성을 전환해.
GO TO FULL VERSION