HTML 태그들 - 임베디드 요소
이 포스팅은 HTML 태그들에 대한 지난 포스팅에 이은 두번째 글입니다.
HTML 태그들 - 텍스트 요소, 구조를 나타내는 요소, 목록과 표
임베디드 요소
<img>
<img src="https://i.cbc.ca/1.5256404.1566499707!/fileImage/httpImage/image.jpg_gen/derivatives/16x9_940/cat-behaviour.jpg"
alt="귀여운 고양이" />
<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>
html
문서 내에서 다른html
페이지 혹은 페이지의 일부분을 삽입할 수 있습니다.- 모든
html
문서가 가능하지는 않고, 허가된 페이지만 가능합니다. - 주로 지도나 외부 영상을 위해 사용합니다.
Author And Source
이 문제에 관하여(HTML 태그들 - 임베디드 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@luna238/HTML-태그들2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)