1. 이미지
<img> 태그로 본문에 이미지 삽입
파일 형식 : jpg, png, gif
주요 속성
src : 이미지 위치 정보 작성
alt : 이미지가 출력되지 않을 때 출력할 대체 문자열 지정.
title : 툴팁 출력
width,height : 가로, 세로 크기 지정
style : 이미지에 대한 스타일 시트 지정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지와 문자열</title>
<style type="text/css">
p {
border: 1px solid black;
width: 80%;
height: 100px;
background-image: url('image/pic_trulli.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
color: white;
}
body {
background-image: url('image/img_girl.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
</style>
</head>
<body>
<p><img src="image/smiley.gif" alt="스마일"
style="float:right;width:42px;height:42px">
이미지가 이 글의 오른쪽에 위치 합니다.
</p>
<p><img src="image/smiley.gif" alt="스마일"
style="float:left;width:42px;height:42px">
이미지가 이 글의 왼쪽에 위치 합니다.
</p>
</body>
</html>
2. 오디오
<audio> 태그로 본문에 오디오 삽입.
파일형식 : mp3, ogg, wav
주요속성
src : 사운드 파일 위치 작성
controls : 제어기 출력
loop : 반복 재생
autoplay : 페이지가 열리면 자동 재생 (크롬에서는 안됨.)
muted : 음소거 상태 시작
preload : 재생 여부와 상관 없이 미리 다운로드
<source> 태그로 여러 파일을 지정.
브라우저 별 실행 가능 파일이 다르기 때문에 여러개의 파일을 등록해서 가능한 파일이 실행되도록 처리.
작성한 순서대로 처리함.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>audio page</title>
</head>
<body>
<h3> 오디오 자동 재생</h3>
<audio src = "audio/eagle.mp3"
controls autoplay loop muted>
</audio>
<audio controls loop>
<source src="audio/chicken.mp3" type="audio/mpeg">
<source src="audio/chicken.ogg" type="audio/ogg">
<source src="audio/chicken.wav" type="audio/wav">
오디오 파일을 재생할 수 없습니다.
</audio>
</body>
</html>
3. 비디오
<video> 태그를 사용하여 동영상 삽입.
파일 형식 : mp4, webm, ogg
주요 속성
src : 동영상 파일 위치 지정
controls : 제어기 출력
width, height : 가로, 세로 크기 지정
loop : 반복 재생
autoplay : 페이지 시작 시 자동 재생 (크롬에선 안됨.)
muted : 음소거
preload : 재생과 상관 없이 미리 다운로드 함.
poster : 재생 전에 표시될 이미지 지정.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비디오</title>
</head>
<body>
<h3>비디오 재생</h3>
<video src="video/mov_bbb.mp4" controls autoplay loop>
</video>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/3OGipn2RWkI"
frameborder="0" allow="accelerometer; autoplay; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
'HTML & CSS' 카테고리의 다른 글
| CSS 기초 문법 (0) | 2022.08.29 |
|---|---|
| 블록과 인라인 (0) | 2022.08.29 |
| <list> 태그 / <table> 태그 (0) | 2022.08.29 |
| 수평선 <hr> / 링크걸기 <a> 태그 (0) | 2022.08.29 |
| HTML 태그와 텍스트 관련 태그 (0) | 2022.08.29 |