[HTML] img태그와 a링크태크표현

1. 이미지를 삽입하는<img> 태그

 

속성	값	설명
src	"이미지파일" (상대경로, 절대경로 등)   * 상대경로  - <img src="flower.jpg">  - <img src="../img/flower.jpg">  - 현재 문서를 기준으로 파일 위치를 작성  - 필수속성   * 절대경로  - <img src="http://www.naver.com/flower.jpg">	문서에 표시할 이미지 파일 지정
width	"숫자" (픽셀, %) - <img src="~" width="100"> * 단위를 지정하지 않으면 px 단위 * 기본 출력크기 = 이미지의 원래 크기 * 폭/높이 중에서 하나의 크기만 지정되면 나머지 하나는 원본 크기에 비례해서 자동으로 지정	이미지의 너비(폭) 지정
height	"숫자" (픽셀, %) - <img src="~" height="100"> * 단위를 지정하지 않으면 px 단위	이미지의 높이 지정
alt	"내용" (텍스트)  <img src="~" alt="꽃 사진입니다."> * 이미지경로가 틀렸거나 손상이 되었을때, 대체텍스트가 나오게 된다.	이미지가 표시되지 않을때 대체텍스트 지정
usemap	"#맵이름"	클라이언트 측의 이미지맵을 지정

 

* src = 이미지 파일의 이름/경로로 필수로 들어가야 하는 속성이다. 일반적인 이미지 파일 형식에는 gif, jpg(jpeg), png 등이 있다.

 

이미지 형식
GIF	JPG	PNG
- 256색상 지원  - 투명 배경 처리  - 용량이 작음  - 로고나 클립아트 형태의 이미지에 적합	- 트루컬러 지원  - 좋은 압축률 → 용량이 작음  - 사진 이미지에 적합	- 트루컬러 지원  - 투명 배경 처리  - 웹 전용 이미지 파일(빠른 화면 표시 속도)  - 적은 색상을 가진 이미지에 적합

 

---

 

2. 하이퍼링크를 삽입하는 <a> 태그

 

속성	값	설명
href	"이동할 위치"   <a href="http://nm817.tistory.com">휘두루미 티스토리</a>    * <a href="#특정 위치의 이름">내용</a>  - 같은 페이지 내에서 이동하는 경우    * <a href="페이지경로#특정 위치의 이름">내용</a>  - 다른 페이지의 특정 위치로 이동하는 경우    * <a id="이동할 특정 위치의 이름">내용</a>  - 이동할 위치를 직접지정하는 방식    * <a href=mailto:이메일주소>텍스트/이미지</a>  - 이메일 보내는 소스를 짤때 사용한다.    * <a href="javascript:자바스크립트코드">  - alert, function 등 다양한 자바스크립트 코드를 삽입할 수 있다.    * <a href="파일명">텍스트/이미지</a>  - 압축파일, 실행파일 → 다운로드  - 음악파일, 동영상파일 → 플러그인 프로그램으로 재생  - 음악파일과 동영상파일의 경우 download 속성을 사용하여 다운로드 기능을 넣을 수 있다.	링크를 통해 이동하려는 곳의 경로/주소 지정    - 기본적으로 href는 #top 속성이 있기 때문에 href="#"을 하게 되면 화면 최상단으로 이동하는 습성? 이 있다. 이런경우    <a href="#none;">내용</a> 혹은  <a href="javascript:void(0)">내용</a> 을 써주어 '링크가 정상적으로 작동하지 않게' 한다.
target	"창의 이름"    <a href="~" target="_blank"></a>  - 새로운 창(탭)에서 링크된 문서를 엶    <a href="~" target="_self"></a>  - 현재의 창(탭)에서 링크된 문서를 엶 (default)    <a href="~" target="_top"></a>  - 현재의 창이 프레임으로 구성된 경우 모든 프레임이 사라지고 하나의 화면에서 링크된 문서를 엶    <a href="~" target="_parent"></a>  - 부모 프레임에서 링크된 문서를 엶    <a href="~" target="프레임명"></a>  - 링크된 문서를 표시할 프레임의 이름을 직접 지정	링크된 내용이 표시될 창을 지정
title	"툴팁"  <a href="~" title="휘두루미의 티스토리"></a>	- 전역속성 (어떤 태그에서도 사용가능)  - 추가적인 정보를 툴팁형태로 제공
download	"파일 경로"  <a href="#none;" download="파일 경로">내용</a>	href 속성에 지정된 파일을 다운로드해서 저장  HTML5에서 추가된 속성

 

 

3. <iframe>태그와 이미지맵

 

- 현재의 웹페이지 안에 다른 웹페이지를 표시하는 창을 삽입

 

속성	값	설명
name	"이름"  <iframe src="~" name="프레임명"></iframe>	창의 이름을 지정 * a 태그에서의 "프레임명" 과 일치하면, 해당 프레임을 보여준다.
src	"url"   <iframe src="~"></iframe>	창에 표시될 문서의 url을 지정
srcdoc	"HTML코드"   <irame src="~" srcdoc="<p>내용</p>"></iframe>	창에서 보여줄 HTML 콘텐츠를 지정 * srcdoc가 지정되면 src속성에서 지정된 콘텐츠는 무시됨 * IE에서는 srcdoc을 지원하지 않기 때문에, src의 내용이 보여진다.
width, height	"픽셀"	창의 너비/높이를 지정

 

이미지맵

 

- 하나의 이미지를 여러 개의 영역으로 나누어 각 영역마다 링크를 지정하는 것

- 이미지맵의 경우 크게 img태그, map태그, area 태그를 사용한다.

ex)

<img src="URL" usemap="#맵이름">

<map name="맵이름">

<area shape="이미지맵에서 각 영역의 모양(default, rec, circle, poly)"

   coords="각 영역을 구성하는 좌표값"

   href="url"

   target="링크된 내용이 열릴 창"

   download="href로 지정된 파일을 다운로드"

   alt="대체 텍스트 내용">

....

</map>