### html Graphic
<canvas> : 자바스크립트를 통해 즉석에서 그래픽을 그리는 데 사용된다.
기본 빈 캔버스 ex)
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
SVG
Scalable Vector Graphics : 웹 그래픽을 정의하는 데 사용된다.
<svg> : SVG 그래픽을 위한 컨테이너이다.
### html Media
<video> : html로 비디오를 표시할 수 있다.
ex)
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
controls : 재생, 일시 중지 및 볼륨과 같은 비디오 컨트롤을 추가한다.
width & height : 높이와 너비를 설정할 수 있다. 설정하지 않으면 비디오가 로드되는 동안 페이지가 깜박일 수 있다.
<source> : 브라우저에서 선택할 수 있는 대체 비디오 파일을 지정할 수 있다. 브라우저에서는 처음 인식된 형식을 사용한다.
시작 태그와 끝 태그 사이의 텍스트는 <video> 를 지원하지 않는 브라우저에만 표시된다.
autoplay : 비디오를 자동으로 시작하게 한다. (모바일 장치에서는 작동하지 않는다.)
ex) <video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<audio> : html로 오디오 파일을 재생할 수 있다.
ex)
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
controls : 재생, 일시 중지 및 볼륨과 같은 오디오 컨트롤을 추가한다.
<source> : 브라우저에서 선택할 수 있는 대체 오디오 파일을 지정할 수 있다. 브라우저에서는 처음 인식 된 형식을 사용한다.
시작 태그와 끝 태그 사이의 텍스트는 <audio>를 지원하지 않는 브라우저에만 표시된다.
<object> : html 문서 내에 포함 된 개체를 정의한다.
ex)
1. <object data="audi.jpeg"></object>
2. <object width="100%" height="500px" data="snippet.html"></object>
<embed> : 역시 html 문서 내에 포함 된 개체를 정의한다.
끝 태그가 없어서 대체 텍스트를 포함할 수 없다.
유튜브 영상
자동재생 : URL 끝에 ?autoplay =1 을 넣어주면 비디오가 자동으로 재생된다. ( 기본값 0 : 비디오가 자동재생되지 않는다.)
ex) <iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>
반복재생 : URL 끝에 ?playlist=링크1,링크2&loop=1 을 넣어주면 비디오가 반복 재생된다. (기본값 0 : 비디오가 한번만 재생된다.)
ex) <iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
컨트롤 : URL 끝에 ?controls=1 을 넣어주면 플레이어 컨트롤이 표시된다.
ex) <iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>
