미디어 관련 태그
2023. 6. 16. 09:06ㆍFront/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 : 동영상의 세로 길이