HTML에서 임베디드 요소로 쓰이는 태그를 정리해봤다. (<img>, <video>, <audio>, ...)

---

<img> Tag

<img> : 문서에 이미지를 넣는다.

• src 특성은 필수이며, 포함하고자 하는 이미지로의 경로를 지정한다.

source 값 = 외부 URL, 파일이 위치한 경로(절대경로/상대경로 가능)
절대경로 : 시스템 상의 전체 경로, URL, ...
상대경로 : 현재 작업영역 기준으로부터의 경로

✅ <img> 태그는 속성도 정말 많고, 스타일링도 자유자재로 가능한 편이다.
따라서, 원하는 디자인의 템플릿을 찾아보는 것도 종종 도움이 될 수 있다.

Example

<img src="favicon144.png" alt="MDN logo">

Q) 이미지가 안뜰 때는 어떻게 되나요? 🤔

A) 그럴때 쓸 수 있도록 alt (Alternative Text) 속성이 준비되어있습니다.

• 대체 텍스트라는 뜻. 이미지에 대한 설명을 텍스트로 입력할 수 있게 해준다.

• 스크린 리더가 alt의 값을 읽어 사용자에게 이미지를 설명하므로,
  웹 접근성 차원에서 매우 유용하다.

• 네트워크 오류, 콘텐츠 차단, 죽은 링크, ... 어떠한 이유로 이미지를 표시할 수 없는 경우
  --> alt 속성의 값을 대신 보여준다.

Q) 이미지 크기가 마음에 안들어요..! 😥

A) width, height 속성을 사용해보세요!

• 말 그대로 너비와 높이를 의미한다.

• 픽셀(px) 단위의 이미지의 고유 크기이며, 단위 없는 정수여야 한다.

• 물론 크기를 CSS style 로 지정할 수도 있다.

한 페이지 내의 여러 이미지를 같은 너비와 높이로 지정하고싶다면 CSS 로 한번에 묶어서 지정해주는 것이 간편할 수도 있다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/img

---

웹에서 사용하는 이미지 유형

HTML 표준은 지원해야 하는 이미지 형식을 명시하고 있지 않으므로, 각각의 웹 브라우저는 서로 다른 형식을 지원한다.

래스터 이미지

• JPEG : image/jpeg / 확장자명 = .jpg, jpeg, jfif, pjpeg, pjp
  정지 이미지의 손실 압축에 적합하다. (현재 가장 많이 사용됨)

• PNG : image/png / 확장자명 = .png
  원본 이미지를 보다 정확하게 보여주거나 투명도가 필요한 경우 JPEG보다 우선 사용한다.

• GIF : image/gif / 확장자명 = .gif
  여러장의 이미지로 이루어진 애니메이션 표현 기능을 한다.

• WEBP : image/webp / 확장자명 = .webp
  구글이 만든 이미지 포맷. 품질, 압축률 등이 월등하지만 지원 브라우저가 제한적이다.

벡터 이미지

• SVG : image/svg+xml / 확장자명 = .svg
  다양한 크기로 정확하게 그려야 하는 아이콘, 다이어그램 등에 사용된다.

Q) 래스터 이미지와 벡터 이미지는 뭐가 다른가요? 🤔

A)

• 래스터 이미지 : 풍경 사진 등 일반적인 사진에 많이 사용된다.
• 벡터 이미지 : 아이콘, UI, 그래프 등에 많이 사용된다.

• 래스터 이미지 : 직사각형을 작은 사각형 단위들로 나누어 그림을 그린다.
  --> 픽셀 단위이기 때문에 확대하면 이미지가 '깨진다'.

• 벡터 이미지 : 점과 점을 연결해 수학적 원리로 그림을 그린다.
  --> 확대해도 이미지 모서리 등이 손상되지 않는다.

---

반응형 이미지

<img>의 srcset 속성: 사용자 에이전트(브라우저)가 사용할 수 있는 이미지 소스의 후보.
쉼표로 구분하는 한 개 이상의 문자열 목록이다.

• 각각의 문자열은 다음 구성요소로 이루어진다.

1. 이미지의 URL.

선택적으로, 공백과 함께 그 뒤를 잇는...

2. 너비 서술자(양의 정수와 바로 뒤의 'w' 문자).
   너비 서술자의 값을 sizes 특성으로 지정한 소스 크기로 나눠서 픽셀 밀도를 구한다.
3. 픽셀 밀도 서술자(양의 실수와 바로 뒤의 'x' 문자).
   --> 서술자를 포함하지 않은 경우 기본값인 1x로 간주한다.

🚫 같은 srcset 속성에 너비와 픽셀 밀도 서술자를 함께 사용하거나,
동일한 서술자를 두 개 이상 사용하는건 유효하지 않다.

Q) 그래서 이걸 왜 쓰죠?

A)
브라우저가 스스로 가능한 소스 중 하나를 선택합니다.
따라서 브라우저는 사용자의 개인 설정 또는 대역폭 상황에 따라 선택을 조절할 수 있게 되죠.

Example

<img
    src="images/large.png"
    alt="responsive images"
    srcset="images/small.png  300w,
            images/medium.png 450w,
            images/large.png  600w"
/>

최소크기, 최대크기 지정하기

<img>의 sizes 속성 : 소스 크기를 나타내는, 쉼표로 구분한 하나 이상의 문자열을 가진다.

• 반응형 이미지에서 임의로 한없이 이미지가 커지는 현상을 방지한다.

• 각각의 문자열은 다음 구성요소로 이루어진다.

1. 미디어 조건. 마지막 항목에서는 생략.
2. 소스 크기 값.
   미디어 조건은 이미지의 속성이 아니라 뷰포트 속성을 가리킨다.
   ex) "(max-height: 500px) 1000px" 은 "1000px 너비의 소스를 사용하려면 뷰포트가 500px 이하여야 한다" 는 뜻이다.

Example

<img
    src="images/large.png"
    alt="responsive images"
    srcset="
    	images/small.png  300w,
        images/medium.png 450w,
        images/large.png  600w
        "
    sizes="
        (min-width: 600px) 600px,
        (min-width: 450px) 450px,
        300px"
/>

---

<video> Tag

<video> : 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입한다.

• <img> 요소와 비슷하게 표시하고자 하는 미디어로의 경로를 src 속성에 제공한다.

• 비디오의 너비와 높이, 자동재생과 반복 여부, 브라우저 기본 컨트롤 노출 여부 등 다른 정보도 속성을 통해 지정할 수 있다.

• <video></video> 태그 안의 콘텐츠는 브라우저가 <video> 요소를 지원하지 않을 때 보여진다.

✅ <video> 태그 또한 많은 속성을 갖고있기 때문에, 모든 속성을 외우려고 하지는 말자.

Example

<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  Sorry, your browser doesn't support embedded videos,
  but don't worry, you can <a href="videofile.ogg">download it</a>
  and watch it with your favorite video player!
</video>

<video>태그 사이의 요소는 비디오 요소가 지원되지 않을 때 나타난다.

자주 쓰이는 속성들

1. autoplay : 자동 재생
2. loop : 무한 반복
3. controls : 컨트롤 패널 표시
4. muted : 쉿 🤫!
5. poster : 썸네일 (Thumbnail) 👍

Q) 새로고침(F5) 했을 때 자동 재생이 되지 않아요 😥

A) autoplay 와 muted 를 같이 써보세요.

• 사용자 경험에 의거하여 페이지 접속시 동영상 사운드가 갑자기 재생되는것을 방지하기 위해 브라우저에서 자동재생을 강제적으로 막을 수 있습니다.
  
  깜짝 놀라는건 싫거든요!

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/video

---

<audio> Tag

<audio> : 문서에 소리 콘텐츠를 포함할 때 사용한다.

• <video> 태그와 거의 동일한 속성들을 사용한다.

• 태그 내에 <source> 태그를 사용하여 한 개 이상의 오디오 소스를 지정할 수 있으며,
  다수를 지정한 경우 가장 적절한 소스를 브라우저가 고른다.

Example

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg">
  <source src="myAudio.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is
     a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>

✅ 비디오 태그와 정말 많이 유사하다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/audio

---

<canvas> Tag

<canvas> : 캔버스 스크립팅 API 또는 WebGL API와 함께 사용해 그래픽과 애니메이션을 그릴 수 있다.
혼자서 할 수 있는 기능은 거의 없다. (JavaScript 와 함께 사용하게 된다.)

Example

HTML

<canvas id="canvas" width="300" height="300">
  캔버스의 내용을 설명하는 대체 텍스트
</canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/canvas

---

<iframe> Tag

<iframe> : 중첩 브라우징 맥락을 나타내는 요소로,
현재 문서 안에 다른 HTML 페이지를 삽입한다.

• 페이지 안의 페이지!! 액자식 구성을 생각하면 편하다.

• 보통 지도 등을 페이지에 넣고 싶을 때 사용한다.

• 보안상의 이유로 <iframe> 이 허용되지 않는 웹페이지들이 많이 존재한다.
  🚫 아쉽지만 무조건 모든 페이지를 띄울 수 있는건 아니다.

Example

<iframe id="Example2"
    title="iframe Example 2"
    width="400" height="300"
    style="border:none"
    src="https://maps.google.com/maps?f=q&source=s_q&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,-58.381593&output=embed">
</iframe>

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/iframe