SVG(Scalable Vector Graphic)
- 벡터 그래픽
- 비교적 복잡하지 않은 도형, 그래픽을 표현하는 데 유리
- .svg 파일을 img에 연결, 또는 svg 태그에 직접 작성 가능
<img
src="<https://showcases.yalco.kr/html-css-scoop/03-05/yalco-y.svg>"
alt="얄코 이니셜 로고"
>
<figure>
<figcaption class="sr-only">
SVG 형식으로 직접 작성한 얄코 이니셜 로고
</figcaption>
<svg
version="1.1" id="layer_1"
xmlns="<http://www.w3.org/2000/svg>"
xmlns:xlink="<http://www.w3.org/1999/xlink>"
x="0px" y="0px" viewBox="0 0 400 400"
style="enable-background:new 0 0 400 400;"
xml:space="preserve"
>
<style type="text/css">
.st0{fill:#FF4E00;}
</style>
<g>
<path
class="st0"
d="M295.77,139.85c-3.3-6.59-10.03-10.75-17.4-10.75h-60.52c-10.74,0-19.45,8.71-19.45,19.45
c0,10.74,8.71,19.45,19.45,19.45h21.62l-38.9,51.87l-62.25-82.99c-6.45-8.59-18.63-10.34-27.23-3.89
c-8.59,6.45-10.34,18.64-3.89,27.23l69.06,92.07l-65.1,86.79h-36.2V253.9c0-3.24-0.81-6.43-2.36-9.27l-23.99-44.21l23.99-44.2
c1.55-2.85,2.36-6.04,2.36-9.28V61.75h41.13c10.74,0,19.45-8.71,19.45-19.45s-8.71-19.45-19.45-19.45H55.5
c-10.74,0-19.45,8.71-19.45,19.45V142L9.39,191.14c-3.14,5.79-3.14,12.77,0,18.55l26.66,49.15v99.7c0,10.74,8.71,19.45,19.45,19.45
h60.58c3.71,0,7.13-1.09,10.08-2.89c4.68-0.84,9.07-3.29,12.15-7.39l155.62-207.49C298.35,154.32,299.06,146.44,295.77,139.85z"
/>
<path
class="st0"
d="M391.29,191.14L364.63,142V42.3c0-10.74-8.71-19.45-19.45-19.45H284.6c-10.74,0-19.45,8.71-19.45,19.45
s8.71,19.45,19.45,19.45h41.13v85.19c0,3.24,0.81,6.43,2.36,9.27l23.98,44.2l-23.98,44.21c-1.55,2.85-2.36,6.03-2.36,9.27v85.18
H284.6c-10.74,0-19.45,8.71-19.45,19.45c0,10.74,8.71,19.45,19.45,19.45h60.58c10.74,0,19.45-8.71,19.45-19.45v-99.7l26.66-49.15
C394.43,203.91,394.43,196.92,391.29,191.14z"/>
</g>
</svg>
</figure>
오디오와 동영상
A. src 속성을 사용한 링크
<figure>
<figcaption class="sr-only">
얄코 영상 오디오
</figcaption>
<audio
src="<https://showcases.yalco.kr/html-css-scoop/03-05/audio.mp3>"
controls>
</audio>
</figure>
<figure>
<figcaption class="sr-only">
얄코 영상 비디오
</figcaption>
<video
src="<https://showcases.yalco.kr/html-css-scoop/03-05/video.mp4>"
controls>
</video>
</figure>
| 속성 |
설명 |
비고 |
src |
미디어 파일 위치 |
source 태그로 대체 가능 |
controls |
제어 인터페이스 |
|
autoplay |
자동재생 |
일반적으로 브라우저에서 막아놓음 |
loop |
반복재생 |
|
B. source 태그를 사용한 링크
<figure>
<figcaption class="sr-only">
얄코 영상 오디오
</figcaption>
<audio controls>
<source
src="<https://showcases.yalco.kr/html-css-scoop/03-05/audio.mp3>"
type="audio/mpeg">
<source
src="<https://showcases.yalco.kr/html-css-scoop/03-05/audio.wav>"
type="audio/wav">
<p>이 브라우저에서 오디오 태그가 지원되지 않습니다.</p>
</audio>
</figure>
<figure>
<figcaption class="sr-only">
얄코 영상 비디오
</figcaption>
<video controls>
<source
src="<https://showcases.yalco.kr/html-css-scoop/03-05/video.mov>"
type="video/quicktime">
<source
src="<https://showcases.yalco.kr/html-css-scoop/03-05/video.mp4>"
type="video/mp4">
<source
src="<https://showcases.yalco.kr/html-css-scoop/03-05/video.webm>"
type="video/webm">
<p>이 브라우저에서 비디오 태그가 지원되지 않습니다.</p>
</video>
</figure>
- 파일 형식을 지정하지 않은 브라우저에서 이 웹을 열 경우, 대체 미디어나 대체 텍스트를 지정한다.