이미지를 문서에 추가하기 위해 사용하는 태그이다. 추가되는 이미지는 보통 .jpg나 .gif의 형식의 파일이며 문자열과 함께 웹 페이지를 구성하는 아주 중요한 컨텐츠이다. 다음과 같은 속성을 사용할 수 있다
속성
|
속성명 |
설명 |
|
src |
추가될 이미지가 위치할 경로(상대경로,절대경로 가능) |
|
width |
이미지의 너비 |
|
height |
이미지의 높이 |
|
alt |
이미지가 보여지지 않을 때 대신 보여질 문자열을 지정하는 속성으로 이미지 위에 마우스 포인터를 올려 놓을 때 나타나는 풍선도움말이 이 속성으로 표현되는 것이다. |
우선 “WebContent” 이미지만 보관할 “images”폴더를 작성하고 이미지를 복사한다
다음과 같은 소스코드를 추가하고 실행한다
|
종류 |
설명 |
|
절대경로 |
ip까지 다 명시하는 방법으로 생략 가능하므로 거의 사용하지 않는다. http://127.0.0.1:8088/clientweb/images/jang1.jpg /clientweb/images/jang1.jpg |
|
상대경로 |
현재 작성 중인 문서의 위치를 기준으로 경로를 정의한다.
1)현재 문서와 같은 위치에 이미지 파일이 있는 경우 현실 불가능. 실제로는 웹 페이지에 사용되는 이미지 많고 문서와 이미지를 분리해서 사용하기 위해 이미지만 보관할 폴더를 따로 작성하고 사용한다. <img src=”jang1.jpg”/>
2) .은 현재 디렉토리를 의미 <img src=”./img/jang1.jpg”/> 현재 문서의 위치 아래서 img폴더를 찾고 이미지 파일을 찾는다.
3) ..은 상위 디렉토리를 의미 <img src=”../image/jang1.jpg”/> 현재 문서의 위치에서 한 단계 위인 상위 폴더로 올라가서 images폴더를 찾고 이미지 파일을 찾는다. |