[html 태그] details, summary 태그 (내부 정보 열기/닫기)

일반적으로 버튼을 만들고 해당 버튼을 클릭하면

내부에 있는 내용이 노출될 수 있도록 작업을 하는 경우에

자바스크립트를 사용해서 관련 내용을 만든다.

 

하지만 html5에 들어서면서 이러한 내용들을 html만을 이용해서 만들 수 있게 되었다.

 

1. details 태그의 사용

<details> 태그는 html5에서 추가 된 태그로 

하위 요소로 <summary> 태그를 사용해서 <detail> 태그 안의 내용을 열기/닫기를 통해 보여준다.

<details>
  <summary>사내 공지사항</summary>
  <ul>
    <li>1. 공지사항 1번입니다.</li>
    <li>2. 공지사항 2번입니다.</li>
    <li>3. 공지사항 3번입니다.</li>
  </ul>
</details>

<details>
  <summary>사내 최고봉</summary>
  <div>사장님</div>
</details>

 

 

기본적인 사용 방법은 위와 같다.

<details>태그 안에 하나의 <summary>태그와 그 뒤에 추가적인 태그로 구성된다.

 

이 때, <summary> 태그 뒤에는 <ul>, <li>태그와 같이 리스트 형식으로 태그를 작성해도 되고

<span>이나 <div>를 나열해도 원하는 결과를 받을 수 있다.

(보여지는 내용이 리스트 형식이라면 리스트 태그 사용 추천)

 

2. details 태그의 활용

details 태그에 css로 스타일을 입혀서 좀 더 보기 좋게 만들 수 있다.

그리고 <summary> 태그 뒤에 오는 내용들에 <a>태그나 <button> 태그를 사용해서

버튼의 역할을 부여할 수도 있다.

<style>
  details{margin-bottom:10px;}
  details summary{padding:0 10px; background:#000; color:#fff; height:35px; line-height:35px; font-weight:bold; cursor:pointer;}
  details summary::marker{font-size:0;}
  details ul{border:1px solid #aaa;}
  details ul li a{display:block; padding:5px 10px;}
  details ul li a:hover{background:#333; color:#fff;}
  details .txt{border:1px solid #999; padding:5px 10px; text-align:center;}
</style>

<details>
  <summary>사내 공지사항</summary>
  <ul>
    <li><a href="#">1. 공지사항 1번입니다.</a></li>
    <li><a href="#">2. 공지사항 2번입니다.</a></li>
    <li><a href="#">3. 공지사항 3번입니다.</a></li>
  </ul>
</details>

<details>
  <summary>사내 최고봉</summary>
  <div class="txt">사장님</div>
</details>

 

 

위 예시와 같이 css는 내가 원하는대로 정의할 수 있다.

cursor:pointer를 사용해서 버튼과 같이 마우스 오버했을 때 손가락 모양으로 노출시킬 수도

:marker{font-size:0;}을 통해 <summary>태그 앞에 붙은 화살표 모양을 없앨 수도 있다.

 

3. details 태그 사용의 주의사항

<details> 태그는 인터넷 익스플로어에서는 사용할 수 없기 때문에 익스플로어를 고려한 작업시에는 사용하지 말아야한다.

인터넷 익스플로어의 사용이 줄고 있고 곧 서비스가 종료가 되지만 아직까지 지원하려고 하는 회사가 있기 때문에

사용시 주의가 필요하다.

 

 

 

---

참고

https://developer.mozilla.org/ko/docs/Web/HTML/Element/details