- <audio>
: 오디오를 재생
controls : 오디오 플레이어를 화면에 표시
autoplay : 자동 재생
loop : 자동 반복
📌

<!DOCTYPE html>
<!-- src/main/webapp/3/audio.html -->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<audio src="bass.mp3" controls autoplay loop></audio>
</body>
</html>
- <video>
: 비디오 파일 삽입
width 및 height : 비디오 플레이어의 너비와 높이
controls : 비디오 화면에 마우스 올렸을 때 플레이어가 화면에 표시
특정 비디오 파일을 재생하려면 해당 포맷의 코덱 프로그램이 있어야 한다
📌

<!DOCTYPE html>
<!-- src/main/webapp/3/video.html =>현재폴더 3
src/main/webapp/sample-video.html => 3폴더를 기준으로 상대 경로
src="../sample-video.mp4"
src/main/webapp/sample-video.html => 절대 경로
src="/htmlcss/sample-video.mp4"
video/mp4 : MIME 형식. 파일의 종류 표시. 마임방식 ex)image/gif
-->
<!-- ..은 상위폴더 .은 현재폴더 -->>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<video width = "560" height="480" autoplay controls loop>
<source src= "../sample-video.mp4" type = "video/mp4">
</video>
</body>
</html>
- 링크 걸기
: 글자나 이미지에 다른 웹 페이지를 연결하는 것
<a></a> : 링크 거는 역할
href : 클릭시 이동 할 주소
📌

<!DOCTYPE html>
<!-- src/main/webapp/3/link1.html-->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>글자에 링크걸기</h3>
<h4><a href ="page1.html">게코도마뱀</a></h4>
<h4><a href ="page2.html">크라운피시</a></h4>
<br>
<h3>이미지에 링크걸기</h3>
<h4><a href ="page1.html"><img src = "img/lizard.jpg" width="100"></a></h4>
<h4><a href ="page2.html"><img src = "img/fish.jpg" width="100"></a></h4>
</body>
</html>
- 새로운 탭으로 링크 걸기
1. target
: 속성 값으로 _blank 지정
: 웹 브라우저의 새로운 탭에 해당 웹페이지 표시
📌

<!DOCTYPE html>
<!-- src/main/webapp/3/link2.html-->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>새로운 탭으로 링크걸기</h3>
<h4><a href = "http://www.naver.com" targer="_blank">네이버</a></h4>
<h4><a href = "http://www.google.com" targer="_blank">구글</a></h4>
<h4><a href = "http://www.daum.com" targer="_blank">다음</a></h4>
</body>
</html>
'수업(국비지원) > HTML, CSS' 카테고리의 다른 글
| [HTML/CSS] CSS 적용 (0) | 2023.04.17 |
|---|---|
| [HTML/CSS] HTML의 기본 구조 - 테이블 삽입하기 (0) | 2023.04.17 |
| [HTML/CSS] HTML의 기본 구조 - 이미지 삽입하기 (0) | 2023.04.17 |
| [HTML/CSS] HTML의 기본 구조 - HTML 태그 (0) | 2023.04.17 |
| [HTML/CSS] HTML의 기본 구조 (0) | 2023.04.17 |