1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <!-- 현재 작성하고 있는 파일은 UTF-8 DOS파일입니다.-->
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
  4.   <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.   </head>
  7.   <body>
  8.   <!-- 임시 이미지 URL : http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg -->
  9.     &lt;img&gt; 사용법<br />
  10.     &lt;img&gt; 사용 용도는 이미지를 도입합니다.<br />
  11.     (속성-src, width, height, alt, align, border, <br />
  12.     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  13.     vspace, hspace, longdesc, ismap, usemap, crossorigin)<br />
  14.     <hr />
  15.     <b>&lt;img&gt; : 1.속성-src : 이미지의 URL을 지정합니다.(필수)</b><br /><br />
  16.     <div id="ex_view2">
  17.       <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg" />
  18.     </div>
  19.     
  20.     <hr />
  21.     <b>&lt;img&gt; : 2.속성-width : 넓이를 지정합니다.</b><br /><br />
  22.     <div id="ex_view2">
  23.       <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg" width="200" /><br />
  24.       css 구문<br />
  25.       <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg" style="width: 100px;" />
  26.     </div>
  27.     
  28.     <hr />
  29.     <b>&lt;img&gt; : 3.속성-height : 높이를 지정합니다.</b><br /><br />
  30.     <div id="ex_view2">
  31.       <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg" width="200" height="50"/><br />
  32.       css 구문<br />
  33.       <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg" style="width:100px; height:200px;" />
  34.     </div>
  35.     
  36.     <hr />
  37.     <b>&lt;img&gt; : 4.속성-alt : 화상이 표시 될 수없는 경우에 <br />
  38.     필요 ALT 속성은 이미지에 대한 대체 텍스트를 지정합니다.</b><br /><br />
  39.     <div id="ex_view2">
  40.        원래 아래 그림처럼 나와야 하는데 설정에서 이미지 없으면 다른 그림이 나오게 해놔서;;<br />
  41.       <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/noturl.jpg" width="200" height="50" alt="텍스트이미지"/>
  42.     </div>
  43.     
  44.     <hr />
  45.     <b>&lt;img&gt; : 5.속성-align : 문서내 이미지의 정렬을 지정합니다.</b><br /><br />
  46.       HTML5에서 지원되지 않습니다.<br />
  47.       대신 CSS를 사용합니다.<br />
  48.       css 문법 : &lt;img style="float:right;"&gt;<br />
  49.     left - 왼쪽으로 이미지 정렬합니다. <br />
  50.     right - 오른쪽으로 이미지 정렬합니다. <br />
  51.     top - 맨 상단으로 이미지 정렬합니다. <br />
  52.     middle - 중간으로 이미지 정렬합니다. <br />
  53.     bottom - 바닥으로 이미지 정렬합니다. <br />
  54.     css 문법 : &lt;img style="float:right"&gt;
  55.     <div id="ex_view2">
  56.       <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg" alt="텍스트이미지" style="width:100px; height:200px; float:right;" />
  57.     </div>
  58.     
  59.     <hr style="clear:right;" />
  60.     <b>&lt;img&gt; : 6.속성-border : 이미지의 테두리의 폭을 지정합니다.</b><br /><br />
  61.     HTML5에서 지원되지 않습니다.<br />
  62.     HTML 4.01에서 더 이상 사용되지 않습니다. <br />
  63.     대신 CSS를 사용합니다.<br />
  64.     css 문법 : &lt;img style="border:5px solid black"&gt;<br />
  65.     <div id="ex_view2">
  66.       <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;" />
  67.     </div>
  68.     
  69.     <hr />
  70.     <b>&lt;img&gt; : 7.속성-vspace : 상단과 이미지의 하단에있는 공백을 지정합니다.</b><br /><br />
  71.     HTML5에서 지원되지 않습니다.<br />
  72.     HTML 4.01에서 더 이상 사용되지 않습니다. <br />
  73.     대신 CSS를 사용합니다.<br />
  74.     css 문법 : &lt;img style="margin: 50px 0px"&gt;<br />
  75.     <div id="ex_view2">
  76.       <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg" alt="텍스트이미지" style="width:100px; height:200px; margin: 50px 0px;" />
  77.     </div>
  78.     
  79.     <hr />
  80.     <b>&lt;img&gt; : 8.속성-vspace : 이미지의 왼쪽과 오른쪽에 공백을 지정합니다.</b><br /><br />
  81.     HTML5에서 지원되지 않습니다.<br />
  82.     HTML 4.01에서 더 이상 사용되지 않습니다. <br />
  83.     대신 CSS를 사용합니다.<br />
  84.     css 문법 : &lt;img style="margin: 0px 20px"&gt;<br />
  85.     <div id="ex_view2">
  86.       <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg" alt="텍스트이미지" style="width:100px; height:200px; margin: 0px 20px;" />
  87.     </div>
  88.     
  89.     <hr />
  90.     <b>&lt;img&gt; : 9.속성-longdesc : 이미지의 긴 설명이 포함 된 페이지에 URL을 지정합니다.</b><br /><br />
  91.     HTML5에서 지원되지 않습니다.<br />
  92.     이미지의 긴 설명을 페이지에 대한 링크 제공합니다. <br />
  93.     라고 되어 있는데 브라우저에서 지원을 안해주는 기능입니다.<br />
  94.     
  95.     <hr />
  96.     <b>&lt;img&gt; : 10.속성-ismap : 서버 측 이미지 맵의 일부임을 지정합니다. <br />
  97.     (이미지 맵을 클릭 할 수있는 영역이있는 이미지입니다) </b><br />
  98.     서버 측 이미지 맵을 클릭하면, 클릭 좌표는 URL의 쿼리 문자열로 서버에 전송됩니다. <br />
  99.     ISMAP 특성의 <img> 요소가 유효한 href 속성을 가진 <br />
  100.     &lt;a&gt; 요소의 자손 인 경우에만 허용됩니다. <br /><br />
  101.     <div id="ex_view2">
  102.     <a href="http://roydest.tistory.com/" target="_blank">
  103.     <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg" /ismap style="width:200px; height:50px;" alt="텍스트이미지"/></a><br />
  104.     </div>
  105.     
  106.     <hr />
  107.     <b>&lt;img&gt; : 11.속성-usemap  : 클라이언트 측 이미지 맵의 일부임을 지정합니다. <br />
  108.     (이미지 맵을 클릭 할 수있는 영역이있는 이미지입니다) </b><br />
  109.     &lt;MAP&gt; 요소의 이름이나 id 속성과 연관하여 <br />
  110.     &lt;img&gt;과 &lt;MAP&gt; 사이의 관계를 생성합니다. <br />
  111.     ISMAP 특성의 <img> 요소가 유효한 href 속성을 가진 <br />
  112.     &lt;a&gt; 또는 &lt;button&gt;요소의 자손 인 경우에만 허용됩니다. <br /><br />
  113.     <div id="ex_view2">
  114.     <img src="http://ts.daumcdn.net/custom/blog/162/1629303/skin/images/ex_img.jpg" usemap="#testmap" style="width:200px; height:50px;" alt="텍스트이미지"/>
  115.     <!-- map -> 이미지 맵을 클릭 할 수있는 영역이있는 이미지입니다.
  116.     name 속성은 <img>와의의 usemap 속성과 연관 이미지와지도 사이의 관계를 생성합니다.
  117.     이미지 맵의 클릭 가능한 영역을 정의 <area> 다수의 요소가 포함되어 있습니다.-->
  118.     <map name="testmap">
  119.     <!-- 이미지 맵 내부의 영역을 정의합니다.  
  120.     (이미지 맵을 클릭 할 수있는 영역이있는 이미지입니다.)
  121.     <area> 요소는 항상 <map> 태그 내에 중첩됩니다. 
  122.     <img> 태그 usemap 속성은 <MAP> 요소의 이름 속성과 
  123.     연관 이미지와지도 사이의 관계를 생성한다.
  124.     속성은 <a>태그에 포함 되어 있으며, alt속성은 <img> 태그와 같습니다.-->
  125.    
  126.     <!-- 사각형 - 시작 x y 좌표 끝 x y 좌표 -->
  127.         <area shape="rect" coords="0,0,61,20" href="http://roydest.tistory.com/229" target="_blank" alt="rect" />
  128.     <!-- 원 - 원의 중심  x y 좌표 반지름 -->
  129.         <area shape="circle" coords="147,18,20" href="http://roydest.tistory.com/230" target="_blank" alt="circle" />
  130.         <!-- 다각형 - 다각형의 꼭지점 x y 좌표들(x y 2쌍의 숫자) -->
  131.         <area shape="poly" coords="10,43,6,49,77,30,143,39,48,45" href="http://roydest.tistory.com/231" target="_blank" alt="poly">
  132.       </map>
  133.       <br />
  134.     </div>
  135.     
  136.     <hr />
  137.     <b>&lt;img&gt; : 12.속성-crossorigin : 출처 간 액세스는 <br />
  138.     캔버스와 사용할 수 있도록 타사 사이트에서 이미지를 허용합니다.</b><br /><br />
  139.     HTML5에서 새로 생성된 속성입니다.<br />
  140.     현재 파일이 XHTML이라 생략합니다.<br />
  141.   </body>
  142. </html>

--------------------------------------------------------------------------------------------

위 소스 예제 보기


<img></img>

<map></map>

<area><area>


<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 지원합니다.


출처&인용 : http://www.w3schools.com/tags/tag_img.asp

출처&인용 : http://www.w3schools.com/tags/tag_map.asp

출처&인용 : http://www.w3schools.com/tags/tag_area.asp

:
BLOG main image

공지사항

카테고리

분류 (356)
main (1)
php5 (218)
HTML (36)
javascript (93)
IT 이론과 퍼온정보 (8)
깨작일상 (0)
곧 추가할 내용 (0)
추후 알아볼것들... (0)

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

달력

«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Total :
Today : Yesterday :