YJ의 새벽
HTML (이미지와 멀티미디어) 본문
--무료이미지 다운사이트
--픽사베이 사용.
게티이미지2
픽사베이
--웹브라우저별로 지원하는 이미지파일 형식이 다름,
--저작권없는 무료음원 다운사이트
--저작권없는 무료동영상 다운사이트
- < img > 태그
--< img > 요소에는 src 속성과 alt 속성(선택)을 반드시 명시해야함.
ex) < img src = "/examples/images/imag_monalisa.png" alt = "모나리자" >
src : 삽입하는 이미지파일의 이름(경로) 지정
width : 이미지 가로
height : 이미지 세로
title : 마우스포인터 갖다댔을때 나타나는 이미지설명
- EX ))) <img> 태그
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>이미지 출력 예제</title>
</head>
<body>
<h3>이미지 출력 예제</h3>
<img src="gorilla.jpg" alt="고릴라" >
</body>
</html>
- EX ))) 이미지 크기 예제 ( width , height , title )
<body>
<h3>이미지 출력 예제</h3>
<img src="gorilla.jpg" alt="고릴라" title="고릴라임다" width="300px" height="200px">
</body>
--title 사용하면, 커서올려놨을때 '고릴라임다' 표시
- < audio > < /audio > 태그
--<audio> 태그는 HTML5 에서 새롭게 추가된 태그.
IE8 이하에서는 사용할수없다.
embed 태그를 사용하면 가능하다.
src : 삽입하는 오디오 파일의 이름(경로) 지정
preload : 재생 전에 음악파일을 모두 불러올것인지 지정
autoplay : 자동시작 지정
muted : 오디오 재생하지만 음소거
loop : 무한반복 지정
controls : 음악재생도구 표시여부 지정
<body>
<h3>오디오 재생 예제</h3>
<audio src="sound.mp3" controls></audio>
</body>
- < video > < /video > 태그
src : 삽입하는 비디오 파일의 이름(경로) 지정
controls : 화면에 플레이어 표시여부 지정
autoplay : 자동시작 지정 ** 구글 크롬(chrome) 에서는 muted 넣어줘야함.
loop : 무한반복 지정
width : 동영상의 가로길이
height : 동영상의 세로길이
<body>
<h3>비디오 재생 예제</h3>
<video src="cat.mp4" controls width="200" height="100" ></video> <br>
<video src="dog.mp4" controls width="200" height="100" ></video>
</body>
'WebFront_ > HTML,CSS' 카테고리의 다른 글
| CSS (박스모델) (0) | 2023.02.02 |
|---|---|
| CSS (선택자,스타일(link)) (0) | 2023.02.02 |
| HTML (테이블과 폼 양식) (0) | 2023.02.01 |
| HTML (텍스트/태그) (0) | 2023.02.01 |
| HTML (Visual Studio Code) (0) | 2023.02.01 |
