[HTML] 하이퍼링크와 멀티미디어

1. 하이퍼 링크

<a href="URL" | "URL#앵커이름" | "#앵커이름"
   target="윈도우 이름"
   download>
텍스트 혹은 이미지
</a>

• target 속성의 값은 다음 5가지 종류로 지정할 수 있다.
  • _blank : 새로운 브라우저 윈도우(탭)에 열기
  • _self : 현재 윈도우(탭)에서 열기
  • _parent : 부모 윈도우(탭)
  • _top : 최상위 브라우저 윈도우
  • 윈도우 이름 : 해당 이름의 윈도우

 

• download : 링크가 클릭되면 href에 지정된 파일이 다운로드 됨.

 

    1-1. 텍스트에 링크 만들기

<a href="student/register.html" target="_blank"> 학생 등록 페이지로 이동합니다. </a>

• student/register.html : 상대주소
• target="_blank" : 새 윈도우(탭)에 출력

 

    1-2.이미지에 링크 만들기

<a href="http://www.etnews.com"> 
	<img src="media/iconeetnews.png" alt="전자신문">
</a>

• http:// 절대주소

 

    1-3. 같은 웹페이지 내에서 연결하기 (책갈피)

<a href="#chap1"> 서론으로 가기 </a>
...
<h3 id="chap1"> 1장 서론 </h3>

 

 

 

3. 비디오 삽입

<video src="비디오 파일의 URL"
       width="비디오 재생 영역의 폭"
       height="비디오 재생 영역의 높이"
       controls
       autoplay
       muted
       loop>
이 태그를 지원하지 않는 브라우저가 출력하는 메시지
</video>

• width, height : 생략되면 비디오의 원본 크기로 설정
• controls :  재생, 재생 시간, 중단, 음소거 등 제어 버튼 출력
• autoplay : 비디오 로딩 즉시 재생
• loop : 반복 재생
• muted : 오디오 끌 때 사용

 

<source src="비디오 파일의 URL"
		type="비디오의 마임 타입">

• <source> : 비디오 소스를 해당 태그를 이용하여 별도로 지정할 수 있다.

 

 

(예시)

브라우저에 따라서는 특정 타입의 비디오 파일만 인식할 수 있기 때문에, 개발자가 하나의 비디오를 여러 타입으로 만들어 두고, 브라우저가 재생 가능한 타입을 선택하도록 할 수 있다.

<video width="320" height="240" controls autoplay>
    <source src="bear.mp4" type="video/mp4">
    <source src="bear.ogg" type="video/ogg">
    브라우저가 video 태그를 지원하지 않습니다.
</video>

 

4. 오디오 삽입

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

• autoplay : 크롬이나 모바일 브라우저에서는 보안상의 이유로 <audio> 태그의 autoplay는 작동하지 않는다.

 

 

(예시)

<video> 태그에서와 마찬가지로 <source> 태그를 이용하면 브라우저가 재생 가능한 타입을 선택하게 할 수 있다.

<audio controls autoplay>
	<source src="mymusic.mp3" type="audio/mpeg">
    <source src="mymusic.ogg" type="audio/ogg">
    브라우저가 audio 태그를 지원하지 않습니다.
</audio>

 

 

5. 인라인 프레임 삽입

<iframe src="URL"
        srcdoc="출력될 내용을 직접 HTML 태그로 작성"
        name="윈도우 이름"
        witdth="프레임 폭"
        height="프레임의 높이">
iframe 태그를 다루지 않는 브라우저에 의해 대신 출력되는 텍스트
</iframe>

• srcdoc : srcdoc 속성이 있으면 src 속성은 무시된다.
• name : 다른 웹페이지에서 target 속성 값으로 사용.
• width : 디폴트 300
• height : 디폴트 150

 

(예시) 2개의 신문 사이트를 인라인 프레임에 출력

<iframe src="https://www.etnews.com/" witdth="300" height="300"> </iframe>
<iframe src="https://www.yna.co.kr/" witdth="300" height="300"> </iframe>

 

 

6. 외부 객체 삽입

<iframe>은 보안 위협이 높아 몇몇 웹에서는 iframe을 금지하고 embed, object를 권장하기도 한다. 크기를 0으로 만든 iframe 내부에 악성코드를 숨겨두기 용이하기 때문이다.

<embed width="560" height="315" 
       src="https://www.youtube.com/embed/4TojlZYqPUo"
       frameborder="0" 
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
       allowfullscreen>
</embed>