[HTML5] 7. <a> 태그와 하이퍼링크 + 하이퍼링크 텍스트의 색 + 링크와 target 속성 + id 속성과 앵커 + 파일 다운로드 링크 + 미디어 삽입과 <audio>, <video> 태그

7. <a> 태그와 하이퍼링크 + 하이퍼링크 텍스트의 색 + 링크와 target  속성 + id 속성과 앵커 + 파일 다운로드 링크 + 미디어 삽입과 <audio>, <video> 태그

 

 

 

 

 

# 하이퍼링크와 <a> 태그

- 하이퍼링크

: 다른 HTML 페이지와의 연결 고리로, 이미지나 텍스트로 작성한다. 같은 웹 사이트 안의 페이지(상대 경로)는 물론 다른 웹 사이트 안의 HTML 페이지에 모두 연결이 가능하다.

 

- 항해

: 하이퍼링크를 따라 다른 웹 페이지를 방문하는 것

 

 

- href : 이동할 HTML 페이지의 URL 혹은 HTML 페이지 내 앵커의 이름

- target : 링크에 연결된 HTML 페이지가 출력될 윈도우 이름 지정

 

 

 

 

# <a> 태그의 href 속성에 하이퍼링크 작성

 

- 같은 웹사이트 안에 있는 웹페이지 연결 (텍스트 작성)

<a href="picturepage.html"> 클릭하면 사진 페이지로 이동합니다. </a>

 

- 다른 웹 사이트의 웹 페이지 연결 (텍스트 작성)

<a href="http://www.naver.com"> 네이버 </a>

<a href="http://www.siter.com/login.html"> 사이트 로그인 </a>

 

- 이미지 하이퍼링크 만들기 (이미지 작성)

<a href="http://www.naver.com">

    <img src="naver.png" alt="네이버 사이트">

</a>

 

 

 

 

# 하이퍼링크 텍스트의 색

- 링크 텍스트(standard link) 처음 색 : 밑줄과 함께 blue

- 방문 후 링크 색(visited link) : purple

- 마우스로 링크를 누르고 있는 동안 (active link) : red

 

+ 링크의 색은 CSS3를 사용하여 임의로 지정할 수 있다.

 

 

 

 

 

 

# 링크와 target 속성 활용

- _blank : 새 탭에서 열기

- _self : 현재 탭에서 열기(디폴트 값임)

 

 

 

 

 

# <a> 태그의 id 속성으로 앵커 생성

- 앵커

: HTML 페이지 내의 특정 위치로, <a id="앵커이름"> 의 형식으로 생성한다.

 

+ #은 같은 문서 안에서의 이동을 제어할때 사용

 

<a id="chap1"> 1장 서론 </a>

...

...

...

<a href="#chap1"> 서론으로 가기 </a>

 

 

 

 

 

 

 

# 파일 다운로드 링크 생성

- download 속성을 넣으면 download 앞에 위치한 파일을 다운로드할 수 있으며, 링크를 클릭하면 바로 다운로드가 진행된다.

 

 

 

 

# 미디어 삽입

- HTML5 웹 페이지에서의 미디어 삽입의 표준화 : <audio>, <video> 태그

-> 위의 두 태그는 HTML5에서 비디오 및 오디오를 삽입하는 표준 태그로, 플러그인이 필요없다.

마찬가지로, HTML5 표준 브라우저는 플러그인 없이 오디오 및 비디오의 재생이 가능하다.

 

 

- 기타 비표준 미디어 : 플래시

                                   -> <embed>, <object> 태그를 사용한다.

 

 

 

# <video> 태그

ex) 320x320 공간에 bear.mp4 재생. 자동시작. 제어버튼 출력

<vidio src="bear.mp4" width="320" height="240" controls autoplay></video>

 

 

+ 비디오 소스 별도 지정법

<video width="320" height="240" controls autoplay>

              <source src="bear.mp4" type="video/mp4">

               브라우저가 vidio 태그를 지원하지 않습니다.

</video>

 

 

- width, height : 비디오가 재생될 브라우저 공간의 폭, 높이 지정. 생략 시 비디오의 원본 크기로 설정됨

- controls : 재생 중단, 음소거, 재생 시간, 재생 등의 제어 버튼 출력

- loop : 반복 재생

- muted : 오디오 끌 때 사용

- autoplay : 속성 설정 True 일 시 비디오가 로딩되는 즉시 재생 시작

-type : 비디오의 마임 타입

 

 

+ 비디오의 마임 타입

 

 

 

 

 

 

 

# <audio> 태그

ex) mymusic.mp3 를 자동으로 재생 시작하고 제어 버튼 출력

<audio src="mymusic.mp3" controls autoplay loop></audio>

 

+ 선택 재생도 가능 (mymusic.mp3 를 재생할 수 없으면 mymusic.ogg 선택)

<audio controls autoplay>

    <source src="mymusic.mp3" type="audio/mpeg">

    <source src="mymusic.ogg" type="audio/ogg">

    브라우저가 audio 태그를 지원하지 않습니다.

</audio>

 

 

+ 태그의 추가 속성과 오디오의 마임 타입은 앞의 <video> 태그와 동일하다.