YJ의 새벽

HTML (이미지와 멀티미디어) 본문

WebFront_/HTML,CSS

HTML (이미지와 멀티미디어)

YJDawn 2023. 2. 1. 15:34

--무료이미지 다운사이트  

--픽사베이 사용.

Document 게티이미지
게티이미지2
픽사베이

 

--웹브라우저별로 지원하는 이미지파일 형식이 다름,

Document 파일형식확인사이트

 

--저작권없는 무료음원 다운사이트

Document 밴사운드 사이트

 

--저작권없는 무료동영상 다운사이트

Document 픽사베이 사이트

 

 

 

 

 

  • < 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>

기본 640x327 이미지에서

 

  •    EX ))) 이미지 크기  예제 ( width  ,  height   , title )
<body>
    <h3>이미지 출력 예제</h3>
    <img src="gorilla.jpg" alt="고릴라" title="고릴라임다" width="300px" height="200px">
</body>

--title 사용하면, 커서올려놨을때 '고릴라임다' 표시

300x200 이미지로 바뀜.

 

 

  •  < 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
'WebFront_/HTML,CSS' Related Articles more
Comments