이미지 태그에 대해 설명합니다
이미지 관련 태그
<img src="주소" width="넓이" height="높이" alt="대체 택스트" title="설명">
이미지 태그
- src(source) 속성 : 파일의 주소
- width, height 속성 : 파일 크기 조정
- alt(alternate text) 속성 : 이미지가 표시하지 못할 경우를 대비한 대체 설명 텍스트 지정
<figure>콘텐츠</figure>
그림, 사진 등의 콘텐츠를 함께 묶어서 하나의 독립된 단위로 취급하고 싶을 때 사용하는 태그
<figcaption>설명</figcaption>
<figure> 요소를 위한 제목을 표현, <figure> 요소 내에 위치한다
img, figure 태그 예시
<figure>
<figurecaption>[figurecaption]logo</figurecaption>
<img src="img.png" title="[img]">
</figure>
오디오 태그
<audio [controls] [autoplay] src="주소" preload="로드">대체 텍스트 입력</audio>
오디오 삽입 태그
- controls 속성 : 미디어 제어기를 표시할 지 여부
- autoplay 속성 : 파일이 로드되자마자 자동으로 재생 여부
- loop 속성 : 사운드 반복 재생 횟수
- preload 속성 : 브라우저가 미리 로딩 할 지 여부
- auto(기본값) : 페이지를 로드하고 바로 오디오 파일 다운로드
- metadata : 사용자가 재생 시키기 전까지는 오디오의 메타데이터만 다운로드
- none : 재생 하기 전까지는 오디오 파일 다운로드 안 함
<source src="주소" type="파일의 형식">
이 요소를 사용하여 오디오 파일이 지원되지 않을 경우를 대비한다
- 같은 내용을 여러 형식으로 작성한 파일을 지정한다
- src 속성 : 오디오 파일의 주소
- type 속성 : MIME 형식으로 전송하여 웹에 전달
audio 태그 예시
<audio autoplay controls loop="10" src="주소">브라우저에서 audio를 지원하지 않습니다</audio>
source 태그 예시
<audio controls autoplay preload="auto">
<source src="ex.mp3" type="audio/mp3">
<source src="ex.ogg" type="audio/ogg">
<source src="ex.wav" type="audio/wav">
</audio>
비디오 태그
<video [controls] src="주소" width="폭" height="높이">
비디오 삽입 태그
- src, controls, loop, qutoplay 속성 : <audio> 요소의 속성과 동일
- width, height 속성 : 화면에서 비디오가 표시될 영역의 크기
- videoWidth, videoHeight 속성 : 비디오 자체의 너비와 높이
- poster 속성 : 동영상이 로딩되고 있을 때 보여줄 이미지
- preload 속성 : 브라우저가 미리 로딩 할 지 여부
- auto(기본값) : 페이지를 로드하고 바로 비디오 파일 다운로드
- metadata : 비디오 크기, 첫 프레임 등 비디오의 메타데이터만 다운로드
- none : 재생 시작 전까지 비디오 파일 다운로드 안 함
<source src="주소" type="파일의 형식">
이 요소를 사용하여 비디오 파일이 지원되지 않을 경우를 대비한다
- 같은 내용을 여러 형식으로 작성한 파일을 지정한다
- src 속성 : 비디오 파일의 주소
- type 속성 : MIME 형식으로 전송하여 웹에 전달
video 태그 예시
<video controls="" src="" width="360px" height="360px" videowidth="300px" videoheight="300px">
이 브라우저에서 video를 지원하지 않습니다
</video>
'기초공부 > WEB' 카테고리의 다른 글
[JavaScript]생활코딩 언어 - 자바스크립트 정리 (0) | 2019.03.25 |
---|---|
[CSS]생활코딩 WEB2-CSS 정리 (0) | 2019.03.24 |
[HTML5]표 태그 (0) | 2019.03.20 |
[HTML5]목록 태그 (0) | 2019.03.20 |
[HTML5]기초 설명, 구조 태그 (0) | 2019.03.20 |