[HTML] HTML 이미지, 동영상(유튜브), 음악 넣는 법

Client/HTML

[HTML] HTML 이미지, 동영상(유튜브), 음악 넣는 법

meeeeejin 2021. 4. 28. 09:44

멀티미디어와 관련된 태그

✔ 이미지(image) 넣기

html 문서에 이미지를 넣으려면 <img> 태그를 사용하면 됩니다. <img> 태그는 이미지를 정의할 때 사용하는 태그입니다. 이 태그를 사용해서 이미지를 넣으면, 이미지가 html 문서에 직접 삽입되는 것이 아니라 이미지 주소가 링크되는 형태입니다. 따라서 <img> 태그에는 src와 alt 속성을 반드시 명시해 주어야 합니다.

src: source, 속성 값으로 이미지의 URL을 받습니다.
alt: alternative text, 속성 값으로 사진 설명을 받고, 이 설명은 불러올 이미지가 없거나 이미지를 불러오는데 실패했을 경우 대신 나타납니다.

<img 
	src="https://item.kakaocdn.net/do/a1866850b14ae47d0a2fd61f409dfc057154249a3890514a43687a85e6b6cc82" 
    alt="루피 사진"
    width="30%" height="30%" 
>

✔ 영상(video) 넣기

1. <video> 태그 이용

영상은 <video> 태그를 이용하여 넣을 수 있습니다. <video> 태그는 무비 클립(movie clip)이나 비디오 스트림(video stram)과 같은 비디오를 정의할 때 사용합니다. 현재 MP4, WebM, Ogg 포맷의 파일을 지원합니다.

사용할 수 있는 속성

속성	속성값	설명
autoplay	autoplay	비디오 자동 실행
controls	controls	플레이나 정지 버튼 등 비디오 실행 제어기 표시
height	픽셀	비디오의 높이
width	픽셀	비디오의 너비
loop	loop	비디오 재생이 끝나면 다시 재생(반복 재생)
muted	muted	비디오 음소거(소리 출력X)
poster	URL	비디오를 다운로드하는 동안이나 사용자가 재생 버튼을 누를 때까지 표시할 이미지 URL
preload	auto metadata none	페이지가 로드될 때 오디오 파일이 같이 로드외어야 하는지 여부와 그 방법
src	URL	비디오 파일의 위치(URL)

<video height="180" width="288" controls>
    <source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
    <source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
    브라우저가 video 태그를 지원하지 않을 때 표시되는 문장
</video>

2. 유튜브 영상 퍼오기

유튜브 영상을 html 문서에 삽입하고 싶을 경우, 우선 원하는 유튜브 영상을 찾습니다.

1) 영상 아래쪽에 공유 버튼을 클릭합니다.

2) 공유 버튼을 누르면 나오는 창에서 퍼가기를 클릭합니다.

3) 다음과 같이 <ifram> 태그가 포함된 코드를 복사합니다.

4) 복사한 코드를 html 파일에서 영상을 넣고 싶은 부분에 붙여 넣습니다.

✔ 오디오(audio) 넣기

오디오은 <audio> 태그를 이용하여 넣을 수 있습니다. <audio> 태그는 음악이나 오디오 스트림과 같은 사운드를 정의할 때 사용합니다. 현재 MP3, WAV, Ogg 포맷의 파일을 지원합니다.

사용할 수 있는 속성

속성	속성값	설명
autoplay	autoplay	오디오 자동 실행
controls	controls	플레이나 정지 버튼 등 오디오 실행 제어기 표시
loop	loop	오디오 재생이 끝나면 다시 재생(반복 재생)
muted	muted	오디오 음소거(소리 출력X)
preload	auto metadata none	페이지가 로드될 때 오디오 파일이 같이 로드외어야 하는지 여부와 그 방법
src	URL	오디오 파일의 위치(URL)

<audio 
    controls
    src="/audio/Dolphin-오마이걸(OH MY GIRL) -.mp3" 
    type="audio/mpeg"
>
    브라우저가 audio 태그를 지원하지 않을 때 표시되는 문장
</audio>

✔ 사용 예시

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>멀티미디어와 관련된 태그</title>
</head>
<body>
    <!--image-->
    <img 
    	src="https://item.kakaocdn.net/do/a1866850b14ae47d0a2fd61f409dfc057154249a3890514a43687a85e6b6cc82" 
        alt="루피 사진"
        width="30%" height="30%" 
    >
    <!--youtube-->
    <iframe 
        width="500" height="255" 
        src="https://www.youtube.com/embed/b6nCWvzVbH0" 
        title="YouTube video player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
    </iframe>

    <!--audio-->
    <audio 
        controls
        src="/audio/Dolphin-오마이걸(OH MY GIRL) -.mp3" 
        type="audio/mpeg"
    >
        브라우저가 audio 태그를 지원하지 않을 때 표시되는 문장
    </audio>
</body>
</html>

참고 사이트:

tcpschool.com/html-tags/video

tcpschool.com/html-tags/audio

728x90

저작자표시 비영리 동일조건

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

[HTML] 링크 태그 <a> 사용법, href, target 속성 (0)	2021.04.28
[HTML] 제목, 본문, 글자 태그(h, p, br, pre, strong, em, b, sub, sup, ins, del 태그) (0)	2021.04.27
[HTML] 시맨틱 태그(Semantic Tag), HTML 레이아웃 (0)	2021.04.27
[HTML] HTML이란? HTML 개념 및 요소와 구조 (0)	2021.04.27
[HTML] Form(폼) 태그와 Input 태그 사용법 (0)	2020.06.08

현재글[HTML] HTML 이미지, 동영상(유튜브), 음악 넣는 법

250x250

BOJ, 책 리뷰, display flex, 백준, c++, 모두 0으로 만들기, CSS, Python, 2018 카카오 코딩테스트, Java, EC2, 파이썬, 오늘 또 일을 미루고 말았다, AWS, 프로그래머스, spring, css flexbox, html, docker, 개발자의 글쓰기,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

👾