미디어 관련 태그

2023. 6. 16. 09:06Front/HTML

1. img 태그

<img src="이미지 주소">

 

1) 이미지를 가져와서 보여주는 두 가지 방식

- 온라인 상의 이미지를 링크

<h1>Image Tag</h1>
<h3>온라인 이미지 링크</h3>
<!-- alt- 이미지 설명 / src-이미지 주소 복사 -->
<img alt="미니 이미지" src="http://cafefiles.naver.net/20100908_201/
swc05174_1283947405797mTfjx_jpg/%B9%CC%B4%CF%B8%B6%BF%EC%BD%BA_5_
swc05174.jpg">

 

- 서버 내에서 이미지를 저장하고 보여주는 방식

<h3>Server 이미지</h3>
<!-- 서버 내의 이미지, 이미지에 링크 걸기 -->
<a href="https://www.naver.com"><img alt="" src="../images/sky.jpg" ></a>
 
 

2) 속성

- src : 이미지 경로 지정, 필수 속성

- alt: 이미지가 없을 때 나오는 설명 지정

- width : 이미지의 너비 (CSS에서 주로 지정)

- height : 이미지의 높이 (CSS에서 주로 지정)

 

2. audio 태그

1) 오디오 태그

<audio src="음악 파일 경로">

2) 오디오 태그 속성

- src: 음악 파일 경로 지정, 필수 속성

- preload: 음악 재생 전 데이터 모두 불러올지 여부 지정

- autoplay : 자동 실행 여부

- loop : 반복 여부

- controls : 재생 도구 표시 여부

3. video 태그

1) 비디오 태그

<video src="동영상 파일 경로">

2) 비디오 태그 속성

- src: 동영상 파일 경로 지정, 필수 속성

- preload: 음악 재생 전 데이터 모두 불러올지 여부 지정

- autoplay : 자동 실행 여부

- loop : 반복 여부

- controls : 재생 도구 표시 여부

- poster : 동영상 준비 중에 표시할 썸네일

- width : 동영상의 가로 길이

- height : 동영상의 세로 길이