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
https://www.youtube.com/watch?v=EMOlLLTAZMs
https://caniuse.com/?search=summary
'HTML' 카테고리의 다른 글
SVG 기본 정의 및 네임 스페이스(name space) (0) | 2022.07.19 |
---|