YunDev

HTML - <details> 태그와 <summary> 태그를 알아보자! 본문

Programming/HTML

HTML - <details> 태그와 <summary> 태그를 알아보자!

S준 2020. 3. 15. 23:15

 

오늘은 <details>, <summary> 태그에 대해서 알아보도록 합시다!

 

 

 

 

 

details 태그는 상세 내용을 생략하고 요약된 정보를 보여주는데 사용합니다.

summary 태그는 화살표 표시를 통해 생략 된 상세 내용을 보여줍니다. details 태그와 같이 사용하기 때문에 details 태그가 없다면 상세 내용이 화살표도 없이 상세내용이 펼처진 채로 나옵니다.

 

<details> //태그가 있을 때
	<summary>북한산(836m)</summary>
	<p>고양시 , 양주시 , 은평구 , 강북구 , 종로구 , 성북구에 걸쳐 있다.
	백운데 , 인수봉 , 만경대 등 3봉우리가 솟아 있다고 해서 삼각산으로도 불린다.</p>
</details>

 

 

 

<summary>북한산(836m)</summary> //태그가 없을 때
	<p>고양시 , 양주시 , 은평구 , 강북구 , 종로구 , 성북구에 걸쳐 있다.
	백운데 , 인수봉 , 만경대 등 3봉우리가 솟아 있다고 해서 삼각산으로도 불린다.</p>

 

이것이 details 태그가 있을 때와 없을 때의 차이입니다.

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Details 태그를 사용해보자!</title>
</head>
<body>
<h2>서울 시내 주요 등산로</h2>
<details>
	<summary>북한산(836m)</summary>
	<p>고양시 , 양주시 , 은평구 , 강북구 , 종로구 , 성북구에 걸쳐 있다.
	백운데 , 인수봉 , 만경대 등 3봉우리가 솟아 있다고 해서 삼각산으로도 불린다.</p>
</details>
<details>
	<summary>도봉산(740m)</summary>
	<p>북쪽의 사패산에서 남쪽의 우이동까지 길게 뻗어 있다. 자운봉이 가장 높은 주봉이되 사람이 올라갈 수는 없으며 바로 옆의 선인봉까지만 올라갈 수 있다.</p>
</details>
<details>
	<summary>수락산(640m)</summary>
	<p>도봉산 옆에 있다. 물이 떨어지는 산이라는 뜻이며 그만큼 폭포가 많다.</p>
</details>
<details>
	<summary>북한산(836m)</summary>
	<p>고양시 , 양주시 , 은평구 , 강북구 , 종로구 , 성북구에 걸쳐 있다.
	백운데 , 인수봉 , 만경대 등 3봉우리가 솟아 있다고 해서 삼각산으로도 불린다.</p>
</details>
</body>
</html>

 

화살표시를 눌렀을 때

 

 

주의할 점 : 구글에서 실행하셔야 요약된 상태로 나옵니다. Explorer로 하시면 처음부터 상세 내용이 펼처진 상태로

나옵니다!

 

 

 

 

 

 

이렇게 details 태그와 summary 태그에 대해서 알아보았습니다~~! 

저작자표시 비영리 동일조건

'Programming > HTML' 카테고리의 다른 글

HTML 하이퍼 링크 걸기  (3) 2020.03.13
HTML - 시작하기  (1) 2020.03.11
'Programming/HTML' Related Articles more