[HTML/CSS] HTML의 기본 구조 - 오디오,비디오 삽입하기, 링크걸기

<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