(예) 저장된 오디오 파일을 사용하는 방법
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title> 오디오 삽입 </title>
</head>
<body>
<h3>오디오 삽입</h3>
<hr>
페이지 로드 이후 음악이 연주됩니다.
<p>
<audio src ="../images/EmbraceableYou.mp3" controls autoplay loop>
브라우저가 audio 태그를 지원하지 않습니다.</audio>
</p>
<p>
<audio src ="../images/𝙽𝚞𝚖𝚋 𝙻𝚒𝚝𝚝𝚕𝚎 𝙱𝚞g.mp3" controls autoplay loop>
브라우저가 audio 태그를 지원하지 않습니다.</audio>
</p>
</body>
</html>
비디오 태그 삽입하기
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title> 비디오 넣기 </title>
</head>
<body>
<h3>비디오삽입</h3>
<hr>
<video src ="../images/bear.mp4" width ="320" height ="240" controls autoplay>
브라우저가 video 태그를 지원하지 않습니다.</video>
</body>
</html>
details 요소는 html3에 새롭게 추가된 요소로서 세부사항을 표시한다.
이 요소를 사용하면 세부사항을 선택적으로 보여 줄 수 있다.
사용자가 요약(summary)를 선택하면 숨겨져 있단 세부사항이 나타나도록 구성하는 기법인데
W3C에서는 디스 클로저 위젯(diclosure widget)이라고 부른다.
summary 요소는 요약(summary)를 표히산다.
여기서의 요약은 details 요소로 제공되는 세부사항에 대한 요약 또는 제목을 의미한다.
"요약 - 세부" 라는 관계를 제대로 전달하기 위해서는 details 요소 다음에 곧바로 summary 요소가 이어져야 한다.
(예) details _ summary
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title> details 와 summary 태그 </title>
</head>
<body>
<h3> details와 summary 태그</h3>
Q & A 리스트
<hr>
<details>
<summary>Question 1</summary>
<p> 웹 개발자가 알아야하는 언어 3가지</p>
</details>
<details>
<summary>Answer 1</summary>
<p> HTML5, CSS, Javascript</p>
</details>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title> MY TITLE </title>
</head>
<body>
<div id ="hearder">
<h1><a href ="https://www.facebook.com/elvis">Elvis Presley</a></h1>
</div>
<div id ="container">
<div>
<div id ="post-1">
<h2><a href ="https://ko.wikipedia.org/wiki/엘비스_프레슬리">
who is Elvis?</a></h2>
<div class ="entry">
<p>엘비스 프레슬리는 20세기 가장 잘 알려진 미국 가수 중 한명이었다.
하나의 문화 아이콘으로, 엘비스의 음악들은 세계적으로 선풍적인 인기를 끌었으며 로큰롤의 제왕으로 불리곤 한다.
그는 미시시피 주의 투펄로에서 태어났다.
</div>
</div>
<div id ="post-2">
<h2 id ="post-2">
<h2><a href ="http://www.biography.com/people/elvis-presley-9446466">
His nusic and life</a></h2>
<div class ="entry">
<p>
엘비스 프레슬리는 20세기 가장 잘 알려진 미국 가수 중 한명이었다.
하나의 문화 아이콘으로, 엘비스의 음악들은 세계적으로 선풍적인 인기를 끌었으며 로큰롤의 제왕으로 불리곤 한다.
그는 미시시피 주의 투펄로에서 태어났다.
</p>
</div>
</div>
</div>
<div>
<a href ="">« Previous Entries></a>
</div>
</div>
<div id ="navigation">
<ul>
<li><h2>Archives</h2>
<ul>
<li><a href = "http://www.elvisthemusic.com/">Elvis The Music</a><li>
<li><a href = "http://www.graceland.com/">Elvis Home Graceland</a><li>
<li><a href = "http://www.last.fm/music/Elvis+Presley">Free Listening, video</a><li>
</ul>
</li>
</ul>
</div>
<div id ="footer">
<p> copyright 2022 Elvis</p>
</div>
</div>
</body>
</html>
'KH > HTML' 카테고리의 다른 글
| # 13 Form Tag (0) | 2022.09.13 |
|---|---|
| # 12 html_시맨틱 태그로 구조화하기 (0) | 2022.09.13 |
| # 10 다운로드, 이미지맵 (2) | 2022.09.08 |
| # 9 META DATA (0) | 2022.09.08 |
| # 8 MARQUEE (0) | 2022.09.08 |