HTML 태그들 - 임베디드 요소

김효식 (HS KIM)·2021년 9월 28일

이 포스팅은 HTML 태그들에 대한 지난 포스팅에 이은 두번째 글입니다.
HTML 태그들 - 텍스트 요소, 구조를 나타내는 요소, 목록과 표

임베디드 요소

`<img>`

<img src="https://i.cbc.ca/1.5256404.1566499707!/fileImage/httpImage/image.jpg_gen/derivatives/16x9_940/cat-behaviour.jpg"
alt="귀여운 고양이" />

이미지를 넣기 위해 필요한 요소입니다. src속성에 이미지 주소를 필수로 넣어야 합니다. 속성 값으로 이미지 주소는 절대 경로와 상대 경로 모두 가능합니다.
alt속성은 없어도 동작하지만, 스크린 리더가 사용자에게 사진의 의미를 설명해주기 때문에 웹 접근성을 높일 수 있습니다. 뿐만 아니라, 임의의 이유로 이미지를 업로드 하지 못할 경우에 아래와 같이 대체 텍스트를 업로드 해줄 수 있습니다.
width, height속성은 이미지의 너비와 높이를 설정할 수 있습니다. 두 속성 중 하나의 속성만 값이 있는 경우에는, 값을 지정한 속성에 원래 이미지의 비율만큼 자동으로 계산하여 값을 매깁니다.

<img
   src="https://i.cbc.ca/1.5256404.1566499707!/fileImage/httpImage/image.jpg_gen/derivatives/16x9_940/cat-behaviour.jpg"
   alt="귀여운 고양이"
   srcset="
        https://via.placeholder.com/200 200w,
        https://via.placeholder.com/300 300w,
        https://via.placeholder.com/400 400w
      "
    />

srcset 속성은 너비별로 이미지를 지정하여 너비에 따른 반응형 이미지를 적용할 수 있습니다.

<img sizes="(min-width: 400px) 400px,
            (min-width: 300px) 300px,
            200px" />

위의 img에 sizes속성만 추가했습니다.
sizes속성은 브라우저의 너비에 따라 이미지의 크기를 지정할 수 있습니다. sizes속성값을 넣지 않은 위의 예시에서는, 브라우저의 너비에 꽉차게 이미지가 늘어났는데 아래에서는 지정한 너비에 맞게 이미지의 크기가 변경 됐습니다.
srcset은 이미지의 크기를 작은 순부터, sizes는 큰 순서부터 작성해야 합니다.

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

축약형	파일 확장자	내용
JPEG	.jpg, .jpeg, .jfif, .pjpeg, .pjp	정적 이미지의 손실 압축에 적합 (현재 가장 많이 사용)
PNG	.png	원본 이미지를 좀 더 정확하게 보여주거나, 투명도가 필요한 경우 필요
GIF	.gif	여러 이미지로 애니메이션 표현
WEBP	.webp	구글이 만든 포맷, 품질, 압축률 등이 우수하지만 제한적인 지원 브라우저
SVG	.svg	다양한 크기의 이미지를 깨지지 않고 정확하게 표현 가능

래스터(Raster) vs 벡터(Vector)

래스터는 데이터의 배열인 비트맵으로 이미지를 저장하는 방식으로, 이미지의 크기에 따라 파일의 크기가 변동됩니다. 이미지의 크기가 많이 커지면, 이미지가 깨져서 정확도가 떨어지게 됩니다. 그래서 주로 인물이나 풍경 등 실물 이미지에 많이 사용됩니다.
벡터는 함수의 형태로 이미지를 저장하는 방식으로, 이미지의 크기에 관계없이 파일의 크기가 같고 정확도 또한 유지됩니다. 주로 아이콘, 로고, 캐릭터, 도안 등에 사용됩니다.

`<video>`

<video src="http://techslides.com/demos/sample-videos/small.mp4" controls>
  네트워크 문제로 비디오가 재생되지 않습니다.
</video>

영상을 재생할 수 있는 요소입니다. src속성에 영상의 주소값을 넣어주면 됩니다.
태그 안의 내용은 영상이 재생되지 않을 경우에 영상 대신 화면에 보이게 됩니다.
controls속성을 boolean 값으로 넣어주면 영상을 볼 때 위와 같이 기본 설정을 할 수 있습니다.
autoplay속성은 boolean 값으로 넣어주면 영상이 자동으로 재생됩니다. 대신 영상에서 소리가 나올 경우, 이용자에게 불편한 경험을 줄 수 있으므로 새로고침 뒤에 재생이 안됩니다. 그런 경우에는 muted속성을 넣어주면 새로고침을 해도 계속해서 영상을 재생할 수 있습니다.

`<audio>`

<audio controls>
  <source src="a.mp3" type="audio/mpeg" />
  <source src="b.mp3" type="audio/mpeg" />
</audio>

음악을 재생할 수 있는 요소입니다. src속성에 음악의 주소값을 넣어주면 됩니다.
주소값을 src속성이 아닌 source태그의 src속성으로 넣어주면, 첫 번째 source가 업로드에 실패했을 경우, 다음 source의 음악으로 변경됩니다.

`<canvas>`

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

그래픽과 애니메이션을 그릴 수 있는 요소입니다.
위의 코드를 통해 html문서에 캔버스를 나타낼 수 있지만, 지금 보여지는 것은 없습니다. 캔버스에 무언가를 나타내기 위해서는 자바스크립트로 조작이 필요합니다.

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

`<iframe>`

<iframe id="inlineFrameExample"
    title="Inline Frame Example"
    width="300"
    height="200"
    src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>