[HTML]아코디언 메뉴 쉽게 만드는 태그 Details

아코디언 메뉴 기능은 우리가 웹상에서 꽤나 자주 볼 수 있는 방법이다. 

대개 Q&A나 FAQ 등 에서 많이 쓰는 방법인데 

질문과 그 질문에 대한 대답

소제목과 그 소제목의 상세 내용

등을 보여줄 때

공간을 최소화하며, 사용자가 본인이 필요한 정보만 선택해서 볼 수 있게 하는 부분이다. 

 

대충 요론거

여태까진 css active modifier 를 이용하거나 javascript 에서 구현을 해왔지만

단순히 HTML만으로 구현할 수 있는 것이 있다. 

바로 

details

 

이 Details로 어떻게 구현하는지 보겠다.

<details>
	<summary>열려라 참깨</summary>
	<span>열렸다 들깨</span>
</details>

details의 태그 안에 2가지 요소를 넣을 수 있다. 

summary 는 Q&A로 보면 Question 에 해당 되는 내용

그리고 아래 Answer로 들어갈 Contents 

여기서는 span으로 하였지만 p로 하던 다른걸 하던 상관 없다.

summary에는 자동으로 열기/닫기 에 대한 화살표가 생긴다. 

css를 통해서 더 이쁜 형태의 아코디언 메뉴를 만들 수도 있다. 

실행 결과는 아래와 같다.

 

열려라 참깨

열렸다 참깨

(css 안해서 그렇다 해서 더 이쁘게 만들 수도 있다)

 

 

HTML5는 알아볼수록 개발자가 CSS나 javascript에 쓰는 노력을 줄이는데 많은 도움을 주려고 한것 같다.

아직도 Web Audio/Vidio는 써보지도 못한 HTML5 API다 

 

나중에 또 알아봐서 포스팅하도록하겠다!