Articles
HTML 소개
미디어 관련 태그

미디어 관련 태그

이 기사에서는 미디어 관련 태그를 설명합니다.

HTML에서 이미지, 비디오, 오디오 등을 설명하는 방법과 접을 수 있는 요소 및 인라인 프레임을 설명합니다.

YouTube Video

미디어 관련 태그

<img> 태그

Description of the image 
1<img src="/images/image.jpg" alt="Description of the image" width="200">
  • <img> 태그는 이미지를 삽입하는 데 사용됩니다. src 속성은 이미지 경로를 지정하며, alt 속성은 이미지가 표시되지 않을 때의 설명을 제공합니다.

<figure> 및 <figcaption> 태그

A beautiful scenery
A beautiful scenery
1<figure>
2    <img src="/images/image.jpg" alt="A beautiful scenery" width="200">
3    <figcaption>A beautiful scenery</figcaption>
4</figure>
  • <figure> 태그는 이미지나 삽화 등의 미디어 콘텐츠를 <figcaption> 태그를 사용한 캡션과 함께 그룹화합니다.

<picture> 태그

Responsive image 
1<picture>
2    <source media="(min-width: 800px)" srcset="/images/large.jpg">
3    <source media="(min-width: 400px)" srcset="/images/medium.jpg">
4    <img src="/images/small.jpg" alt="Responsive image" width="200">
5</picture>

  • <picture> 태그는 반응형 이미지를 지원하여 서로 다른 디스플레이 조건에 맞는 적절한 이미지를 선택할 수 있도록 합니다.

  • media 속성은 CSS 미디어 쿼리와 동일한 형식으로 조건을 지정합니다.

    • 최소 너비(min-width), 최대 너비(max-width), 화면 방향(orientation)과 같은 조건을 지정할 수 있습니다.

  • 이 예제에서는 화면 너비에 따라 다음 이미지가 표시됩니다.

    • 화면 너비가 800px 이상인 경우 large.jpg가 표시됩니다.
    • 화면 너비가 400px 이상 800px 미만인 경우 medium.jpg가 표시됩니다.
    • 화면 너비가 400px 미만인 경우 <img> 태그에 있는 이미지인 small.jpg가 표시됩니다.

<canvas> 태그 

1<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
2<script>
3    var canvas = document.getElementById('myCanvas');
4    var ctx = canvas.getContext('2d');
5    ctx.fillStyle = "#FF0000";
6    ctx.fillRect(10, 10, 150, 100);
7</script>
  • <canvas> 태그는 JavaScript를 사용하여 동적 그래픽을 그릴 수 있는 영역을 제공합니다.

<map> 태그

Example Map Area 1 
1<img src="/images/example.jpg" usemap="#example-map" alt="Example Map">
2<map name="example-map">
3    <area shape="rect" coords="34,44,270,350" alt="Area 1" href="https://codesparklab.com">
4</map>
  • <map> 태그는 이미지 맵을 정의하는 데 사용됩니다. 맵 내에서 클릭 가능한 영역은 <area> 태그를 사용해 정의됩니다. 이를 통해 이미지의 특정 부분을 클릭하여 링크로 연결할 수 있습니다.
  • 연관된 맵 요소(<map> 태그)의 이름을 <img> 태그의 usemap 속성에 #를 접두사로 지정하세요.
  • 적절히 <area> 태그의 alt 속성을 지정하면 시각 장애인이 접근성을 향상시킬 수 있습니다.

<embed> 태그 

1<embed src="movie.mp4" width="300" height="200">
  • <embed> 태그는 PDF, 비디오, 오디오 등 외부 콘텐츠를 삽입하는 데 사용됩니다.

<video> 태그 

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>
  • <video> 태그는 비디오 콘텐츠를 삽입하는 데 사용됩니다. <source> 태그를 사용하여 여러 형식을 지정할 수 있습니다.
1<video controls width="300" preload="none">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>
  • preload 속성을 사용하면 비디오 재생이 시작되기 전에 브라우저가 얼마나 많이 비디오를 로드해야 하는지를 지정할 수 있습니다.
    • auto는 브라우저가 전체 미디어를 미리 로드하도록 지시합니다. 재생 시작 지연을 줄일 수 있지만, 사용자가 미디어를 재생하지 않더라도 데이터가 다운로드될 수 있습니다.
    • metadata는 미디어의 메타데이터(예: 지속 시간, 트랙 정보)만 로드합니다. 사용자가 재생을 시작할 때까지 미디어 데이터 자체는 로드되지 않습니다. 미디어의 요약 정보를 필요로 하는 경우 적합합니다.
    • none은 미디어 파일을 미리 로드하지 않습니다. 미디어는 재생이 시작되기 전까지 리소스를 다운로드하지 않습니다. 데이터 사용량을 최소화하고 싶을 때 적합합니다.

<audio> 태그 

1<audio controls>
2    <source src="sound.mp3" type="audio/mpeg">
3    <source src="sound.ogg" type="audio/ogg">
4    Your browser does not support the audio element.
5</audio>
  • <audio> 태그는 오디오 콘텐츠를 삽입하는 데 사용됩니다. <source> 태그는 여러 형식을 지원합니다.
  • <video> 태그와 마찬가지로, preload 속성은 재생 시작 전에 오디오를 얼마나 로드할지 지정하는 데 사용할 수 있습니다.

<track> 태그 

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
4    <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
5    Your browser does not support the video tag.
6</video>
  • <track> 태그는 자막 및 캡션과 같은 텍스트 트랙을 지정하는 데 사용됩니다. 이 태그는 <audio> 또는 <video> 태그 내에서 사용할 수 있습니다.
  • kind 속성을 사용하면 트랙의 목적(예: 자막, 캡션, 챕터 등)을 지정할 수 있습니다. 다음 값을 지정할 수 있습니다.
    • subtitles는 비디오나 오디오의 내용을 번역하거나 시청자가 이해하기 쉽게 만드는 자막을 제공합니다. 이 속성의 주요 목적은 오디오의 직접 번역입니다.
    • captions는 음성 외에도 청각 장애인이나 난청인을 위해 음악 및 음향 효과와 같은 추가 정보를 제공합니다.
    • descriptions는 시각 장애인을 위해 액션 및 장면과 같은 비디오의 시각적 내용을 설명하는 트랙입니다.
    • chapters는 비디오 내 특정 지점을 나타내기 위한 챕터 마커(챕터 제목)를 제공합니다.
    • metadata는 미디어를 구문 분석하거나 처리하기 위한 추가 정보를 제공하지만, 사용자에게 표시되지는 않습니다.

<iframe> 태그 

1<iframe src="https://codesparklab.com" width="300" height="200"></iframe>
  • <iframe> 태그는 다른 HTML 페이지나 외부 콘텐츠(예: 웹사이트, 비디오 또는 문서)를 현재 페이지에 삽입하는 데 사용됩니다. 페이지에 YouTube 비디오를 삽입하는 데 자주 사용됩니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

테이블 관련 태그양식 관련 태그