이미지, 동영상(비디오), 오디오 삽입 태그

이미지 태그 <img src="경로" alt="대체텍스트">
비디오 태그 <video src="경로" controls loop autoplay>
오디오 태그 <audio src="경로" controls loop autoplay>

 

 

절대경로 / 상대경로 

절대경로

root folder(최상위 폴더)를 기준, 고유한(절대적인) 경로로 접근하는 방법

 

상대경로

현재 파일을 기준으로 접근하는 방법
삽입할 파일이 작업하고 있는 HTML 문서 기준으로 같은 폴더인지, 상위폴더에 있는지, 하위폴더에 있는지를 따져보고 경로를 지정해야 한다.
 
 
 
 
예시를 보면서 확인해본다.

Step02폴더에 html 파일들이 있고 하부 폴더에 각각 음악, 이미지, 동영상 파일 있다.

 

EX. 이미지 삽입

절대경로

<body>
    <!-- 절대경로 : root folder(최상위 폴더)를 기준으로 접근하는 방법-->
    <img src="/Step02/img/cat.jpg" alt="고양이사진" title="툴팁 메세지">
</body>

alt : 해당 경로에 이미지가 없거나, 엑박이 뜰 때 이미지 대신 보여지는 텍스트

title : 이미지에 마우스를 올렸을 때 표현되는 툴팁

 

 

 

상대경로

<body>
    <!-- 상대경로 : 현재 파일을 기준으로 접근하는 방법 -->
    <img src="img/cat.jpg" alt="고양이사진" width="300" height="">
</body>

현재폴더(step02)의 하위폴더(img)에 있는 이미지 경로를 나타내기 위해 img/cat.jpg 으로 작성했다.

width : 너비, height 자동으로 비율에 맞게 반영 된다.

 

상대경로 - 상위폴더

<body> 
    <img src="../Step02/img/cat.jpg">
</body>

다른폴더에서 상대경로를 지정해주었다. 상위폴더로 가기 위해서는 ..을 사용한다. 

 

 

 

 

EX. 동영상 삽입

절대경로

<body>
    <video src="/Step02/video/구름.mp4"></video>
</body>

 

상대경로

<body>
    <video src="video/구름.mp4" controls autoplay loop poster="img/cat.jpg"></video>
</body>

controls :  플레이, 정지, 음량조절 버튼과 같이 비디오의 실행을 제어할 수 있는 controls 표시

autoplay : 자동재생

loop : 연속재생

poster : 동영상 실행 전 표시되는 썸네일 이미지

width : 출력 너비

muted : 소리 끔

 

 

EX. 오디오 삽입 

절대경로 

<body>
    <audio src="/Step02/audio/음악.mp3">
    </audio>
</body>

 

상대경로

<body>
    <audio src="audio/음악.mp3" controls></audio>
</body>

controls : 오디오 재생, 정지 등 실행 제어할 수 있는 제어기 표시

 

 

 

 

 

 

 

 

 

'WEB > HTML' 카테고리의 다른 글

HTML input 태그 : form / input / label / select / textarea  (1) 2022.05.27
HTML 표(Table) 만들기 - table, tr, th, td 태그  (1) 2022.05.26
하이퍼링크로 북마크 연결하기  (2) 2022.05.25
하이퍼링크 태그 a / 속성 href, target, title, download  (1) 2022.05.25
HTML 샘플 / 텍스트 태그 / 목록 태그 (li, ul, ol)  (1) 2022.05.25

티스토리툴바