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

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

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

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

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

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

이와 같이 칠해진 삼각형 표시 뒤에 ‘Details’라는 문구가 있고 눌러 보면 삼각형의 방향이 변하면서 숨겨져 있던 내용이 나타납니다. 그리고 Details 문구를 다시 눌러 보면 내용이 다시 숨겨지는 것을 알 수 있습니다. 그리고 이 ‘Details’라는 문구를 다른 문구로 바꿀 수도 있는데, 이 때는 <summary> … </summary> 태그를 안에 써서 ‘Details’ 대신 표시될 문구를 지정할 수 있습니다.

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

이렇게 쓰면

진달래꽃 - 엄마야 누나야 (김소월)

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

이렇게 ‘Detail’ 대신 <summary> 안에 써 넣은 문구가 대신 표시되는 것을 알 수 있습니다.
그리고, 여기에 'open' 을 추가하면

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

진달래꽃 - 엄마야 누나야 (김소월)

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

이렇게 처음부터 펼쳐진 상태로 보여집니다.
이와 같이 HTML5에서는 <details> 태그를 이용하여 자바스크립트 없이도 접기/펼치기 기능을 이용할 수 있습니다.
* 주의: 아직은 인터넷 익스플로러와 엣지에서 이 태그를 지원하지 않아서 기능이 동작하지 않습니다.

출처 : http://parkjuwan.dothome.co.kr/wordpress/

Google

Twitter

Facebook