[HTML5] 하이퍼링크 | 앵커 | 파일 다운로드 | 미디어 삽입

하이퍼링크 만들기

<a> : a태그를 사용해서 웹페이지의 링크, 혹은 다른 jsp, html 파일의 링크를 걸어둘 수 있다.

<a href = "https://gomtaetae.tistory.com/">내블로그 입니다</a>
<a href = "puddle.jsp>푸들의 페이지입니다</a>

1번째 줄은 내 블로그로 가는 링크를 걸어둔 것이고

2번째는 내가 만든 jsp 파일 중에 다른 jsp 페이지로 이동하는 링크이다.

 

404페이지 오류

페이지가 존재하지 않는다는 오류이다.

 

 

앵커 만들기

HTML5에서는 id속성에 앵커 이름을 지정하면 태그에 상관없이 그 위치에 앵커가 만들어진다.

앵커는 장문에 글에서 내가 원하는 부분에 앵커를 걸어두게 되면 그쪽 위치로 이동하게 된다.

장문의 글을 준비하기는 힘들어서 간단한 예제(?)를 준비했다..

<ul>
    <li><a href="#나">나</a></li>
    <li><a href="#다">다</a></li>
    <li><a href="#라">라</a></li>
    <li><a href="#마">마</a></li>
    <li><a href="#바">바</a></li>
</ul>
 
 
가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>
가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>
가<br/>가<br/>가<br/>가<br/>가<br/><p id = "나">나</p><br/>가<br/>가<br/>가<br/>가<br/>가<br/>
가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/><p id = "다">다</p><br/>가<br/>가<br/>
가<br/>가<br/>가<br/>가<br/>가<br/>가<br/><p id = "라">라</p><br/>가<br/>가<br/>가<br/>가<br/>가<br/>
가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>
가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/>가<br/><p id = "마">마</p><br/>
가<br/>가<br/>가<br/>가<br/>가<br/>가<br/><p id = "바">바</p><br/>가<br/>가<br/>

 

파일의 다운로드 링크

내가 생성한 jsp, html 파일이나 이전에 올려두었던 이미지 파일을 이용해서 다운로드 링크를 만드는 것이다.

href를 적고 제일 뒤에 download만 적어주면 된다.

<ul>
    <li><a href="image/pudle.png" download>푸들사진 다운로드</a></li>
    <li><a href="image/bi.png" download>비글사진 다운로드</a></li>
    <li><a href="image/marti.png" download>말티즈 사진 다운로드</a></li>
    <li><a href="dog/puddle.jsp" download>푸들페이지 다운로드</a></li>
</ul>

 

<iframe>과 target 속성

iframe 태그는 웹브라우저 창에 다른 프레임 창을 만들어 프레임 창에 그 링크가 출력하게 하는 방식이다.

iframe은 body 태그에서만 사용된다.

src에는 출력할 웹페이지의 url 주소를 적고

srcdoc에는 직접 html 태그를 작성 후 해당 html의 내용을 출력한다.

src 속성이 생략되면 프레임 영역이 만들어지기는 하지만 빈 공간으로 존재한다.

src와 srcdoc를 한 iframe에 둘 다 작성하게 되면 src는 출력되지 않고 srcdoc만 출력된다.

 

target은 <base>, <a>, <area>, <form> 태그에서 html 페이지를 출력할 윈도우를 지정하는데 사용된다.

_blank : 새로운 브라우저 윈도우 생성

_self : 현재 윈도우

_parent : 부모 윈도우

_top : 최상위 브라우저 윈도우

---

미디어의 삽입

<audio>, <video>

<audio> 태그는 오디오를 삽입할 때 쓰이는 태그이고

<video> 태그는 비디오를 삽입할 때 쓰이는 태그이다.

<video>, <audio> 태그에 controls autoplay 속성을 삽입하게 되면 비디오 재생 컨트롤러가 생기게 된다.

video에 controls autoplay를 삽입하지 않으면 그냥 자동재생이 되고

audio에 controls autoplay를 삽입하지 않으면 기본 배경음처럼 노래가 흘러나온다. 

뒤에 loop라는 속성을 추가하면 반복 재생이 된다.

<video src = "video/disneyTour.mp4" width = "320" height = "240" controls autoplay>디지니랜드 가고싶다</video>
<audio src="audio/sound.mp3" controls autoplay>행복의 나라 유니버셜시티</audio>