[HTML] 미디어 관련 태그(이미지, 오디오, 비디오)

이미지 관련 태그

• <img>
• <img> 태그는 닫기 태그를 사용하지 않는다.
• 웹 페이지에 사진이나 그림을 삽입할 때 사용하는 태그

 

<코드>

<!-- alt를 사용하여 이미지의 경로가 틀렸을 경우 사진 대신 텍스트로 대치-->
<img src="sam/image/flower1.PNG" width="200px", height="150px" alt="꽃 사진">

<!-- px : 고정 크기 단위-->
<img src="sample/image/flower1.PNG" width="200px", height="150px">

<!-- % : 가변 크기 단위-->
<img src="sample/image/flower1.PNG" width="15%">

• src : 삽입할 이미지 경로를 지정하는 속성
• alt : 이미지를 설명해주는 텍스트 속성, 이미지의 경로가 틀렸을 경우 텍스트로 대치
• weight, height : 이미지의 크기를 설정하는 속성, 반응형 웹을 만들 때는 가변 크기 단위를 주로 사용한다.
• 웹 페이지에서 이미지 태그로 사용 가능한 확장자 : GIF, JPG/JPEG, PNG

 

오디오 관련 태그

• <audio></audio>
• 웹 브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어주는 태그

 

<예시>

<audio 
	src="경로" 
    controls="controls" 
    autoplay="autoplay" 
	loop="loop" 
    preload="none" or "metadata" or "auto">
</audio>

• src : 음악 파일의 경로 지정
• control : 재생도구 출력 지정
• autoplay : 자동 재생 여부 지정
• loop : 반복 여부 지정
• preload
  • none : 미리 다운로드 하지 않음
  • metadata : 기본 정보는 가져옴(크기, 첫 프레임, 오디오 길이 등)
  • auto : 미리 다운로드함.

 

비디오 관련 태그

• <video></video>
• 웹 브라우저에서 플러그인의 도움 없이 영상을 재생할 수 있게 만들어 주는 태그

 

<코드>

<video 
	src="경로" 
	controls="controls" 
	autoplay="autoplay" 
	loop="loop" 
    preload="none" or "metadata" or "auto"			
    poster="이미지 경로" 
    width="크기" height="크기">
</video>

• 오디오의 속성들과 동일한 역할