- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!-- 현재 작성하고 있는 파일은 UTF-8 DOS파일입니다.-->
- <html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- </head>
- <body>
- <!-- 임시 이미지 URL : http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg -->
- <img> 사용법<br />
- <img> 사용 용도는 이미지를 도입합니다.<br />
- (속성-src, width, height, alt, align, border, <br />
-
- vspace, hspace, longdesc, ismap, usemap, crossorigin)<br />
- <hr />
- <b><img> : 1.속성-src : 이미지의 URL을 지정합니다.(필수)</b><br /><br />
- <div id="ex_view2">
- <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg" />
- </div>
- <hr />
- <b><img> : 2.속성-width : 넓이를 지정합니다.</b><br /><br />
- <div id="ex_view2">
- <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg" width="200" /><br />
- css 구문<br />
- <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg" style="width: 100px;" />
- </div>
- <hr />
- <b><img> : 3.속성-height : 높이를 지정합니다.</b><br /><br />
- <div id="ex_view2">
- <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg" width="200" height="50"/><br />
- css 구문<br />
- <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg" style="width:100px; height:200px;" />
- </div>
- <hr />
- <b><img> : 4.속성-alt : 화상이 표시 될 수없는 경우에 <br />
- 필요 ALT 속성은 이미지에 대한 대체 텍스트를 지정합니다.</b><br /><br />
- <div id="ex_view2">
- 원래 아래 그림처럼 나와야 하는데 설정에서 이미지 없으면 다른 그림이 나오게 해놔서;;<br />
- <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/noturl.jpg" width="200" height="50" alt="텍스트이미지"/>
- </div>
- <hr />
- <b><img> : 5.속성-align : 문서내 이미지의 정렬을 지정합니다.</b><br /><br />
- HTML5에서 지원되지 않습니다.<br />
- 대신 CSS를 사용합니다.<br />
- css 문법 : <img style="float:right;"><br />
- left - 왼쪽으로 이미지 정렬합니다. <br />
- right - 오른쪽으로 이미지 정렬합니다. <br />
- top - 맨 상단으로 이미지 정렬합니다. <br />
- middle - 중간으로 이미지 정렬합니다. <br />
- bottom - 바닥으로 이미지 정렬합니다. <br />
- css 문법 : <img style="float:right">
- <div id="ex_view2">
- <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg" alt="텍스트이미지" style="width:100px; height:200px; float:right;" />
- </div>
- <hr style="clear:right;" />
- <b><img> : 6.속성-border : 이미지의 테두리의 폭을 지정합니다.</b><br /><br />
- HTML5에서 지원되지 않습니다.<br />
- HTML 4.01에서 더 이상 사용되지 않습니다. <br />
- 대신 CSS를 사용합니다.<br />
- css 문법 : <img style="border:5px solid black"><br />
- <div id="ex_view2">
- <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg" alt="텍스트이미지" style="width:100px; height:200px; border:5px solid black;" />
- </div>
- <hr />
- <b><img> : 7.속성-vspace : 상단과 이미지의 하단에있는 공백을 지정합니다.</b><br /><br />
- HTML5에서 지원되지 않습니다.<br />
- HTML 4.01에서 더 이상 사용되지 않습니다. <br />
- 대신 CSS를 사용합니다.<br />
- css 문법 : <img style="margin: 50px 0px"><br />
- <div id="ex_view2">
- <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg" alt="텍스트이미지" style="width:100px; height:200px; margin: 50px 0px;" />
- </div>
- <hr />
- <b><img> : 8.속성-vspace : 이미지의 왼쪽과 오른쪽에 공백을 지정합니다.</b><br /><br />
- HTML5에서 지원되지 않습니다.<br />
- HTML 4.01에서 더 이상 사용되지 않습니다. <br />
- 대신 CSS를 사용합니다.<br />
- css 문법 : <img style="margin: 0px 20px"><br />
- <div id="ex_view2">
- <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg" alt="텍스트이미지" style="width:100px; height:200px; margin: 0px 20px;" />
- </div>
- <hr />
- <b><img> : 9.속성-longdesc : 이미지의 긴 설명이 포함 된 페이지에 URL을 지정합니다.</b><br /><br />
- HTML5에서 지원되지 않습니다.<br />
- 이미지의 긴 설명을 페이지에 대한 링크 제공합니다. <br />
- 라고 되어 있는데 브라우저에서 지원을 안해주는 기능입니다.<br />
- <hr />
- <b><img> : 10.속성-ismap : 서버 측 이미지 맵의 일부임을 지정합니다. <br />
- (이미지 맵을 클릭 할 수있는 영역이있는 이미지입니다) </b><br />
- 서버 측 이미지 맵을 클릭하면, 클릭 좌표는 URL의 쿼리 문자열로 서버에 전송됩니다. <br />
- ISMAP 특성의 <img> 요소가 유효한 href 속성을 가진 <br />
- <a> 요소의 자손 인 경우에만 허용됩니다. <br /><br />
- <div id="ex_view2">
- <a href="http://roydest.tistory.com/" target="_blank">
- <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg" /ismap style="width:200px; height:50px;" alt="텍스트이미지"/></a><br />
- </div>
- <hr />
- <b><img> : 11.속성-usemap : 클라이언트 측 이미지 맵의 일부임을 지정합니다. <br />
- (이미지 맵을 클릭 할 수있는 영역이있는 이미지입니다) </b><br />
- <MAP> 요소의 이름이나 id 속성과 연관하여 <br />
- <img>과 <MAP> 사이의 관계를 생성합니다. <br />
- ISMAP 특성의 <img> 요소가 유효한 href 속성을 가진 <br />
- <a> 또는 <button>요소의 자손 인 경우에만 허용됩니다. <br /><br />
- <div id="ex_view2">
- <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg" usemap="#testmap" style="width:200px; height:50px;" alt="텍스트이미지"/>
- <!-- map -> 이미지 맵을 클릭 할 수있는 영역이있는 이미지입니다.
- name 속성은 <img>와의의 usemap 속성과 연관 이미지와지도 사이의 관계를 생성합니다.
- 이미지 맵의 클릭 가능한 영역을 정의 <area> 다수의 요소가 포함되어 있습니다.-->
- <map name="testmap">
- <!-- 이미지 맵 내부의 영역을 정의합니다.
- (이미지 맵을 클릭 할 수있는 영역이있는 이미지입니다.)
- <area> 요소는 항상 <map> 태그 내에 중첩됩니다.
- <img> 태그 usemap 속성은 <MAP> 요소의 이름 속성과
- 연관 이미지와지도 사이의 관계를 생성한다.
- 속성은 <a>태그에 포함 되어 있으며, alt속성은 <img> 태그와 같습니다.-->
- <!-- 사각형 - 시작 x y 좌표 끝 x y 좌표 -->
- <area shape="rect" coords="0,0,61,20" href="http://roydest.tistory.com/229" target="_blank" alt="rect" />
- <!-- 원 - 원의 중심 x y 좌표 반지름 -->
- <area shape="circle" coords="147,18,20" href="http://roydest.tistory.com/230" target="_blank" alt="circle" />
- <!-- 다각형 - 다각형의 꼭지점 x y 좌표들(x y 2쌍의 숫자) -->
- <area shape="poly" coords="10,43,6,49,77,30,143,39,48,45" href="http://roydest.tistory.com/231" target="_blank" alt="poly">
- </map>
- <br />
- </div>
- <hr />
- <b><img> : 12.속성-crossorigin : 출처 간 액세스는 <br />
- 캔버스와 사용할 수 있도록 타사 사이트에서 이미지를 허용합니다.</b><br /><br />
- HTML5에서 새로 생성된 속성입니다.<br />
- 현재 파일이 XHTML이라 생략합니다.<br />
- </body>
- </html>
--------------------------------------------------------------------------------------------
위 소스 예제 보기
<img> 이미지를 도입합니다.
<img> src, width, height, alt, align, border, vspace, hspace, longdesc, ismap, usemap
속성과 설명은 소스에 있습니다.
crossorigin를 제외한 나머지는 소스에 있습니다.
<map> 이미지 맵을 클릭 할 수있는 영역이있는 이미지입니다.
<map> name 속성과 설명은 소스에 있습니다.
<area> 목록 모양 출력합니다.
<area> alt, coords, download, href, hreflang, media, nohref, rel, shape, target, type
속성과 설명은 <a>태그에 포함되어 있는 속성과 같으며, alt 속성은 <img>태그와 같습니다.
Global Attributes 지원합니다.
Global Event Attributes 지원합니다.
'HTML > xhtml문법' 카테고리의 다른 글
<table>-<tr></tr> 테이블 행 (0) | 2014.01.21 |
---|---|
<table></table> 테이블 만들기 (0) | 2014.01.21 |
<a></a> 링크 연결 페이지 (0) | 2014.01.20 |
<ul></ul>-<li></li> 목록 모양 스타일 - 목록 모양 (0) | 2014.01.20 |
<ol></ol>-<li></li> 목록 번호 스타일 - 목록 번호 (0) | 2014.01.20 |