반응형
HTML, 확장/축소, <details> 태그 예제
[기본 문법]
<details>
<summary>
제목 or 요약 정보
</summary>
상세 정보
...
</details>
다음은 해당 태그를 이용한 예제입니다.
details 예제 두개를 사용하는데,
위는 초기에 닫힌 모습이고 아래는 초기에 확장된 형태로 보여줍니다.
[ test.html ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>태그 연습</title>
<style>
pre {
white-space:pre-wrap; /* 공백/탭을 그대로 */
word-break:break-all; /* 텍스트 줄바꿈 */
}
</style>
</head>
<body>
<details>
<summary>
애국가 가사 (초기 축소형)
</summary>
<pre>
[가사 1절]
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려강산
대한 사람 대한으로 길이 보전하세.
[가사 2절]
남산 위에 저 소나무 철갑을 두른 듯
바람 서리 불변함은 우리 기상일세.
무궁화 삼천리 화려강산
대한 사람 대한으로 길이 보전하세.
</pre>
</details>
<br>
<details open>
<summary>
애국가 가사 (초기 확대형)
</summary>
<pre>
[가사 1절]
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려강산
대한 사람 대한으로 길이 보전하세.
[가사 2절]
남산 위에 저 소나무 철갑을 두른 듯
바람 서리 불변함은 우리 기상일세.
무궁화 삼천리 화려강산
대한 사람 대한으로 길이 보전하세.
</pre>
</details>
</body>
</html>
[화면] test.html을 더블클릭하여 웹브라우저에서 실행한 모습
반응형
'HTML, CSS' 카테고리의 다른 글
| HTML 쿠키 저장, 읽기, 삭제 테스트 예제 (0) | 2025.01.07 |
|---|---|
| 모바일 웹, details 태그 예제 (0) | 2024.12.20 |
| 모바일 웹 사이트 만들기 (with 피그마 & 제플린) (0) | 2024.12.19 |
| 모바일 웹 만들기 (0) | 2024.12.18 |
| 자바스크립트를 줄여야 하는 이유 (0) | 2022.06.16 |