details 태그

차장님이 작성하신 html 파일을 보면서 어떤 태그를 사용하고 어떻게 마크업 하는지 공부하고 있었는데 처음보는 태그를 발견했다.

바로 details 태그이다.

아코디언 구현을 details과 summary태그를 사용하여 만든 부분이었다.
클릭하면 안에 내용이 나오면서 보여지며 아코디언 기능을 했다. 근데 개발자 도구로 보면 어떠한 기능도 붙어있지 않아서 이건 뭐지 생각했다.

검색해보니  html5부터 새로 생긴 기능으로 스크립트를 붙이지 않고 html 태그만으로 더보기 닫기 기능을 할 수 있는 태그였다.

이렇게 편리한 태그가 있었다니 충격이었다;;;;

 

details 태그란?

 

: html5에 추가 된 태그로 하위 요소로 <summary>태그를 가짐

: <details>태그는 더보기 접기 기능의 모든 영역을 감싸주는 태그

: <summary>태그는 더보기 접기에서 보여지게 되는 내용의 제목과 같은 역할을 하는 태그

: <summary>태그 다음에는 ul, li, span, div, p 태그 등을 사용할 수 있으며 <summary>태그에 해당하는 내용들을 넣을 수 있음

: 자바스크립트 제이쿼리를 사용하여 기능을 붙이지 않아도 html 태그만으로 열기 닫기 기능이 구현됨

: 속성으로 open이 있음

: details 태그를 사용하면 기본적으로 더보기 접기 구별을 위한 검정색 삼각형이 왼쪽에 자동으로 배치됨

: details 태그는 display: blodk; 속성을 가지고 있음

 

<details>
    <summary>click</summary>
    <p>내용 내용 내용 내용 내용 내용 내용 내용</p>
</details>

---

참고

https://rgy0409.tistory.com/4140

https://abcdqbbq.tistory.com/96