[Html] 이미지링크 / 썸네일 이미지 / 이메일링크 / # 최상단 이동 / id

 

 

 

< 링크걸린 이미지 >

 

 

- 웹브라우저에 보여지는 텍스트 위치에 사진을 삽입하면 됨

 

<a href="http://www.daum.net/" title="daum으로 이동" target="_blank"> 
	<img src="img/daum_logo.png" width="230">
</a>

 

 

- title 속성 (tool-tip)

  · 추가로 필요한 설명을 작성

  · 마우스 On 됐을 때 표시됨

 

- target 속성

  · 링크 열어주는 방식 지정

  · "_self" :  현재 위치에서 열림 기본으로 설정되어있으므로 생략함

  · "_blank" : 링크 클릭시 새창으로 열림

  · "_top" : 프레임구조에서 전체 열기 (옛날에 쓴방식)

  · "_parent" : 상위에 열기 (옛날에 쓴방식)

 

 

- 링크의 썸네일 이미지 

  · 작은 이미지로 미리 보여주고 링크 클릭시 크게 or 원본으로 보기

 

<a href="img/cafe.jpg" target="_blank"> <!-- 원본이미지 -->
 <img src="img/cafe.jpg" width="150"> <!-- 썸네일 이미지 -->
</a>

 

 

 

 

 

< 이메일 링크 >

 

- 클릭하면 이메일 프로그램을 실행

 

<a href="mailto:받는사람 이메일 주소">이메일링크</a>

<a href="mailto:class@gmail.com">class@gmail.com</a>

<a href="mailto:class@gmail.com">
       <img src="mail01.png" alt="이메일" width="30"> </a>

 

- 웹에 보여지는 텍스트 말고 이미지, 메일주소로도 변경 가능

 

 

 

< # >

 

- 페이지 최상단으로 이동

 

<a href="#">top</a>

 

 

 

< id >

 

- 차별화하여 주소처럼 사용하기 위한 기능

- 소스상에서 구별함

- 같은 페이지내에서 중복되면 안된다

- 링크로 호출할때는 #id 명으로 호출 ! → id 있는 위치로 감

- id 위치는 원하는 곳으로

 

 

 

<nav>
	<a href=" #ph01">Photo-01</a>
</nav>


<h2 id="ph01">Photo-01</h2>
<img src="img/butterfly.jpg" height="800">