[HTML 기초 강좌] 6. img 태그

1. img 태그

웹 페이지에 이미지를 불러와 출력하는 태그입니다.

 

속성은 다음과 같습니다.

src : 이미지의 경로를 설정합니다.

width : 이미지의 너비를 설정합니다.

height : 이미지의 높이를 설정합니다. width 와 height 중 하나만 설정하면 나머지는 자동으로 비율에 맞춰 크기가 결정됩니다.

alt : 이미지가 나오지 않을 경우 이미지 대신 나타낼 문자열을 설정합니다.

title : 이미지 위에 마우스 커서를 올려 놓으면  나타나는 문자열을 설정합니다.

align : top, middle, bottom 을 지정하면 이미지 기준으로 옆의 글자들의 위치가 변경됩니다. left, right 를 지정하면 이미지 자체가 왼쪽 또는 오른쪽으로 정렬됩니다.

border : 이미지의 테두리선의 두께를 설정합니다.

bspace : 이미지의 좌우여백을 설정합니다.

vspace : 이미지의 상하여백을 설정합니다.

 

 

 

실습하기 전에 실습용 html 파일을 저장하는 위치에 image 라는 이름으로 폴더를 하나 만듭니다.

그리고 그 폴더 안에 아무 이미지 파일을 배경.jpg 라는 파일로 저장합니다.

그리고 나서 다음 실습을 따라하시면 오류없이 화면에 이미지가 잘 출력될 것입니다.

 

- 경로명 표시 방법 -

1. 현재폴더 : .

2. 상위폴더 : ..

3. 최상위펄더 : /

4. 하위폴더 : 폴더명

 

ex) ../그림파일명.확장자 - 상위 폴더
 /그림파일명.확장자 - 최상위 폴더

 

ex) img태그.html