1031_html (이미지태그, 하이퍼링크)

<이미지 파일> 

 

1) 상대 경로 : 현재 파일의 위치를 기준으로 경로 표시 

 

 

- 현재 자신과 같은 폴더에 있을 때: 이미지 파일명만 기재

<img src = "head.png" alt="도옥수리" />

 

-하위 폴더에 있을 때 : 하위폴더명\ + 이미지 파일명

<img src = "images\head.png" alt="도옥수리" />

 

-상위 폴더에 있을 때 : ..\ + 이미지 파일명

ex) ..\..\이미지.png 상위의 상위폴더

<img src = "..\head.png" alt="도옥수리" />

 

 

 

2) 절대 경로 : 이미지 위치 경로 \ 파일명

ex) C:\work\htmlcssworkspace\head.png

<img src="C:\work\htmlcssworkspace\head.png" />

 

 

3) URL 사용하기

<img src = "https://i.ytimg.com/vi/8Isn2iFtR0A/hqdefault.jpg" />

 

 

<이미지 사이즈 설정>

<img src = "head.png" height ="150" width="150" alt="도옥수리" />

 

<하이퍼링크>

 

<a>

<a href = "파일위치(상대, 절대),url" 화면에 나타나는 부분 </a>

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

 

<target> 속성

_self

기본값, 생략가능

현재 열려있는 창에 띄움

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

 

_black

새로운 창에 띄움

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

 

 

- 이미지에 링크걸기

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

 

 

 

<한페이지 내에서 문서이동>

<a href="#content1" >한줄평</a>
<a href="#content2" >반품환불</a>
<a href="#content3" >도서정보</a>

<a id="content1">한줄평 위치</a>
<a id="content2">반품환불 위치</a>
<a id="content3">도서정보 위치</a>

 

 

 

<최상단 이동>

#top은 target이 따로 필요없다

<a href ="#top"><h1>맨위로</h1></a>