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

728x90

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

속성

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로도 사용함

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

속성

예시

웹 개발 - HTML 태그

HTML 태그 제목(Heading) , 단락(Paragraph), 인용구(Quotation) 텍스트 크기/구분/위치 등에 영향주는 태그 태그명 empty tag 설명 예시 이미지 X (heading) 제목을 나타내는 태그 ~ 순서로 텍스트 크기 점점 작..

11001.tistory.com