HTML 기본 태그 (미디어 요소)

Jeonghun·2023년 3월 2일
0

HTML

목록 보기
6/9

📒HTML5 기본 태그

- 미디어 삽입 태그

📌<img> 태그

<img> 태그는 정보성을 갖고있는 이미지를 삽입할 때 사용한다.

Example)

<img src="chicken.jpg" alt="chicken!" width=100px height=100px>
  • <img> 태그의 속성
    • src = 이미지의 링크
    • alt = 이미지가 정상적으로 나타나지 않을때 대체되는 텍스트
    • width = 이미지의 넓이
    • height = 이미지의 높이

<img> 태그는 열린태그만 가지고 있으며, 닫힌태그는 없다.

📌<audio> 태그

<audio> 태그는 문서에 음향 파일을 삽입할 때 사용한다.

Example)

<audio src="audio file" controls autoplay loop muted preload></audio>
  • <audio> 태그의 속성

    • src = 오디오 파일의 링크
    • controls = 컨트롤 막대 표시 (재생/멈춤, 진행바, 볼륨 등)
    • autoplay = 오디오 자동 재생
    • loop = 오디오 반복 재생
    • muted = 음소거 재생
    • preload = 재생 전 오디오 불러오기

📌<video> 태그

<video> 태그는 문서에 음향 파일을 삽입할 때 사용한다.

Example)

<video src="video file" controls width="100px" height="100px" autoplay
 muted loop preload poster="썸네일 이미지.jpg"></video>
  • <video> 태그의 속성
    • src = 비디오 파일의 링크
    • controls = 컨트롤 막대 표시 (재생/멈춤, 진행바, 볼륨 등)
    • autoplay = 오디오 자동 재생
    • loop = 오디오 반복 재생
    • muted = 음소거 재생
    • preload = 재생 전 오디오 불러오기
    • width = 비디오의 가로 폭 조정
    • height = 비디오의 세로 폭 조정
    • poster = 비디오의 썸네일 이미지 설정

<source> 태그를 사용하는 방법

Example)

<audio controls>
	<source src="audio file" type="audio/ogg">
    <source src="audio file" type="audio/mpeg">
    <source src="audio file" type="audio/wav">
	파일 오류 시 대체되는 텍스트 내용
</audio>
<!-- <video> 태그도 동일한 폼으로 작성 -->
  • <source> 태그의 속성
    • src = 오디오 파일 또는 비디오 파일의 링크
    • type = 오디오 파일 또는 비디오 파일의 유형 체크
    • codecs = 코덱 지정

<audio> 태그에서는 'mp3', 'wav', 'ogg' 3가지의 파일 형식을 지원한다.
✔ 브라우저에 따라 지원하는 파일의 형식이 다르기 때문에, <source> 태그를 사용하여
여러 형식의 파일을 지정한다. 위의 경우 ogg -> mp3 -> wav -> 오류메시지 순서로 실행된다.

📌<iframe> 태그

<iframe> 태그는 <video> 태그와 마찬가지로 문서에 음향 파일을 삽입할 때 사용한다. 이는 'youtube' 등의 플랫폼에서 영상을 가져와 업로드 한다.

Example)

1. Youtube 등의 플랫폼에서 가져올 동영상 클릭
2. 해당 동영상의 공유 버튼 클릭
3. 퍼가기 클릭 후 나타나는 <iframe> 태그의 주소를 복사하여 동영상 삽입할 위치에 붙여넣기

profile
안녕하세요, 프론트엔드 개발자 임정훈입니다.

0개의 댓글