[HTML] 07. 이미지 & 비디오 & 음악

Front-End/HTML

[HTML] 07. 이미지 & 비디오 & 음악

Bigone17 2021. 11. 29. 11:45

🟡 1. img 태그 (이미지)

- img 태그를 이용하면, 웹사이트에 이미지를 삽입할 수 있습니다.

<!DOCTYPE html>
<html>
  <body>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNflneeGRvW5OoftwYZpSyQ_lio-fvT6urog&usqp=CAU" alt="지옥"/>
    <img src="img/힙라이언.jpg" alt="라이언"/>
    <img src="img/사자.jpg" alt="사자"/>
  </body>
</html>

img 태그의 속성은 크게 4가지가 있습니다.

속성	설명
src	src 속성은 이미지의 주소를 나타냅니다. 컴퓨터 내부의 파일 경로가 될 수 도 있고, 웹주소가 될 수도 있습니다. - 지옥사진은 웹주소, 라이언 사진은 컴퓨터 내부 주소.
alt	이미지의 설명을 나타내는 속성입니다. 이미지 파일을 찾지 못하는 경우 이미지 대신 표시가 됩니다.
width	이미지의 너비를 조절 할 수 있는 속성입니다.
height	이미지의 높이를 조절 할 수 있는 속성입니다.

🟡 2. audio 태그 (음악, 오디오)

- audio 태그는 오디오 파일을 삽일 할 수 있는 태그입니다. HTML5에서 추가된 태그로 IE8이하에서는 사용할 수 없지만 이제 IE가 없어지니까 크게 상관없을 거 같습니다.. ㅎㅎ

<!DOCTYPE html>
<html>
  <body>
    <audio src="음원파일 주소.mp3" controls></audio>
  </body>
</html>

audio 태그의 속성은 아래 표와 같다.

속성	설명
src	음악 파일의 주소를 나타냅니다.
preload	음악 파일 재생 전에 정보를 모두 불러올지 지정하는 태그입니다. - none : 미리 다운로드를 하지 않습니다. - metadata: 기본정보(첫 프레임, 크기, 오디오 길이 등)을 가져 옵니다. - auto: 미리 다운로드를 합니다 (기본값)
autoplay	음악 실행이 준비가 끝나는 대로 자동으로 실행 시킬지를 지정합니다.
loop	음악을 반복 재생 할 지 지정합니다.
controls	음악 재생 도구를 표시할 것인지 지정합니다.

Browser	MP3	Wav	Ogg
IE(곧 사라짐..)	O	X	X
Chrome	O	O	O
Firefox	O (24버전부터)	O	O
Safari	O	O	X
Opera	O (25버전부터)	O	O

음악 파일 형식이 웹브라우저 별로 지원하는 형식이 달라 source 태그를 사용하여 형식을 지정해 줄 수 있습니다.

<!DOCTYPE html>
<html>
  <body>
    <audio controls>
      <source src="음원파일 주소1.mp3" type="audio/mpeg">
      <source src="음원파일 주소2.ogg" type="audio/ogg">
    </audio>
  </body>
</html>

type 속성은 생략이 가능합니다.

🟡 3. video 태그 (비디오)

- video 태그는 비디오를 삽입하는 태그이고, HTML5에서 새롭게 추가된 태그로 IE8 이하에서는 사용할 수 없습니다.

<!DOCTYPE html>
<html>
  <body>
    <video src="video/1.mp4" controls width="500"></video>
  </body>
</html>

video 태그의 속성은 아래 표와 같습니다.

속성	설명
src	동영상 파일의 주소입니다.
poster	동영상이 로드되는 동안 미리 표시될 이미지 파일 경로입니다. (썸네일느낌)
preload	동영상 파일 재생 전에 정보를 모두 불러올지 지정하는 태그입니다. - none : 미리 다운로드를 하지 않습니다. - metadata: 기본정보(첫 프레임, 크기, 동영상 길이 등)을 가져 옵니다. - auto: 미리 다운로드를 합니다 (기본값)
autoplay	동영상 실행이 준비가 끝나는 대로 자동으로 실행 시킬지를 지정합니다.
loop	동영상을 반복 재생 할 지 지정합니다.
controls	동영상 재생 도구를 표시 할 것인지 지정합니다.
width	동영상 플레이어의 너비를 지정합니다.
height	동영상 플레이어의 높이를 지정합니다.

video 태그도 audio 태그와 마찬가지로 브라우저별로 지원하는 파일 형식이 달라 source 태그를 사용하여 형식 차이 문제를 해결할 수 있습니다. type 속성은 생략 가능합니다.

Browser	MP4	WebM	Ogv
IE	O	X	X
Chrome	O	O	O
FiredFox	O (21버전부터)	O	O
Safari	O	X	X
Opera	O (25버전부터)	O	O

~~역시 갓크롬👍~~

<!DOCTYPE html>
<html>
  <body>
    <video width="500" controls>
      <source src="video/1.mp4" type="video/mp4">
      <source src="video/2.webm" type="video/webm">
    </video>
  </body>
</html>

긴 글 읽어주셔서 감사합니다 :)
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽은 신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~

728x90

저작자표시

'Front-End > HTML' 카테고리의 다른 글

[HTML] 09-01. input : form 태그 안에서 사용되는 입력태그 (0)	2021.12.15
[HTML] 08. form(폼) (0)	2021.12.06
[HTML] 06. LIST & TABLE (1)	2021.11.17
[HTML] 05. Hyperlink (0)	2021.11.15
[HTML] 04. 텍스트 관련 태그2 (0)	2021.11.12

현재글[HTML] 07. 이미지 & 비디오 & 음악

250x250

HTML FORM, NextJS, Sentry, tag, rn 화면 회전 금지, 코딩테스트, jsonServer, JavaScript, HTML, 코테, rn 화면 회전, programmers, 자바스크립트 객체, html button, JS, 자바스크립트, json-server, rn 세모 모드 고정, 프로그래머스, Next.js,

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

운좋개