[HTML] Multimedia

이미지, 동영상, 노래파일, PDF파일, 알집 파일 등을

HTML 태그로 불러와 보려고 합니다.

그럴려면 파일 경로가 필요한데요.

파일 경로는 두 가지가 있습니다.

절대 경로와 상대 경로가 있는데요.

 

절대 경로는 처음부터 다 명시하는 것입니다.

경기도 부천시 00동 XXX로 ㅁㅁ길 11 ㅂㅂ빌딩 5층

하지만 절대 경로는 사용자 마다 다르기 때문에

실전에서는 사용이 어렵습니다.

 

상대경로는 현재 작업중인 HTML기준의 경로입니다.

경로 이동을 하는 코드가 따로 있는데

 

..  :  한단계 위의 경로로 갑니다. 

 

이때 가급적이면 한글 경로는 사용하지 않습니다.

 

이미지를 먼저 불러와보겠습니다.

img라는 태그를 사용하는데

src의 값으로 img의 경로가 들어가면 됩니다.

경로는 이미지를 우클릭하고

properties에 들어가서 알아낼 수 있습니다.

 

<img src = "C:\Users\sdedu\Desktop\JSP\Jan09_1_HTML\src\main\webapp\reservation-5421878_1280.jpg"

width = "600px" height = "600px">

</img>

 

이때 width와 height 속성을 부여해서 사이즈를 조절할 수도 있습니다.

가로나 세로 중에 하나만 조절하면 그 원본 비율에 따라서

크기를 조절할 수 있습니다.

만약 크기 단위를 안쓰면 px(픽셀) 단위로 지정이 되고,

%단위로도 사용이 가능합니다.

근데 사이즈 조절은 안하는게 좋습니다.

이를테면 가로 100px, 세로 100px 이미지의 크기를

300px, 300px로 바꿔버리면

픽셀이 드문드문 나오게 되어서

이미지가 깨질 수도 있기 때문입니다.

 

다음은 비디오를 넣어보겠습니다.

 

<video src = "../113244-697585582_small.mp4" controls = "controls"></video>

 

video태그를 사용해서 넣을 수 있는데 이때 controls 속성을 부여해야재생버튼이나 정지버튼 같이 비디오의 실행을 제어할 수 있는 제어기가 표시됩니다.

 

이번엔 pdf를 불러오겠습니다.

 

<embed src = "../201810906 컴퓨터 과학과 김래현 핀토스 과제1 보고서.pdf">

 

 

embed를 사용해서 pdf를 불러올 수 있는데

embed는 음악, 영상, 문서 등의 외부 콘텐츠를 불러올 수 있습니다.

하지만 최신 브라우저들은 지원을 중단하고 있는 추세라 지양해야합니다.

 

마지막으로 음악 파일을 넣어보겠습니다.

 

<audio src = "../funny-comedy-memes-music-humor-comic-background-intro-theme-272171.mp3" controls = "controls"></audio>

 

audio 태그를 사용해서 넣을 수 있는데요.

경로를 설정해주고 

video 태그와 마찬가지로

controls를 부여해야

제어기가 표시되고,

속성을 부여하지 않으면

아무것도 보이지 않습니다.