사진과 음악을 좋아하는 개발자 지망생의 블로그

[Web Scraping 기초] HTML - 멀티미디어 본문

개발/웹 스크래핑

[Web Scraping 기초] HTML - 멀티미디어

devculture309 2023. 4. 17. 20:18
반응형
<html lang="ko">
  <head>
    <title>멀티미디어</title>
  </head>
  <body>
    <img src="/asset/그림9.png" alt="꽃사진" />
    <br /><br /><br />
    <video src="/asset/video_sample.mp4"></video>
    -<video>
      <source src="/asset/video_sample.mp4" type="video/mp4" />
    </video>-
    <audio src="/asset/audio_sample.m4a"></audio>
    <!-- audio 태그는 기본 외형이 없음-->
    <br /><br /><br />
    <figure src="/asset/그림9.png">
      <figcaption>에베베베</figcaption>
    </figure>
  </body>
</html>

1) <img>

  - 문서 내에 이미지를 넣을 수  있는 태그

  - 가장 기본적인 이미지 넣는 방법

  - "src" 속성을 사용해 이미지의 경로를 넣으면 이미지가 출력됨           ※ 해당 경로에 이미지가 반드시 있어야 함

  - "alt" 속성을 사용해 이미지 로딩에 문제가 발생했을 시 대체 텍스트를 띄울 수 있음

 

2) <figure>, <figcaption>

  - 하나의 독립적인 콘텐츠로 분리하고 그에 대한 설명을 넣을 수 있는 태그

  - <figcaption> 태그를 사용해 콘텐츠의 설명 혹은 범례를 추가할 수 있고, 제일 처음이나 제일 아래에 추가해서 사용할 수 있다

  - 보통 이미지를 넣는데 인용문, 비디오/오디오 등 문서의 흐름에 참조는 되지만 독립적으로 분리되어도 되는 내용을 담을 수 있

 

3) <video>

  -  문서 내에 영상을 첨부할 수 있는 태그

  - "src" 속성을 사용해 비디오의 경로를 넣으면 이미지가 출력됨           ※ 해당 경로에 이미지가 반드시 있어야 함

  - <source> 태그를 사용하면 여러 타입의 비디오를 제공할 수 있다

  - "controls" 속성을 사용하면 재생/정지 버튼 등이 있는 컨트롤러를 띄울 수 있다

 

4) svg (Scalable Vector Graphics)

  - 일반 이미지와 다르게 수학 공식을 사용하여 그려지기 때문에 해상도의 영향을 받지 않아 확대/축소 시 화질 저하가 없다

  - 주로 크기를 자주 바꾸어야 하는 작은 아이콘에서 많이 사용된다

  - 해상도가 다양하게 변화하는 최근 기기들로 인해 아이콘 외에 로고 등 주요 이미지에도 사용되고 있다

  - <img> 태그 처럼 svg 파일을 불러올 수도 있고 태그를 그대로 사용할 수도 있다.

  - 코드로 이루어져 있기 때문에 스타일을 변경하거나 자바스크립트를 사용해 간단한 기능을 추가할 수도 있다

반응형

'개발 > 웹 스크래핑' 카테고리의 다른 글

[Web Scraping 기초] HTML - 양식 태그 (form, 설명과 입력, 버튼)  (0) 2023.04.17
[Web Scraping 기초] HTML - 리스트, 표, 외부 콘텐츠(iframe)  (2) 2023.04.17
[Web Scraping 기초] HTML - 콘텐츠(Content)  (0) 2023.04.17
[Web Scraping 기초] HTML - Head, Body, 레이아웃  (0) 2023.04.17
[Web Scraping 기초] HTML 기초  (0) 2023.04.17
'개발/웹 스크래핑' Related Articles more