[style] HTML - <details> 태그 - 토글 가능한 세부사항(상세사항)을 표시 (= details태그 = 디테일스태그/디테일즈태그) ※ 보이기/숨기기 가능한 태그

목차

1. <details> 예제 - 토글 가능 세부사항
2. <details> 정의
3. <details> 속성
4. <details> 기본 CSS

<details> 예제 - 토글 가능 세부사항

<details> 정의

 

사용자가 원할 때 보거나 감출 수 있는 추가 세부 사항 표시.

 

---

 

1. 

• 사용자가 보거나 감출 수 있는 위젯을 만들 때 사용. (JS나 CSS로 구현하던 것을 이 태그로 간단히 가능)
• <details> 태그 안에는 어떤 내용이라도 올 수 있음.
• <details> 태그 안 내용은 사용자가 보기 선택 해야지만 표시돼야 함. 단, <summary> 태그로 <details> 태그 안 세부 내용의 머리글 노출 가능.
• 시작태그와 종료태그로 구성.
• HTML5 추가.

2. 

IE 제외한 주요 최신 브라우저 지원.

3. 

<details> 태그는 전역속성과 이벤트속성 지원.

 

<details> 속성

<details> 기본 CSS

 

details { display: block; }