HTML - 이미지 등 멀티미디어 지원 태그

HTML

HTML - 이미지 등 멀티미디어 지원 태그

데이터_박과장 2023. 10. 19. 21:24

웹에서 사용 가능한 이미지 파일 형식

JPEG (Joint Photographic Experts Group):
JPEG 이미지는 주로 사진이나 복잡한 그래픽을 표현할 때 사용. 그림 손실이 있긴 하지만, 보통은 무시할 정도로 작음.

PNG (Portable Network Graphics):
PNG 이미지는 투명 배경을 지원하며, 로스리스(무손실) 이미지 형식. 그래픽이나 아이콘 이미지에 주로 사용돼. 투명도와 이미지 품질을 유지하면서 파일 크기를 줄일 수 있음.

GIF (Graphics Interchange Format):
GIF 이미지는 주로 애니메이션 이미지를 만들 때 활용. 이미지 시퀀스를 지원하며, 256색 팔레트를 사용해 파일 크기를 작게 유지할 수 있음.

SVG (Scalable Vector Graphics):
SVG는 XML 기반의 벡터 이미지 형식이며, 크기를 조절해도 이미지 품질이 유지. 주로 아이콘, 로고, 그래픽에 사용.

WebP:
WebP는 Google에서 개발한 이미지 형식으로, 웹 페이지 로딩 속도를 개선하는 데 사용. 높은 압축률을 제공하면서 이미지 품질을 유지할 수 있음.

BMP (Bitmap):
BMP 이미지는 무손실 비트맵 이미지 형식이며, 큰 이미지 파일에 사용. 그러나 파일 크기가 크기 때문에 웹에서는 자주 사용되지 않음.

TIFF (Tagged Image File Format):
TIFF는 고해상도 이미지와 프로페셔널 그래픽을 저장하는 데 사용. 주로 인쇄 및 그래픽 디자인 분야에서 활용돼.
이렇게 다양한 이미지 형식을 통해 웹 페이지에서 다양한 그래픽을 사용하고 최적화할 수 있음.

이미지

웹페이지에 이미지를 삽입하는 경우, img tag를 사용한다.

특히 alt 태그는 사진에 대해 설명을 시각장애인 등에 읽어줄 수 있다. 이미지 파일에 대한 설명으로 이해하면 된다.

attributeDescription

src	이미지 파일 경로
alt	이미지 파일이 없을 경우 표시되는 문장
width	이미지의 너비 (CSS에서 지정하는 것이 일반적)
height	이미지의 높이 (CSS에서 지정하는 것이 일반적)

<!DOCTYPE html>
<html>
  <body>
    <img src="assets/images/doug.jpg" alt="doug" width="100">
    <img src="assets/images/wrongname.gif" alt="이미지가 없습니다.">
  </body>
</html>

<figure> 및 <figcaption> 태그는 이미지와 이미지 설명을 그룹화하고 정의하는 데 사용됩니다.

<figure>:

<figure> 태그는 웹 문서 내에서 그림, 도표, 사진, 코드 블록 등과 같은 콘텐츠 요소를 그룹화하는데 사용됩니다. 이것은 콘텐츠와 해당 설명(콘텐츠의 캡션)을 함께 묶어줍니다.

예시 코드:

<figure>
  <img src="image.jpg" alt="아름다운 풍경">
  <figcaption>해변가에서 일몰을 감상하는 풍경</figcaption>
</figure>

<figcaption>:

<figcaption> 태그는 <figure> 태그 내에서 이미지나 다른 콘텐츠에 대한 설명을 제공하는데 사용됩니다. 이것은 그림이나 다른 콘텐츠 요소의 캡션을 정의합니다.

예시 코드:

<figure>
  <img src="image.jpg" alt="아름다운 풍경">
  <figcaption>해변가에서 일몰을 감상하는 풍경</figcaption>
</figure>

위의 예시 코드에서 <figure>은 이미지와 해당 설명(캡션)을 그룹화하고 있습니다. 이미지에 대한 설명은 <figcaption> 태그로 제공되며, 이를 통해 웹 페이지에서 이미지와 설명을 의미적으로 관련짓고 스타일링할 수 있습니다.

웹에서 사용되는 비디오와 오디오 파일 형식에 대한 설명

비디오 파일 형식:
웹에서 비디오를 표현하려면 다양한 비디오 파일 형식을 사용할 수 있습니다. 가장 널리 사용되는 비디오 파일 형식:

MP4 (MPEG-4 Part 14):
MP4는 웹에서 가장 흔하게 사용되는 비디오 파일 형식 중 하나로, 높은 압축률과 높은 품질을 제공. 대부분의 브라우저에서 MP4 비디오를 지원하므로 크로스 플랫폼 호환성이 좋음.

WebM:
WebM은 오픈 소스 비디오 파일 형식으로, 무료로 사용할 수 있으며 고품질 비디오 스트리밍을 지원. 웹M 형식은 VP8 또는 VP9 비디오 코덱을 사용하여 압축된 비디오를 제공.

Ogg:
Ogg 비디오 파일 형식은 자유로운 소프트웨어 Ogg 컨테이너 형식을 사용하여 비디오를 저장. 이 형식은 브라우저 호환성을 위해 사용되는 경우가 있지만 MP4와 WebM에 비해 덜 널리 사용.

오디오 파일 형식:

웹에서 오디오를 표현하기 위한 주요 오디오 파일 형식

MP3 (MPEG Audio Layer III):
MP3는 오디오 파일 형식으로 널리 사용되며, 높은 압축률로 음악 및 오디오 스트림을 저장. 대부분의 브라우저에서 MP3 오디오를 지원.

AAC (Advanced Audio Coding):
AAC는 더 효율적인 압축을 제공하는 오디오 파일 형식으로, 고품질 오디오를 제공. 대부분의 모던 브라우저는 AAC 오디오를 지원.

OGG Vorbis:
Ogg Vorbis는 공개 도메인 오디오 코덱을 사용하여 오디오를 저장하는 무료 형식. 브라우저 호환성을 위해 사용

WAV (Waveform Audio File Format):
WAV는 비압축 오디오 파일 형식으로, 높은 품질의 오디오를 저장. WAV 파일은 대부분의 브라우저에서 지원.

FLAC (Free Lossless Audio Codec):

FLAC는 무손실 압축 오디오 파일 형식으로, 고품질 오디오를 제공하면서 파일 크기를 줄임. 몇몇 브라우저에서 FLAC 오디오를 지원.

audio

audio 태그는 HTML5에서 새롭게 추가된 태그이다. IE8 이하에서는 사용할 수 없다.

attributeDescription

src	음악 파일 경로
preload	재생 전에 음악 파일을 모두 불러올 것인지 지정
autoplay	음악 파일을 자동의 재생 개시할 것인지 지정
loop	음악을 반복할 것인지 지정
controls	음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다.

<!DOCTYPE html>
<html>
  <body>
    <audio src="assets/audio/Kalimba.mp3" controls></audio>
  </body>
</html>

웹브라우저 별로 지원하는 음악 파일 형식이 다르다. 파일 형식에 따라 재생되지 않는 브라우저가 존재한다는 뜻이다.

BrowserMP3WavOgg

Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES(24~)	YES	YES
Safari	YES	YES	NO
Opera	YES(25~)	YES	YES

source 태그를 사용하여 파일 형식의 차이 문제를 해결 할 수 있다. type 어트리뷰트는 생략 가능하다.

<!DOCTYPE html>
<html>
  <body>
    <audio controls>
      <source src="assets/audio/Kalimba.mp3" type="audio/mpeg">
      <source src="assets/audio/Kalimba.ogg" type="audio/ogg">
    </audio>
  </body>
</html>

비디오

video 태그는 HTML5에서 새롭게 추가된 태그이다. IE8 이하에서는 사용할 수 없다.

src	동영상 파일 경로
poster	동영상 준비 중에 표시될 이미지 파일 경로
preload	재생 전에 동영상 파일을 모두 불러올 것인지 지정
autoplay	동영상 파일을 자동의 재생 개시할 것인지 지정
loop	동영상을 반복할 것인지 지정
controls	동영상 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다.
width	동영상의 너비를 지정
height	동영상의 높이를 지정

audio 태그와 마찬가지로 파일 형식의 차이 문제가 발생할 수 있다. source 태그를 사용하여 형식 차이 문제를 해결한다. type 어트리뷰트는 생략 가능하다.

Browser MP4 WebM Ogv

Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES(21~)	YES	YES
Safari	YES	NO	NO
Opera	YES(25~)	YES	YES

<!DOCTYPE html>
<html>
  <body>
    <video width="640" height="360" controls>
      <source src="assets/video/wildlife.mp4" type="video/mp4">
      <source src="assets/video/wildlife.webm" type="video/webm">
    </video>
  </body>
</html>

<track> 태그를 사용하여 비디오 파일에 자막 추가

자막 파일은 보통 WebVTT (WebVTT subtitle) 형식. 다음은 자막을 비디오에 추가하는 방법과 예시 코드:

자막 파일 생성: 보통 .vtt 확장자를 가지며, 웹VTT 형식을 따름. 예를 들어, "subtitle.vtt"라는 파일을 만들 수 있음.

"subtitle.vtt" 파일 내용 예시:

00:00:00.000 --> 00:00:05.000
안녕하세요, 환영합니다.

00:00:06.000 --> 00:00:10.000
이 비디오에 자막을 추가했습니다.

00:00:11.000 --> 00:00:15.000
즐거운 시청되세요!

비디오 태그에 <track> 추가:

이제 비디오 파일에 자막을 추가하려면 <track> 태그를 사용 <video> 태그 내에 <track> 태그를 추가하고 src 속성을 통해 자막 파일의 경로를 지정.

예시 코드:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitle.vtt" kind="subtitles" label="한국어" srclang="ko" default>
  <!-- 다른 비디오 소스 (옵션) -->
</video>

위의 코드에서:

<track> 태그는 자막 파일인 "subtitle.vtt"를 지정.
kind="subtitles"는 이 자막이 자막임을 나타냄.
label="한국어"는 사용자에게 표시되는 자막 표시 이름.
srclang="ko"는 자막 언어를 나타냄.
default는 자막을 기본으로 표시하도록 설정.

이렇게 하면 비디오에 자막이 추가되어 사용자가 자막을 활성화 또는 비활성화할 수 있음.

'HTML' 카테고리의 다른 글

HTML - 공간분할 (0)	2023.10.19
HTML - Form Tag (0)	2023.10.19
HTML - 목록과 표 (0)	2023.10.18
HTML - 하이퍼링크 (0)	2023.10.18
HTML - 텍스트 관련 태그 (0)	2023.10.18

현재글HTML - 이미지 등 멀티미디어 지원 태그

[데이터_공예소]

경험과 학습으로 얻는 데이터로 인사이트를 발굴 하고자 합니다.

Today :
Yesterday :

[데이터_공예소]