06. 멀티미디어 관련 태그

HTML_VSC

06. 멀티미디어 관련 태그

76beny 2022. 6. 10. 22:29

내부에 리소스파일 존재.

이미지 태그 (img tag)

-웹 페이지에서 사진이나 이미지를 삽입할때 사용하는 태그
-링크를 통해 이미지 파일을 별도로 가져와서 표시하는 기능

이미지 첨부1 : 다른 사이트의 이미지 가져오기

<img src="https://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">

이미지 우클릭 -> 이미지 주소복사

이미지첨부2 : 내부 파일을 가져오는 법 (상대경로) ※반드시 html의 상대경로로 지정되어야 함

    <img src="resources/image/kh_logo.jpg">

이미지첨부2 : 절대경로로 가져오는 방법 ( 사용X)

이유 : 내 하드디스크에서 가져오는 경로라 다른사람은 안보임

  <img src=" C:\dev_source\work_space_html\resources\image\kh_logo.jpg ">

이미지첨부3 : alt를 통해 이미지가 안보일때 설명써보기

<img src="잘못된 경로를 지정"><br>
<img src="잘못된 경로를 지정" alt="경로가 잘못되었습니다.">

이미지첨부4 : 이미지 크기 지정

   <img src="resources/image/flower5.PNG" width="200px" height="200px">
    <br>
    <img src="resources/image/flower5.PNG" width="200px">
    <br>
    <img src="resources/image/flower5.PNG" width="40%">

map tag (맵 태그)

이미지 구역을 분리하여 링크를 걸어주는 태그
- map:이미지 구역을 생성하는 태그
- area : map내부에서 이미지구역을 지정해주는 태그

 <img src="resources/image/flower3.PNG" width="400px" height="400px" usemap="#maptest">
    <map name="maptest">
        <area shape="rect" coords="0,0,200,200" href="www." alt="https://www.naver.com/" alt="네이버">
        <area shape="rect" coords="0,0,200,200" href="www." alt="https://www.google.com/" >
    </map>

audio tag (오디오 태그)

-웹 브라우저에서 플러그인의 도움없이 음악을 재생시키는 태그

    <audio src="resources/audio/NonJeNeRegretteRien.mp3" controls autoplay loop>
    웹브라우저에서 audio태그가 없을때 표시하는 컨텐츠(글씨/이미지)
    </audio>

video tag (비디오 태그)

- 웹 브라우저에서 플러그인 없이 미디어를 재생시키는 태그
동영상 재생 : 컨트롤 표시 (controls)

    <video src="resources/video/video1.mp4" controls>
        controls : 재생바! <br>
        웹브라우저가 지원하지 않을때 표시되는 문구
    </video>

동영상 재생

- 재생 전 출력할 이미지 지정(poster), 크기지정(width/height)

    <video src="resources/video/video1.mp4" controls poster="resources/image/flower2.PNG" width="300px">
            영상을 지원하지 않습니다.
    </video>

이를 무단으로 도용, 복사, 전재, 재배포, 2차 변형 등을 할 경우