<detail> - js없이 아코디언 메뉴

js가 없이 html 태그로만 아코디언 메뉴를 만드는 방법

 

MDN 의 설명에 따르면 열림 상태일 때에만 내부 정보를 보여주는 정보 공개 위젯이라고 되어있다.

간단히 발하면 클릭 시 세부 정보가 보여지도록 하는 아코디언 메뉴를 떠올리면 된다.

 

<details> 태그 내부에 생성하는 <summary> 태그는 아코디언 메뉴의 타이틀로 사용되며, 만약 생략할 경우, 브라우저에서는 기본 요약 문자열("상세", "세부정보" 등)으로 표기된다.

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

 

 

details가 처음부터 열려 있는 상태로 나타나게 하려면 open 속성을 지정하면 된다.

<details open>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

css로 외형을 커스텀 적용할 수 있다.

details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;
}

summary {
    font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;
}

details[open] {
    padding: .5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;
}

펼쳐지는 움직임이 너무 딱딱해보여서 애니메이션을 줘봤다.

details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}

@keyframes sweep {
  0%    {opacity: 0; transform: translateX(-10px)}
  100%  {opacity: 1; transform: translateX(0)}
}

아무래도 아직 details 태그에 대한 활용이 100% 되지 않아서 움직임이 좀 어설프지만 그래도 JS 없이 이정도면 어느정도 활용해서 사용하기 용이할 것 같다.

 

실제로 사용한다면 아마 각 요소의 백그라운드 또는 보더를 따로 적용하고 위치를 잡고 사용한다면 기존 JS로 적용하는 것과 동일한 효과를 사용할 수 있지 않을까 싶다.

 

또, 기본적으로 제공되는 열림/닫힘을 나타내는 삼각형의 외형도 바꿀 수 있다.

summary 요소에 list-style 단축 속성과 list-style-type, list-style-image 속성 등으로 삼각형을 원하는 대로 바꿀 수 있다.

삼각형을 아예 제거하려면 list-style: none을 지정하면 된다.

 

Chrome은 아직 지원하지 않으니 비표준 ::-webkit-details-marker를 사용해야 한다.(ie는 summary를 지원 안함.)

details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

 

 

<참고 자료>

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

<details> - HTML: Hypertext Markup Language | MDN

https://www.youtube.com/watch?v=EMOlLLTAZMs 

https://caniuse.com/?search=summary 

"summary" | Can I use... Support tables for HTML5, CSS3, etc