[기본 개념] 1 | (1.3) 멀티미디어, 하이퍼링크

[기본 개념] 1 | (1.3) 멀티미디어, 하이퍼링크

1 텍스트 입력하기

2 목록 만들기

3 표 만들기

4 이미지 삽입하기

5> 오디오와 비디오 삽입하기

6> 하이퍼링크 삽입하기

5. 오디오와 비디오 삽입하기

다양한 멀티미디어 파일을 삽입할 때 쓰는 <object>, <embed> 태그

 

기본형

<object width="너비" height="높이" data="파일"></object>

 

기본형

<embed src="파일 경로" width="너비" height="높이">

 

 <object> 태그는 비디오, 오디오, 자바 애플릿, PDF 등 다양한 멀티미디어 파일을 삽입할 때 사용하고, 웹 문서 안에 다른 문서를 삽입할 때도 사용한다.

 

 data 속성에 보여줄 멀티미디어 파일을 지정하고 width, height 속성을 사용하여 플레이어의 크기를 지정한다.

 

 <embed> 태그는 HTML 의 <audio>, <video>, <object> 태그를 지원하지 않는 웹 브라우저에서 사용하며, src 속성을 사용하여 삽입할 멀티미디어 파일을 지정한다. 또한 width, height 속성으로 플레이어의 너비와 높이를 지정할 수 있다. <embed> 태그에는 닫는 태그가 없다.

 

오디오와 비디오 파일을 삽입하는 <audio>, <video> 태그

 

기본형

<audio src="오디오 파일 경로"></audio>

<video src="비디오 파일 경로"></video>

 

 배경 음악이나 효과음 등 오디오 파일을 삽입할 때 <audio> 태그를, 비디오 파일을 삽입할 때는 <video> 태그를 사용한다. 비디오 파일은 너비값을 지정하지 않으면 웹 브라우저에 가득 차서 나타나므로 width 속성을 사용하여 너비값을 정하는 게 좋다.

 

 <audio>, <video> 태그에는 방문자가 재생하거나 멈출 수 있도록 컨트롤 바를 나타내는 controls 속성이 있다.

 

(ex. 컨트롤 바가 나타남 )

 

<audio src="medias/spring.mp3" controls></audio>

 

 

<audio>, <video> 태그의 속성 알아보기

 

종류	설명
controls	플레이어 화면에 컨트롤 바를 표시
autoplay	오디오나 비디오를 자동으로 실행
loop	오디오나 비디오를 반복 재생
muted	오디오나 비디오의 소리를 제거
preload	페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정. 사용할 수 있는 값은 auto, metadata, none이며 기본값은 preload="auto"
width, height	비디오 플레이어의 너비와 높이를 지정
poster="파일 이름"	<video>태그에서 사용하는 속성으로 재생되기 전까지 화면에 표시될 포스터 이미지를 지정

 

 오디오 파일을 배경음악처럼 사용하려면 <audio> 태그에서 autoplay 속성과 loop 속성을 지정하고 플레이어가 보이지 않도록 하려면 controls 속성을 빼면 된다. 대부분의 웹 브라우저는 오디오나 소리있는 비디오 파일의 자동 재생을 금지하고 있다.

 

(ex. 자동재생 무한반복 컨트롤 바 없음 )

 

<audio src="medias/spring.mp3" autoplay loop></audio>

 

 비디오 파일도 웹 문서에서 자동재생 하려면 <video> 태그 안에 autoplay 속성과 loop 속성을 지정하면 된다.

 

(ex. 자동재생 무한반복 너빗값 700 )

 

<video src="medias/salad.mp4" width="700" autoplay loop></audio>

6. 하이퍼링크 삽입하기

링크를 삽입하는 <a>태그와 href 속성

 

기본형

<a href="링크할 주소">텍스트 또는 이미지</a>

 

 웹 사이트에서 가장 많이 사용되며 <a> 태그로 만드는데, 텍스트를 사용하면 텍스트 링크가 되고, 이미지를 사용하면 이미지 링크가 된다. <a> 태그의 기본형은 href 속성을 이용해 연결할 파일이나 링크할 주소를 쓴다.

 

 텍스트 링크는 <a> 와 </a> 태그 사이에 링크로 만들 텍스트를 입력하고, href 속성에는 연결할 문서의 경로와 파일명을 넣으면 된다.

 

(ex. 주문서 작성하기 클릭하면 연결문서로 이동 )

 

<div>
  <p><a href=". ./0.5/order.html">주문서 작성하기</a></p> 
</div>

 

 이미지 링크는 <a> 와 </a> 태그 사이에 <img> 태그로 이미지 파일을 넣고, href 속성에는 연결할 문서의 경로와 파일명을 넣으면 된다.

 

(ex. 레드향 사진을 클릭하면 연결문서로 이동 )

 

<a herf=". ./05/order.html"><img src="images/gangerines.jpg" alt="레드향"</a>

 

 target 속성은 target 속성에 _blank 를 지정하면 링크를 클릭했을 때 연결된 문서가 새 탭에서 열린다.

 

(ex. 주문서 작성하기 클릭하면 연결문서가 새 탭에서 열림 )

 

<div>
  <p><a href=". ./0.5/order.html" target="_blank">주문서 작성하기</a></p> 
</div>

 

 

   

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)