멀티미디어 태그

하이퍼링크 태그
<a></a>
- 페이지에서 해당 부분을 클릭하면 지정된 페이지로 이동하는 태그
- 외부 사이트 연결도 가능하고 , 현재 문서 내부 이동도 가능함

<a> 태그
속성	종류				내용
href 	xxxx.html				이동하려는 위치(주소, 해당 html 문서의 id값 등) 
	https://blog.naver.com/itisik	
	#앵커이름

target 	"_blank"(새창) 			링크한 페이지가 표시될 위치(새창, 현재창)지정
	"_self"(현재창)
	"_parent"(부모 창(부모찬이 없을때 까지 현재창)
	"_top"(가장 상위의 창(부모창이 없을 시 현재창)

title 	"설명글의 내용"			링크 내용에 대한 요약 설명

name	"앵커이름"			페이지 내 즉각적인 이동(anchor)이 가능하게 해줌

​

<img>태그 
 - 웹 페이지에 사진이나 그림등의 이미지를 삽입할 떄 사용하는 태그 
※ 종료 태그가 없음

<img>태그
속성		종류		내용
width, height	"###px", "##%"	각각 이미지의 가로(폭),세로(높이)길이 기정
alt		이미지에 대한 설명	이미지에 대한 부연설명
				이미지가 로드되지 않았을 때 대체되는 문구
src		"img/img1.png"	이미지 경로 지정
title(툴팁)	설명 박스상의 내용	마우스 포인터가 이미지 위에 오래 머물 때 
				나타나는 설명 박스 안에 표시할 내용

<웹페이지에서 사용 가능한 이미지 확장자>
파일형식(확장자 명)		내용
GIF		색 표현이 한정적이어서 파일크기가 작음
		단순한 아이콘이나 기호 등에 많이 사용
		투명한 배경이나 움직이는 이미지(움짤)에도 사용

JPG/JPEG 	웹페이지를 위해 개발된 형식
		GIF에 비해 다양한 색상을 표현할 수 있음

PNG		투명 배경도 가능하고, 화질대비 용량도 작아서 최근에 많이 사용됨 

ICO		탭에 적용되는 이미지(Favicon)에 주로 적용	

이미지 맵 태그
- 하나의 이미지에 (구역별로 설정하여) 여러개의 링크를 걸어주는 태그
- 사용을 위해서는 <img>태그에 usemap 이라는 속성을 먼저 지정해야함 

e.g)
<img src = "경로" usemap="#test">
<map name="test">
	<area shap = "모양" coords = "xx,yy(시작), xx, yy(종료)" href = "링크경로" target= "위치">
</map>
※ coords 속성에 적히는 숫자 값들의 단위는 px이다

<area>태그 shape 속성 종류(모양)
속성 종류 		도형
"rect" 		사각형 
"circle"		원(coords = 중심점 x좌표, 중심점 y좌표, 반지름)
"poly"		다각형
"default"		전체영역

이미지 좌표 따주는 사이트 : http://maschek.hu/imagemap/imgmap/

■ 이미지를 묶어 설명(캡션)을 달 수 있는 태그
<figure></figure>
- <img>태그를 <figure>태그에 가두어 사용한다. 
- <figure> 태그 내부에 <figcaption>태그를 이용하여 캡션(텍스트)을 작성해

오디오 태그 
<audio></audio>
-웹 브라우저에서 플러그인의 도움없이 음악을 재생할 수 있게 만들어 주는 태그 
<audio>태그
속성	종류			내용
src	xx.mp3m, xx.ogg, xx.oga	미디어 파일 경로
control 		-		컨드롤 막대 표시 
autoplay 	- 		자동 재생
loop		-		반복 재생
preload	none, metadata, auto(default) 오디오 파일 사전 로드 여부 지정

- none : 미리 다운로드 하지 않음(페이지 로드시 다운로드 하지 않음)
- metadata : 기본정보만 가져옴 (크기, 첫 프레임, 오디오 길이 등)
- auto : 미리 다운로드 (음악을 듣지 않아도 페이지 로딩시 다운로드 함)

비디오 태그 (아직 멀티미디어 파일 표준화가 이루어지지 않아 몇 가지 애로 사항이 있다. )
브라우저 별 코덱과 파일 형식 
브라우저			코텍		파일 형식
인터넷익스플로러8		지원하지 X 	지원하지 X
인터넷익스플로러9+		H.264/AVC(유료)	mp4
사파리
ios 및 Android 		
크롬,파이어폭스,오페라	webM(오픈소스),오그테오라(무료) Webm,ogv


<video></video>
- 웹 브라우저에서 플러그인 도움 없이 미디러를 재생할 수 잇게 만들어 주는 태그
- 위 표에서 알수 있다시피, 대부분의 브라우저에서 영상이 재생되려면, 세가지 확장자 명에 대한 파일을 갖추어야 한다. 
-> webm으로의 변환은 https://convertio.co/kr/mp4-webm/ 처럼 온라인을 사용하셔도 되고 별도 프로그램을 찾아보셔도 된다.
ㄴ 다만, 해당 영상이 프라이빗한 영상이라면 이러한 온라인 변환은 추천드리지 않는다.

 <video>태그 
속성		종류			내용
src		xxx.mp4, xxx.webm		미디어 파일 경로
width/height	###px, ##%		너비, 높이
controls			-		컨트롤 막대 표시
type		video/mp4, video/webm	파일형식(코텍)지정
		video/ogg	
autoplay			- 		자동재생
loop			-		반복재생
preload		none, metadata,auto(default) 오디오 파일 사전 로드여부 지정
poster		img/main-image1.png	재생 전 출력 이미지 썸네일

- none : 미리 다운로드 하지 않음(페이지 로드시 다운로드 하지 않음)
- metadata : 기본정보만 가져옴(크기, 첫 프레임, 영상 길이등) 
- auto : 미리 다운로드 (영상을 보지 않아도 페이지 로딩시 다운로드 함

 <form>태그
-사용자가 입력한 data를 보내는 방식과 처리할 프로그램을 정하는 태그(저장, 검색, 수정의 근간)
-<form>태그의 하위에<ul>,<li>태그를 이용해서 입력 양식들을 나열한다. 

<form>태그
속성	종류		내용
method	get, post		데이터 전송방식
action 	xxx.php, xxx.html	데이터 전송할 서버 쪽의 스크립트 파일을 지정(목적지 설정)
name	폼의 고유 이름	<form>태그의 고유 이름지정, form태그들을 구분하기 위함
target	생략		action에서 지정한 파일(목적지)을 현재 창이 아닌 다른 위치에서 열도록 지정


※ get : url창을 통해서 데이터를 보내는 방식 
: data크기에 제한이 있음(256~ 4096byte)
: data가 눈으로 보임

※ post : http body 안에 포함하여 보내는 방식 
: data크기에 제한이 없음
: data를 쉽게 볼수 없음(기술적으로 볼 수 있음)

■ <input>태그 
-사용자로부터 data를 입력 받기 위한 태그 
<type>
text : 한줄짜리 텍스트 입력 창이 생김(입력 그대로 보임)
password : 비밀번호 입력창(입력시 마스킹 처리)
search : 검색 상자 
number : 숫자 전용, 숫자를 조절할 수 있는 화살표 추가
email : 이메일 주소 입력 전용 
tel : 전화번호 입력 전용 
date : 연-월-일 입력 전용 
time :local time 입력시 (시: 분:초:분할 초)
url : url  주소 입력 전용 
hidden : 사용자에게 보이지는 않지만 값을 넣을수 있는 창
->관리자에게 필요한 값을 숨겨서 넘겨줘야 할때 사용
button: 버튼을 생성, 자체의 별도 기능은 없고, 자바스크립트로 함수에 연결해서 사용 
checkbox :체크박스생성(다중선택 : 취미, 흥미)
radio : 라디오 버튼 생성(단일선택 : 종교, 성별 등) 
file : 파일입력(첨부) 양식 출력버튼
image : 버튼 대신 이미지를 사용 (submit 과 기능동일 ) 
color: 색상 선택 적용 
submit :입력한 데이터를 action에 지정된 페이지로 제출하는 기능 
reset :입력한 내용을 지우는 기능 
<name> 
gender ,level,size : input마다 구별할 수 잇는 명칭
<value> 
female, male, low, mid, high, small, big : input 요소의 전달값 표시(기본값)
<list> 
[datalist의 id값] : color타입 전용(색상값 사전할당-datalist)
<checked> 
" " : 초기 기존 선택값(radio, checkbox)
<size> 
"##" : 화면에서 표시하는 글자수 (input창의 크기)
<minlength/maxlength>
"##" : 최소 입력 글자수/ 최대 입력 글자수 지정
<min/max/step> 
"##" : 허용하는 범위 최솟값, 최대값, 값의 증감값
<autocomplete> 
"default","on","off" : 자동완성 기능 사용 여부 지정
<readonly> 
-,"readonly","true" : 읽기 전용( 수정 불가)
<placeholder> : 
"id를 입력해주세요" : 사용자 입력 전 입력창 표시글
<onclick> 
"xxx.html", "xxx.php" :botton type전용 (action속성과 동일)
<required> 
	: 필수 입력 필드 지정
<multiple> 
 	: 여러개의 파일 입력(업로드)가능
<autofocus> 
	: 마우스 커서 표시 (자동으로 되는 추세)


 

<fieldset>태그 
- 폼 태그의 요소들(주로 input)을 보기 쉽게 그룹으로 묶어주는 태그(외곽선그리기)
<fieldset>태그
속성		종류	내용
disabled		-	하위의 <input>태그 항목들이 화면에는 표시되나, 선택이나 입력이 불가능해짐
form 		"이름"	해당 field의 이름을 지정(화면에 표시되지 않음)
name 		"이름"	해당 field에서 처리하여 서버로 넘길 떄의 이름을 지정(화면에 표시되지 않음)
id		"이름" 	해당 field의 고유id를 지정(css에서 활용)(화면에 표시되지 않음)

<legend>태그 
<fieldset>태그 안에서 제목을 붙일 때 사용 

<label>태그
-<input>태그의 속성이 "checkbox"이거나 "radio"같이 좁은 영역을 선택해야하는 타입인 경우 유용한 태그로,
항목을 선택할 떄 해당하는 텍스트를 선택해도 선택될 수 있도록 해주는 태그

<!-- 사용방식1 -->
<label>
  <input type="radio" id="male" value="male" name="gender">남성
</label>

<!-- 사용방식2 -->
<label for="female">여성</label>
<input type="radio" id="female" value="female" name="gender">

<select>태그 
-드롭다운(선택박스)형태의 옵션을 만들떄 사용하는 태그
속성 
size ="한번에 보여질 목록의 최대 개수"

<option>태그
-드롭다운(선택박스)형태의 옵션에서 선택항목 하나하나를 구성하는 태그 속성 
value : 서버로 전송할 값 
select : 초기 기본 선택 값 
label : 브라우저에서 표시할 레이블(<datalist>태그 내부에서의 <option>태그 사용시)

<output>태그
-입력값에 따른 출력값을 표현할 떄 사용 


<form oninput="result.value=parseInt(num1.value)-parenInt(num2.value)">
<input type ="number" name ="num1" value="2019">
-
<input type ="number" name="num2" value= "1994">

=<output name = "result" for="num"></output></form>

<progress>태그 
-작업 진행 바 
속성 
value : 현재까지의 작업 진행량 (floating방식 ,0이상 max이하)
max :총 작업량 (floating방식, 0초과/ default값 : 1)

<meter> 태그 
-<progress>태그와 유사하나 할당량의 대소를 판별함.
속성
min : 범위의 최소값을 나타냄, default값 : 0
max : 범위의 최대값을 나타냄, default값 : 1
low : 사용자가 정하는 낮다의 지준치
aptimum : 사용자가 정하는 '적절하다'의 기준치 
high : 사용자가 정하는 '높다'의 기준치