[HTML] 미디어 - svg, 음악, 영상

SVG(Scalable Vector Graphic)

add_to_queue 새 창에서 열기

 

• 벡터 그래픽 ( 👉 MDN 페이지 )
• 비교적 복잡하지 않은 도형, 그래픽을 표현하는데 유리
• .svg 파일을 img에 연결, 또는 svg 태그에 직접 작성 가능

 

유용한 SVG 관련 툴

• 👉 Shape Divider
• 👉 Haikei

---

 

오디오와 동영상

add_to_queue 새 창에서 열기

 

속성설명비고

src	미디어 파일 위치	source 태그로 대체 가능
controls	제어 인터페이스
autoplay	자동재생	일반적으로 브라우저에서 막아놓음
loop	반복재생

1. src 속성을 사용한 링크

- controls를 필수로 넣어야 미디어를 재생할 수 있다.

- autoplay, loop를 넣을 수 있다. 

 

<figure>

        <figcaption class="sr-only">

          얄코 영상 오디오

        </figcaption>

   

        <audio

          src="https://showcases.yalco.kr/html-css-scoop/03-05/audio.mp3"

          controls>

        </audio>

   

      </figure>

   

      <br>

   

      <figure>

        <figcaption class="sr-only">

          얄코 영상 비디오

        </figcaption>

   

        <video

          src="https://showcases.yalco.kr/html-css-scoop/03-05/video.mp4"

          controls>

        </video>

      </figure>

2. source 태그를 사용한 링크

- 여러 개의 source를 제공 가능하고 만약 모든 미디어가 지원되지 않을경우 p 태그 내용을 표시한다.

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

   

      <br>

   

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