웹/HTML
[HTML] 미디어 - svg, 음악, 영상
Judith Hopps
2023. 1. 7. 16:48
반응형
SVG(Scalable Vector Graphic)
- 벡터 그래픽 ( 👉 MDN 페이지 )
- 비교적 복잡하지 않은 도형, 그래픽을 표현하는데 유리
- .svg 파일을 img에 연결, 또는 svg 태그에 직접 작성 가능
유용한 SVG 관련 툴
오디오와 동영상
속성설명비고
| src | 미디어 파일 위치 | source 태그로 대체 가능 |
| controls | 제어 인터페이스 | |
| autoplay | 자동재생 | 일반적으로 브라우저에서 막아놓음 |
| loop | 반복재생 |
1. src 속성을 사용한 링크
- controls를 필수로 넣어야 미디어를 재생할 수 있다.
- autoplay, loop를 넣을 수 있다.
<figure>
<figcaption class="sr-only">
얄코 영상 오디오
</figcaption>
<audio
controls>
</audio>
</figure>
<br>
<figure>
<figcaption class="sr-only">
얄코 영상 비디오
</figcaption>
<video
controls>
</video>
</figure>
2. source 태그를 사용한 링크
- 여러 개의 source를 제공 가능하고 만약 모든 미디어가 지원되지 않을경우 p 태그 내용을 표시한다.
<figure>
<figcaption class="sr-only">
얄코 영상 오디오
</figcaption>
<audio controls>
<source
type="audio/mpeg">
<source
type="audio/wav">
<p>이 브라우저에서 오디오 태그가 지원되지 않습니다.</p>
</audio>
</figure>
<br>
<figure>
<figcaption class="sr-only">
얄코 영상 비디오
</figcaption>
<video controls>
<source
type="video/quicktime">
<source
type="video/mp4">
<source
type="video/webm">
<p>이 브라우저에서 비디오 태그가 지원되지 않습니다.</p>
</video>
</figure>
반응형