본문 바로가기
Frontend/HTML

이미지/이미지 맵 태그 & 문서 삽입 태그 & 오디오/비디오 태그

olli2 2021. 12. 2. 16:27

이미지 태그

  • <img> 태그
  • 인라인 태그 -> 이미지 바로 옆에 다른 요소가 나란히 배치
  • 여러 개의 <img> 태그를 사용하면 계속해서 오른쪽에 표시

이미지 태그의 속성

속성명 설명
src 이미지 경로 (필수)
align 정렬 방식
alt 이미지 출력 안 될 때 사용하는 대체 텍스트
title 마우스 위치에 출력되는 툴 팁 설명
width 가로 길이
height 세로 길이
border 테두리
hspace 좌우 여백
vspace 상하 여백

align, border, hspace, vspace는 더이상 HTML5 지원 X

 

이미지 파일 경로

  • HTML 파일과 같은 폴더에 있는 경우
    • 이미지 파일명만 적어도 접근 가능
    • <img src=”사진.jpg”>
  • 하위 폴더에 있는 경우
    • 폴더명/이미지 파일명
    • <img src=”images/사진.jpg”>
  • 하위 폴더가 아닌 다른 폴더에 있는 경우
    • ../폴더명/이미지 파일명
    • <img src=”../image/사진.jpg”>

이미지 맵 태그

  • 하나의 이미지를 여러 구역으로 나누어 각 영역마다 다른 링크를 거는 것
  • 이미지의 좌표점에 따라 영역을 지정하여 링크를 걸어줌
  • 기본적으로 <img>, <map>, <area> 태그 포함
  • 사용 방법
    • <img> 태그의 usemap 속성으로 이미지 맵 지정
    • <map> 태그를 이용해 이미지 맵 생성
    • <area> 태그를 이용해 영역 지정
      • shape : 링크되는 영역의 모양 지정 (사각형 - rect / 원형 - circle / 다각형 - poly)
<!-- 사각형 shape 사용 예시 -->
<img src="이미지 경로" usemap="#이미지맵 명">
  <map name="이미지맵 명">
    <area shape="rect" cords="시작x좌표, 시작y좌표, 끝x좌표, 끝y좌표" href"링크 주소">
    ...
  </map>

 

이미지 맵  태그 예제

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>이미지 맵</title>
	</head>
	<body>
		<div id="wrap">
			<img src="image/메인.png" border="1" usemap="#cityMap">
			
			<map name="cityMap">
				<area shape="rect" coords="60,90,250,150" href="뉴욕.html">
				<area shape="rect" coords="310,90,500,150" href="파리.html">
				<area shape="rect" coords="560,90,750,150" href="로마.html">
				<area shape="rect" coords="810,90,1000,150" href="베이징.html">
			</map>
		</div>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>뉴욕</title>
	</head>
	<body>
		<center>
			<img src="image/뉴욕.png">
		</center>
	</body>
</html>

<!-- 이와 같은 방법으로 나머지 파일들도 생성 -->

문서 삽입 태그

  • <iframe> 태그
  • 현재의 html 문서 내에 다른 문서 포함
    • 사용 방법
      • <iframe> 태그를 사용하여 영역 만들기
      • <map>의 <area>에서 target=”iframe이름” 지정

오디오 태그

  • <audio> 태그
  • 오디오 파일 재생
  • <audio> 태그 속성
    • src : 오디오 파일 경로
    • preload : 재생하기 전에 오디오 파일을 모두 다운로드
    • autoplay : 자동 재생
    • loop : 반복 재생
    • controls : 재생 도구 출력
<audio src=”audio.mp3” preload=”auto” controls loop>
  • <source> 태그
    • 미디어 파일 지정
    • 여러 미디어 파일을 한꺼번에 지정
    • 브라우저에 따라 지원하는 오디오 코덱이나 비디오 코덱이 다르기 때문에
    • 한 가지 파일만 사용했을 경우 일부 브라우저에서 지원하지 않는 경우 발생 
    • 따라서 여러 유형의 미디어 파일 지정
<audio>
  <source src=”a.ogg” type=”audio/ogg”>
  <source src=”a.mp3” type=”audio/mpec”>
</audIo>

비디오 태그

  • <video> 태그
  • 비디오 파일 재생
  • mp4, ogv, webm 파일 형식
  • <video> 태그 속성
    • src : 오디오 파일 경로
    • preload : 재생하기 전에 오디오 파일을 모두 다운로드
    • autoplay : 자동 재생
    • loop : 반복 재생
    • controls : 재생 도구 출력
    • poster : 비디오 준비 중일 때의 이미지 파일 경로 지정
  • <track> 태그
    • 자막 표시
    • WebVTT 형식 파일 (.vtt)
    • Web Video Text Tracks

 

저작자표시 비영리 변경금지

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

공간 분할 태그와 HTML5 시맨틱 구조 태그  (0) 2021.12.02
입력 양식 태그  (0) 2021.12.02
목록 태그 & 테이블 태그  (0) 2021.12.02
HTML 문서 구조 태그 & 텍스트 관련 태그 & 하이퍼링크 태그  (0) 2021.12.02
태그(tag)의 개념 및 HTML의 기본 태그들  (0) 2021.12.02

'Frontend/HTML' Related Articles

티스토리툴바