HTML5에서 추가된 유용한 태그 <details>

이 포스트는 HTML5에서 추가된 <details> … </details> 태그에 관한 내용입니다.

이 태그는 기존에 자바스크립트를 이용해서 구현하였던 내용 접기/펼치기 기능을 자바스크립트 없이 구현하기 위한 태그입니다. 블로그 등을 보면 ‘더 보기’ 단추가 있고 누르면 숨겨져 있던 내용들이 나오며 ‘접기’ 버튼을 누르면 내용이 다시 숨겨지는 기능이 있었는데 바로 이 기능을 자바스크립트 없이 구현하기 위해 이 태그가 추가된 것입니다.

다음 코드를 봅시다.

<details>
	<p>엄마야 누나야, 강변 살자.<br />
	뜰에는 반짝이는 금모래 빛<br />
	뒷문 밖에는 갈잎의 노래<br />
	엄마야 누나야, 강변 살자.</p>
</details>

이 코드는 다음과 같이 표시될 것입니다.

이와 같이 칠해진 삼각형 표시 뒤에 ‘세부정보’라는 문구가 있고 눌러 보면 삼각형의 방향이 변하면서 숨겨져 있던 내용이 나타납니다. 그리고 세부정보 문구를 다시 눌러 보면 내용이 다시 숨겨지는 것을 알 수 있습니다.

그리고 이 ‘세부정보’라는 문구를 다른 문구로 바꿀 수도 있는데, 이 때는 <summary> … </summary> 태그를 안에 써서 ‘세부정보’ 대신 표시될 문구를 지정할 수 있습니다.

<details>
	<summary>진달래꽃 - 엄마야 누나야 (김소월)</summary>
	<p>엄마야 누나야, 강변 살자.<br />
	뜰에는 반짝이는 금모래 빛<br />
	뒷문 밖에는 갈잎의 노래<br />
	엄마야 누나야, 강변 살자.</p>
</details>

이렇게 쓰면

이렇게 ‘세부정보’ 대신 <summary> 안에 써 넣은 문구가 대신 표시되는 것을 알 수 있습니다.

<details open>
	<summary>진달래꽃 - 엄마야 누나야 (김소월)</summary>
	<p>엄마야 누나야, 강변 살자.<br />
	뜰에는 반짝이는 금모래 빛<br />
	뒷문 밖에는 갈잎의 노래<br />
	엄마야 누나야, 강변 살자.</p>
</details>

[2017. 11. 26. 추가] 위와 같이 태그에 open을 추가하면

이렇게 처음부터 펼쳐진 상태로 보여집니다.

이와 같이 HTML5에서는 <details> 태그를 이용하여 자바스크립트 없이도 접기/펼치기 기능을 이용할 수 있습니다.

* 주의: 아직은 인터넷 익스플로러와 엣지에서 이 태그를 지원하지 않아서 기능이 동작하지 않습니다.