반응형


***************************
멀티미디어 태그 활용
***************************

<video> 태그 : html5에 새로 추가됨, ActiveX -> <video>

<!DOCTYPE html>
<html>
<body>
<h2>Video 태그 예제 - AVI</h2>
<video width="400" height="400" controls>
<source src="test.avi">
</video>
</body>
</html>


controls: 재생, 일시정지 등


*속성변경: controls -> autoplay

<!DOCTYPE html>
<html>
<body>
<h2>Video 태그 예제 - AVI</h2>
<video width="400" height="400" autoplay>
<source src="test.avi">
</video>
</body>
</html>

*******************
<audio> 태그
*******************

<!DOCTYPE html>
<html>
<body>
<h2>Audio 태그 예제 - AVI</h2>
<audio controls>
<source src="test.mp3">
</audio>
</body>
</html>


*******************
이미지맵 태그
*******************
-한 개의 이미지 파일에 여러 개의 링크를 할당하는 기술
- 그림을 단순히 연결 시킨 것이 아니라 그림의 부분들이 각기 다른 링크로 연결되어 있음
- 링크와 연결된 이미지의 영역: 핫스팟(hotspot)
- 정의하고자 하는 영역 모양에 따라: 사각형, 원, 다각형으로 설정

<map name="이름"> ... </map>
- 이미지 맵을 사용하기 위한 정보 정의
- 이름은 여러 이미지 맵을 사용할 경우 해당 이미지 맵 정보를 찾을 수 있도록 함

<area>
- 이미지 맵의 링크 영역을 정의
- 종료 태그 없이 단독 태그로 사용
- <map> ... </map> 내부에서만 사용


***********************
이미지맵 태그 속성
***********************

<map shape="rect" 또는 "circle" 또는 "poly">
- 이미지 맵을 사용하기 위한 정보 정의

<map href="주소">
- 정의된 영역을 마우스로 클릭했을 때 연결된 문서를 지정

<map coords="좌표값">
- Shape에 따른 영역의 실제 좌표 정의
- 실제 이미지에서의 왼쪽 위의 좌표를 (0,0) 기준
  오른쪽 방향-> X좌표 증가, 아래쪽 방향-> Y좌표 증가


***********************************
멀티미디어 관련태그 활용
***********************************
<video>, <audio>

***********************************
이미지맵 태그와 속성
***********************************
<area>, <shape>, <href>, <coords> 등

반응형