231102 WEB - HTML2 참조 및 하이퍼링크

KDT/WEB

231102 WEB - HTML2 참조 및 하이퍼링크

001cloudid 2023. 11. 2. 10:32

728x90

절대참조(프로젝트를 기준) 이미지 찾기

이미지 파일을 절대 참조로 찾고자 한다면,

<img src="프로젝트/폴더/내부폴더1/내부폴더2/.../찾고자하는이미지>로 하면 된다.

webProject/src/main/webapp/Html1 안의 1.jpg 이미지 파일을 찾고자 한다.

그렇다면 <img src="/webProject/Html1/ 1.jpg"> 이렇게 작성하면 된다.

※<img src="/webProject/src/main/webapp/Html1/1.jpg"> 이렇게 작성하지 않는 이유는 Dynamic Web Project 생성 시 Content directory로 세팅되어 "src/main/webapp"이 기본적으로 세팅되어 있기 때문이다.

<http://localhost:8080/webProject/Html1/1jpg

/프로젝트/폴더1/폴더2/.../이미지.이미지형식

<img src="/webProject/src/main/webapp/Html1/1.jpg" alt="경로가 잘못됨">


<img src="/webProject/Html1/1.jpg">
<img src="/webProject/Html1/2.jpg">
<img src="/webProject/Html1/img/3.jpg">
<img src="/webProject/Html1/img/4.jpg">
<img src="/webProject/imgs/5.jpg">
<img src="/webProject/imgs/6.jpg">
<img src="/webProject/imgs/img/7.jpg">
<img src="/webProject/imgs/img/8.jpg">

*다양한 멀티미디어 파일 삽입

다양한 멀티미디어 파일(오디오, 비디오, 자바 애플릿, PDF 등)을 삽입할 때는 <object>태그를 사용함.

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

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

오디오, 비디오, 이미지 등 다양한 멀티미디어를 삽입할 수 있는 태그는 <embed>이다.

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

src 속성을 사용해 삽입할 멀티미디어 파일을 지정하고, width, height 속성을 사용해 플레이어의 크기를 지정함.

<audio>, <video>, <object> 태그를 지원하지 않는 웹 브라우저를 고려해야 하면 <embed>태그를 사용하여 멀티미디어 파일을 삽입함.

PDF 파일 삽입

<object width="900" height="800" data="medias/product.pdf"></object>

오디오, 비디오, 이미지 멀티미디어 파일 삽입

<embed src="medias/spring.mp3">-

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

<video src="medias/salad.mp4" controls width="700"></video>
<video src="medias/flower.mp4" controls width="640" muted autoplay loop></video>

※멀티미디어 파일의 종류
비디오 : mp4(모든 브라우저에서 동작), webm
오디오 : mp3(모든 브라우저에서 동작), mp4, m4a

*하이퍼링크 삽입하기

하이퍼링크는 다양한 파일 형식을 넣을 수 있음.

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

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

<a href="https://www.naver.com">네이버</a> 
<a href="test1.html">test1</a> 
<a href="ex1.html">ex1</a> 
<a href="../imgs/img/7.jpg">7.jpg</a> 
<a href="medias/product.pdf">product.pdf</a>

하이퍼링크 새로운 창에서 연결하기

target="_blank"를 a태그에 넣어주면 된다.
<a href="
https://www.naver.com" target="_blank">네이버</a> 
<a href="test1.html"target="_blank">test1</a> 
<a href="ex1.html"target="_blank">ex1</a> 
<a href="../imgs/img/7.jpg"target="_blank">7.jpg</a> 
<a href="medias/product.pdf" target="_blank">product.pdf</a>

이미지에 하이퍼링크 삽입하기

a태그+img태그
<a href="test2.html" target="_blank"><img src="1.jpg"></a> 
<a href="test3.html" target="_blank"><img src="img/3.jpg"></a>

하이퍼링크에 걸린 파일을 다운로드하기

a태그 href="파일명" download" 
<a href="../imgs/5.jpg" download>5.jpg</a> 
<a href="medias/product.pdf" download>product.pdf</a>

<ol>
<li><a href="ex2.html">ex2.html 연결</a></li>
<li><a href="ex3.html" target="_blank">ex3.html 새창으로 연결</a></li>
<li><a href="2.jpg" download>2.jpg 다운로드</a></li>
</ol>

<dt>
<dd><a href="ex2.html">ex2.html 연결</a></dd>
<dd><a href="ex3.html" target="_blank">ex3.html 새창으로 연결</a></dd>
<dd><a href="2.jpg" download>2.jpg 다운로드</a></dd>

문서 내 하이퍼링크

문서 내에 특정 위치를 찾아가는 하이퍼링크 페이지 안에 페이지 찾기

<ul>
<li><a href="#m1">메뉴1(href="#1")</a></li>
<li><a href="#m2">메뉴2(href="#2")</a></li>
<li><a href="#m3">메뉴3(href="#3")</a></li>
</ul>

 
 
 
 
 
<h2 id="m1">메뉴 1</h2>
id='m1'표시 
<a href="#top">맨 위로</a>
 
 
 
 
 
<h2 id="m2">메뉴2</h2>
id='m2'표시 
<a href="#top">맨 위로</a>
 
 
 
 
 
<h2 id="m3">메뉴3</h2>
id='m3'표시 
<a href="#top">맨 위로</a>

728x90

'KDT > WEB' 카테고리의 다른 글

231107 WEB - HTML4(input 속성), CSS1(CSS란?) (0)	2023.11.07
231103 WEB - HTML3 폼 태그 (0)	2023.11.03
231031 WEB - HTML 1 태그 (0)	2023.10.31
231027 WEB - JSP (0)	2023.10.31
231025 WEB - WEB 표준 (0)	2023.10.30

현재글231102 WEB - HTML2 참조 및 하이퍼링크

001cloudid