웹문서에서 다양한 내용 입력하기(5)
2022. 8. 17. 16:18ㆍ개인활동/HTML+CSS+JS
반응형
Do it! 한권으로 끝내는 웹 기본 교과서
HTML+CSS+JS 웹표준의 정석
으로 웹개발 공부 시작함.
멀티미디어 삽입하기
<object>
- 오디오, 비디오, 자바애플릿, PDF 등 다양한 멀티미디어를 삽입할 때 사용
- width, height 속성을 사용해 크기를 지정
- 닫는 태그 필수
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>미디어삽입하기</title>
</head>
<body>
<object width="500" height="500" data="KCI_FI002729136.pdf"></object>
</body>
</html>
<embed>
- html 초기 버전부터 사용해 대부분 브라우저에서 사용 가능함
- src="파일경로"
- width, height 옵션으로 사이즈 조절 가능
- mp4, webm 확장자, mp3, mp4, m4a 확장자 지원
<audio>, <video>
- controls : 플레이어 화면에 컨트롤바를 표시하는 속성
- autoplay : 오디오나 비디오를 자동으로 실행하는 속성
- loop : 오디오나 비디오를 반복재생하는 속성
- muted : 오디오나 비디오의 소리를 제거하는 속성
- preload : 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정하는 속성, auto, metadata, none값이 있으며, auto값이 기본임
- width, height : 너비와 높이를 지정하는 속성
- poster="파일이름" : video 태그에서 사용하는 속성으로 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정하는 옵션
반응형
'개인활동 > HTML+CSS+JS' 카테고리의 다른 글
| 입력양식 작성하기(1) (0) | 2022.08.30 |
|---|---|
| 웹문서에서 다양한 내용 입력하기(6) (0) | 2022.08.29 |
| 웹문서에서 다양한 내용 입력하기(4) (0) | 2022.08.17 |
| 웹문서에 다양한 내용 입력하기(3) (0) | 2022.08.17 |
| 웹문서에 다양한 내용 입력하기(2) (0) | 2022.08.11 |