HTML5 detail Tag

HTML5가 생긴지도 엄청나게 오래되었는데, 아직 순수하게 HTML5 태그를 사용하여 진행하는 프로젝트는 거의 해보지 못했다. 국내 익스활용도가 너무 높은데다 하위버전 호환성까지 고려하자면 태그인식을 위해 스크립트를 로딩해야하고 그렇게되면 속도문제도 발생되고... 등등... 프로젝트마다 환경적인 요인이 발생되는 일이 많다.
이번에 기회가 생겨서 새로 생긴 HTML5 태그들을 다시 훑어보다보니 details 라는 태그가 아주 쓸만하여 사용해볼까 한다.

참조 : https://www.w3schools.com/tags/tag_details.asp (새창으로 열림)

위와 같이 소스를 입력하면 아래와 같은 형태의 모양이 나온다.

"Copyright ...." 라고 써진 부분이  summary 태그의 내용인데 클릭이 가능하며,
클릭시 그 아래 내용들이 펼쳐지면서 보인다.

위 Note에도 있듯이 익스는 지원하지 않는다~~!!!!!
아래에 있는 Browser Support를 꼭 확인하자~~~

Summary 앞에 있는 open/close 표시용 블릿은 css를 사용하여 수정이 가능하다.

간단히 해보자면,

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

이렇게 css를 수정해주면 앞에 블릿대신, '>>' 라는 표시로 대체된다.
블릿대신 이미지를 사용하는 것도 background로 간단히 해결할 수 있다.

스크립트로 open/close 기능을 구현하였는데 HTML 태그로만으로도 가능하니..
의미상으로 표준에 맞게 사용한다면 유용하게 사용할 수 있을것 같다.