HTML5 기본 문서 - 이미지, 오디오, 비디오, 하이퍼링크

1. 이미지 태그

gif
무손실 압축, 256가지 제한된 색상 사용
애니메이션 지원
jpg
손실 압축으로 이미지의 압축 효율이 좋음
사진 이미지를 저장하는데 주로 사용
png
원본 손실이 없는 무손실 압축으로 트루 컬러(24비트), 투명 이미지 지원
jpg에 비해 압축 효율이 좋지 않음
일반적으로 웹에서 가장 많이 사용

• 형식

<img src=“이미지 파일의 경로" width=“이미지 폭” height=“이미지 높이”
title =“이미지 설명” >

• 속성
  src - 삽입하는 이미지 파일의 경로를 지정하는 필수 속성
  width - 이미지의 가로 크기로, 생략 시 원본 이미지의 크기로 삽입됨, 단위는 픽셀수
  height - 이미지의 높이로, 생략하면 원본 이미지의 크기로 삽입됨, 단위는 픽셀수
  title - 이미지에 마우스 포인터를 갖다 대었을 때 표시할 설명
  alt : 이미지가 없거나 손상 등 출력할 수 없는 경우 출력할 문자열. 필수 속성

  

URl

웹 문서에 사용하는 파일의 위치를 나타냄

• 절대 경로
  http://로 시작
  인터넷 상에 하나 뿐인 고유한 경로

• 상대 경로
  현재 폴더 위치를 기준으로 대상 파일이나 폴더의 위치를 지정
  서버의 폴더 구조나 도메인 변경 및 웹 페이지 제작, 수정에 편리
  주로 사용
  
  

2. 오디오 파일 재생

▼ HTML5에서 재생 가능한 오디오 타입

<audio> 태그

• 형식

<audio src=“오디오 파일 경로" controls autoplay loop>
이 태그를 지원하지 않는 브라우저가 출력하는 메시지
</audio > 

• 속성
  src - 삽입하는 오디오 파일의 경로를 지정
  controls - 이 속성이 설정되면 재생, 재생시간, 중단, 음소거 등 제어 버튼 출력
  autoplay - 이 속성이 설정되면 오디오 로딩 즉시 재생
  최신 브라우저의 경우 보안 상의 이유로 자동 재생이 안될 수 있음
  loop - 이 속성이 설정되면 반복 재생
  
  

<source> 태그

브라우저 마다 지원하는 오디오 파일의 종류가 다르므로 <audio>태그를 사용할 때 <source> 태그를 사용함

• 형식

<audio controls autoplay loop>
<source src=“오디오 파일명(.mp3)” type=“비디오 마임 타입(audio/mpeg)”>
<source src=“오디오 파일명(.wav)” type=“비디오 마임 타입(audio/wav)”>
<source src=“오디오 파일명(.ogg)” type=“비디오 마임 타입(audio/ogg)”>
</audio > 

3. 비디오 파일 재생

▼ HTML5에서 재생 가능한 비디오 타입

하나의 비디오를 여러 타입으로 만들어 두면 브라우저가 재생 가능한 타입을 선택함

<video> 태그

• 형식
  <video src=“비디오 파일 경로” width=“동영상의 너비”
  height=“비디오 재생 영역의 높이” controls autoplay muted loop>
  이 태그를 지원하지 않는 브라우저가 출력하는 메시지
  
• 속성
  src - 삽입하는 비디오 파일의 경로를 지정
  width, height - 생략되면 비디오의 원본 크기로 설정
  controls - 이 속성이 설정되면 재생, 재생시간, 중단, 음소거 등 제어 버튼 출력
  autoplay - 이 속성이 설정되면 비디오 로딩 즉시 재생
  muted - 오디오를 끌 때 사용
  loop - 이 속성이 설정되면 반복 재생
  
  

<source> 태그와 사용

<video width=“동영상의 너비” height=“동영상의 높이” controls autoplay loop>
<source src=“비디오 파일명(.mp4)” type=“비디오 마임 타입(video/mp4)”>
<source src=“비디오 파일명(.webm)” type=“비디오 마임 타입(video/webm)”>
<source src=“비디오 파일명(.ogg)” type=“비디오 마임 타입(video/ogg)”>
</video > 

4. 하이퍼링크 태그

같은 웹 사이트의 다른 HTML 페이지 연결
다른 웹 사이트의 HTML 페이지 모두 연결 가능

• 형식

<a href=“url” target=“윈도우 이름”> 텍스트 혹은 이미지 </a>

• 속성
  href : 이동할 HTML 페이지의 주소(url)
  target : 링크에 연결된 HTML 페이지가 출력될 윈도우 이름 지정
  
  target = “_blank” : 새로운 탭 또는 새로운 창에서 링크 열기
  target = “_self” : 현재 탭 또는 현재 창에서 링크 열기(기본값)