1. 이미지 삽입(img)

1)<img> 태그와 속성을 활용할 수 있다.

속성

  • src = “이미지 파일” -> 문서에 표시할 이미지 파일을 지정
  • width = “숫자” -> 이미지의 폭 지정 (픽셀, %)
  • height = height = “숫자” -> 이미지의 높이 지정 (픽셀, %)
  • alt = “내용” -> 이미지가 표시되지 않을 때 대체될 텍스트 지정
  • usemap = “#맵이름” -> 클라이언트 측의 이미지맵 지정

2) <img> src 속성

  • HTML문서에 표시할 이미지 파일의 이름/경로 지정 (필수속성)
 
<!-- (1) HTML 문서와 같은 폴더에 있는 경우 -->
<img src="flower.jpg"> 

<!-- (2) 절대 경로의 경우 -->
<img src="C:\html\img\flower.jpg">

<!-- (3) 상대 경로 (현재 위치가 C:\htmlEx인 경우)
<img src="img\flower.jpg">

일반적인 이미지 파일 형식

  • GIF(Graphics Interchange Format) : 256색상 지원 , 투명 배경 처리 , 용량이 작음, 로고나 클립아트, 형태의 이미지에 적합
  • JPG(Joint Photographic coding Experts Groups) : 트루컬러 지원 , 좋은 압축률 -> 용량이 작음 , 사진 이미지에 적합
  • PNG(Portable Network Graphics) : 트루컬러 지원 , 투명 배경 처리 , 웹 전용 이미지 파일(빠른화면 표시 속도), 클립하트와 같이 적은 색상을 가진 이미지에 적합

2. 하이퍼링크 삽입(a)

하이퍼링크를 지정하는 <a> 태그 를 다양한 방법으로 활용할 수 있다.

1) 속성

(1)href : URL ->링크를 통해 이동하려는 곳의 경로/주소 지정

<a href="이동할 위치"> 링크를 걸어 줄 내용물(텍스트, 이미지)</a>

 
<body>
<a href="http://www.naver.com">네이버</a>
<br/><br/>

<a href="http://www.naver.com" title="네이버 입니다."> 
    <img src="knou-logo.gif">
</a>

<a href="http://www.naver.com"> 
    여기를 클릭하세요 <img src="naver-logo.gif">
</a>

<br/><br/>

원래 크기로 그림을 보려면 여기를 
<a href="flower.jpg">

<img src="flower.jpg" width="50"></a> 클릭! </body>

(2)target : 창이름 -> 링크된 내용이 표시될 창을 지정

_blank -> 새로운 창(탭)에서 링크된 문서를 엶
_self -> (기본값). 현재의 창(탭)에서 링크된 문서를 엶
_top -> 현재의 창이 프레임으로 구성된 경우 모든 프레임이 사라지고 하나의 화면에서 엶
_parent -> 부모 프레임에서 링크된 문서를 엶
프레임명 -> 링크된 문서를 표시할 프레임의 이름을 직접 지정

(3) download -> href 속성에 의해 지정된 파일을 직접 다운로드

<body>
꽃 그림을 다운로드 받으려면~
<a href="flower.jpg" download>
<img src="flower.jpg" width="100" >
</a> 클릭!
<br/><br/>
<a> </a>
</body>

2) 특정 위치로의 이동 -> id 속성 사용

3) 이메일 링크, 자바스크립트 링크, 파일 링크

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

1) <iframe> -> 현재 페이지 안에 창을 삽입

  • 속성 -> name, src, srcdoc, width, height 2) 이미지맵 -> 하나의 이미지에 여러 링크 영역을 지정
  • <img> 태그의 usemap 속성, <map> , <area>