HTML - 이미지, 오디오, 비디오, 링크 삽입

---

이미지, 오디오, 비디오, 링크 삽입

---

이미지 삽입

<img> 태그

<img src="이미지 경로" alt="대체 텍스트">

<img src="이미지 경로" width="너비" height="높이" alt="대체 텍스트">

 

속성

• src : 이미지 파일의 경로 (필수)
• alt : 이미지가 없을 경우 대체하여 나타낼 텍스트. 없으면 alt="" 입력
• width : 이미지 너비 설정
• height : 이미지 높이 설정
  width/height 둘 중 하나만 작성하면 나머지는 비율 자동 계산됨.
  단위는 퍼센트(%), 픽셀(px)

종류	설명	예시
퍼센트 (%)	웹 브라우저 창의 너비와 높이 기준으로 해당 퍼센트만큼 이미지 크기 결정	width="50%"
픽셀 (px)	웹 브라우저 창의 크기와 무관하게 이미지 크기를 해당 픽셀 크기로 표시	width="150"

 

이미지 속성

• GIF (Graphic Interchage Format) : 최대 256가지 색상으로 표현가능. 파일의 크기가 작은것이 특징
• JPG/JPEG (Joint Photographic Experts Group) : GIF보다 다양한 색상,명암 표현 가능
• PNG (Portable Network Graphics) : 네트워크용으로 개발된 파일 형식. 다양한 색 표현 및 투명한 배경 생성 가능

 

---

오디오, 비디오 삽입

태그	사용법	설명
<object>	<object width="너비" height="높이" data="파일"></object>	오디오, 비디오, 자바 애플릿, PDF 등 다양한 멀티미디어 삽입에 사용한다. 웹 문서 안에 다른 문서 삽입시 에도 사용됨.
<embed>	<embed src="파일 경로" width="너비" height="높이">	HTML 초기 버전부터 사용되어 왔고, 대부분 브라우저에서 사용 가능. 주로 <audio> <video> <object> 태그 지원하지 않을때 사용한다.
<audio>  <vedio>	<audio src="파일 경로"></audio> <vedio src="파일 경로"></vedio> 속성 - controls : 화면에 컨트롤바 표시 - autoplay : 자동 실행 - loop : 반복 재생 - muted : 음소거 - width, height : 플레이어 너비/높이 지정 - preload : 파일 어떻게 로딩할 것인지 지정   auto/metadata/none 값이 있으며, 기본은 auto - poster="파일명" : <vedio> 태그에서 사용됨.   비디오 재생 전에 표시할 포스터 이미지 예시 : 음악 자동 반복 재생 <audio src="파일명.mp3" autoplay loop></audio>	오디오, 음악 파일 삽입 시 사용 비디오 파일 삽입 시 사용

HTML4 까지는 멀티미디어 파일 삽입 후 재생하려면 별도 플러그인 프로그램 필요했지만,

HTML5 부터는 파일 삽입 후 바로 재생 가능해졌음. (그래서 웹 브라우저 마다 플레이어 다름)

 

확장자 정보

종류	확장자	설명
비디오	mp4	주로 사용되는 비디오 형식. 라이선스 있지만 웹에서는 무료로 사용가능
	webm	화질 우수하고 무료. 지원 안되는 브라우저가 많음.
오디오	mp3	주로 사용되는 오디오 형식. 무료로 사용 가능
	mp4, m4a	mp3 문제점 개선한 ACC 코덱 사용한 파일 형식. 확장자를 mp4 말고도 m4a로도 사용함

---

하이퍼링크 삽입

<a> 태그

<a href="링크주소">텍스트</a>

<a href="링크주소"><img src="이미지" alt=""></a>

텍스트 넣으면 텍스트 링크되고 이미지 넣으면 이미지 링크된다.

 

속성

• target="_blink" : 새 탭에서 링크 열기

 

예시

• 텍스트 링크 : https://11001.tistory.com/102
• 이미지링크 : 

웹 개발 - HTML 태그