Multi Developer SuHo

HTML 이미지<img>, 비디오<video>, 오디오 태그<audio> 본문

html5+CSS3

HTML 이미지<img>, 비디오<video>, 오디오 태그<audio>

Dreaming Developer Student 2024. 2. 3. 14:36
SMALL

안녕하세요~ 이미지 태그와 비디오 태그, 오디오 태그에 대해 알아보겠습니다!! 어려운 부분은 많이 없으실겁니다.



글을 작성하기전 모든 내용은 다음과 같은 강의플랫폼을 활용하여 작성하였습니다.
https://www.inflearn.com/course/html-css-%EA%B8%B0%EC%B4%88-%EB%AC%B8%EB%B2%95-%EC%98%AC%EC%9D%B8%EC%9B%90

 

[지금 무료] HTML5 & CSS3 기초 문법 올인원 강의 - 인프런

도서 HTML5 독학백서 & CSS3 독학백서 저자 직강! 이론은 짧게 핵심만! 모던 HTML과 CSS에 입문하기 위해 꼭 알아야 하는 핵심 문법 엑기스만 정리했습니다., 핵심을 컴팩트하게! 빠르게 해치우는 HTML/

www.inflearn.com


우선 이미지 태그부터 알아볼까요? 
이미지 태그 <img> - HTML에서 이미지를 삽입하려면 <img> 태그를 사용합니다.  이 태그는 주로 이미지를 웹 페이지에 삽입하는 데 사용됩니다.
이미지 태그 사용 방법 코드

<img src="불러올 이미지 경로" alt="설명 텍스트">


이미지 태그와 사용되는 다양한 속성들

1.src: 이 속성은 이미지의 URL을 지정합니다. 이것은 웹에서 직접 이미지를 가져오거나 웹사이트의 로컬 디렉토리에 저장된 이미지를 불러올 수 있습니다.
2.alt: 이 속성은 이미지가 로드되지 않을 때 표시되는 대체 텍스트를 지정합니다. 이는 접근성을 향상시키는 데 중요합니다.
3.width와 height:  이미지의 가로 크기를 지정하는 width 속성과 이미지의 세로 크기를 지정하는  height 속성이 있습니다.

★ ★ ★ ★중요!!  ->  이미지 태그를 사용할때는 alt 속성을 사용해주면 웹 접근성을 향상시키는데 중요한 역할을 하기 때문에, 같이 사용하시면 될 것 같습니다.

이미지 태그와 alt 속성을 사용한 소스코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
</head>
<body>
 <img src="../img/pinggu.jpg" alt="핑구">
</body>
</html>


상대경로를 이용하여 이미지를 불러왔습니다. 

alt 속성 결과화면


width 속성과, height 속성을 사용한 소스코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
</head>
<body>
 <img width="1000px" height="1000px" src="../img/pinggu.jpg" alt="핑구">
</body>
</html>

 


다음은 멀티미디어 태그입니다. 
멀티미디어 태그 - HTML에서 멀티미디어 태그는 웹 페이지에 오디오, 비디오, 그래픽과 같은 멀티미디어 요소를 삽입하는 데 사용되는 특별한 태그를 의미합니다. 이 태그들은 사용자가 웹 페이지에서 직접 멀티미디어 콘텐츠를 재생하거나 조작할 수 있게 해줍니다.
멀티미디어 태그들의 종류

1.<audio> 태그: 웹 페이지에 오디오 클립을 삽입할 때 사용합니다. 예를 들어, 음악 파일이나 음성 녹음 등을 웹 페이지에서 재생할 수 있게 해줍니다.
2. <video> 태그: 웹 페이지에 비디오를 삽입할 때 사용합니다. 사용자가 직접 비디오를 재생, 일시정지, 볼륨 조절 등을 할 수 있습니다.

오디오 태그와 비디오 태그 말고도,  웹 페이지 내에 다른 웹 페이지를 삽입하는 데 사용되는 <iframe> 태그와 , 이 태그들은 웹 페이지에 Flash 애니메이션, Java 애플릿, PDF 등과 같은 다양한 형태의 콘텐츠를 삽입할 때 사용되는 <embed> <object> 태그들이 있습니다.

<video> 태그도 이미지 태그와 같은 방식으로 불러옵니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
</head>
<body>
 <video src="가져올 동영상 mp4파일" ></video>
</body>
</html>


<video> 태그를 사용하여 동영상을 가져온 소스코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
</head>
<body>
 <video src="../img/크리퍼.mp4" ></video>
</body>
</html>

 


동영상을 가져오긴 하였지만  재생이 안되는 결과가 나옵니다. 이 문제를 해결하기 위해서는 <video> 태그에서 사용할 수 있는 몇가지 제어 속성을 사용하면 됩니다.
제어 속성 종류에는 controls, autoplay, loop, muted, preload, poster 등등 다양한 제어속성이 있습니다.  일단 기본적으로 알아야 하는 속성은 controls 속성입니다. 
controls : 이 속성은 브라우저에게 비디오의 재생, 일시정지, 볼륨 조절 등의 컨트롤을 사용자에게 보여주도록 지시합니다.

말 그대로 브라우저에 비디오 재생, 일시정지 등 사용자에게  컨트롤러가 보이도록 해주는 속성입니다. 

다음 소스는 controls 속성을 사용한 소스 코드 입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
</head>
<body>
 <video 
 controls
 width="950px"
 height="800px"
 src="../img/크리퍼.mp4" >
</video>
</body>
</html>

 


동영상 출처: https://youtu.be/u9QImCD1lpw



재생 버튼과 사운드 컨트롤러가 나타나는 것을 볼 수 있습니다.

마지막으로 오디오 태그 <audio> 입니다. 
오디오 태그 - 오디오 콘텐츠, 즉 소리 파일을 웹 페이지에 삽입할 때 사용합니다.

오디오 태그도 비디오 태그처럼 똑같이 사용하시면 됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
</head>
<body>
 <audio controls
 src="../img/인사.mp4" >
</audio>
</body>
</html>

 


소리 영상 출처: https://youtu.be/bbqr6NkJ88A


이상으로 이미지태그, 비디오 태그, 오디오 태그에 대해 설명했습니다. 글 한번 읽어보시고 어려운 부분 있으시면 저한테 물어보셔도 괜찮습니다!! 

LIST
저작자표시

'html5+CSS3' 카테고리의 다른 글

HTML 폼(form) 태그 , <input>(위젯)  (0) 2024.02.05
HTML <div>, <span> 태그 & class and id  (0) 2024.02.04
HTML 링크 태그, 리스트 태그  (0) 2024.02.01
HTML 주석 처리, 인라인 태그, 블록 태그  (0) 2024.01.29
HTML 제목, 문단, 서식 태그  (0) 2024.01.29
'html5+CSS3' Related Articles more