[HTML] 이미지, 오디오, 하이퍼링크 삽입하기(<img>,<audio>,<video>, <a> 태그)

1. <img> 태그 : 이미지 삽입

• width 속성 : 이미지 크기(폭) 조정
• height 속성 : 이미지 크기(높이) 조정
• src 속성: 웹 문서 파일의 위치를 기준으로 이미지 경로 지정.
• alt 속성 : 이미지를 대체하는 텍스트 설정(이미지를 표시할 수 없을 때)
• title 속성 : 마우스를 올려두었을 때 보여줄 풍선도움말 설정
• width 나 height 중 1개만 지정해도 나머지 속성은 자동으로 비율이 계산됨

※ <img> 태그 사용 예시

<img src = "folder/image.jpg" alt = "대체텍스트" width = "50%">

단위	설명	예시
%	현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기 결정	width = "50%"
px	이미지의 너비나 높이를 해당 픽셀 크기만큼 표시	width = "150"

 

2. <audio> 태그 : 오디오 삽입/   <video> 태그 : 비디오 삽입

• <audio> 태그 기본형 : <audio src = "오디오 파일 경로"></audio>
• <video> 태그 기본형 : <video src = "오디오 파일 경로"></video>
• <audio> 태그, <video> 태그의 속성 :

속성	설명
controls	플레이어 화면에 컨트롤 바를 표시
autoplay	오디오나 비디오를 자동으로 실행
loop	오디오나 비디오를 반복 재생
muted	오디오나 비디오의 소리를 제거
preload	페이지를 불러올 때 어떻게 로딩할 것인지 지정, auto, metadata, none 사용가능하며 기본적으로 preload = "auto"가 사용됨
width, height	비디오 플레이어의 너비와 높이를 지정. width 나 height 값 중 하나만 지정하면 나머지는 자동으로 계산되어 표시
poster = "파일 이름"	<video> 태그에서 사용하는 속성으로, 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정

 

3. <a> 태그 : 하이퍼링크 삽입

• 다른 문서, 혹은 다른 사이트로 바로 연결해주는 기능
• 기본형 : <a href ="링크할 주소" > 텍스트 또는 이미지 </a>
• target 속성 : target = "_blank" 로 지정하면 연결된 문서가 새 탭에서 열림
• 응용하여 특정 문자나 이미지를 클릭하면 현재 페이지 내의 다른 위치로 이동하는 기능도 구현 가능

(예시)

<a href = "../foldername/textlink.html" target = "_blank"> 텍스트 내용 </a>