7. 이미지 삽입 태그 <img>

01. <img>태그

웹 문서에서 이미지를 삽입할 때는 <img>태그를 사용합니다.

<img>태그는 종료 태그 없이 단독으로 사용하며, 필수 속성인 'src' 속성을 써 주어야 이미지가 삽입됩니다.

HTML5에서 지원하는 속성

속성	값	설명
alt	text	이미지의 대체 텍스트 지정
crossorigin	anonymous/use-credentials	타 사이트의 이미지 사용 허용
height	pixels	이미지의 높이 지정
ismap	ismap	서버 측 이미지맵 지정
longdesc	URL	이미지에 대한 설명을 갖는 URL 지정
src	URL	삽입하고자 하는 이미지의 URL 지정
usemap	#mapname	클라이언트 측 이미지맵 지정
width	pixels	이미지의 폭 지정

HTML5에서 지원하지 않는 속성

속성	값	설명
align	left/right/top/middle/bottom	이미지의 정렬 지정
border	pixels	이미지의 테두리 너비 지정
hspace	pixels	이미지의 좌/우 여백 지정
vspace	pixels	이미지의 상/하 여백 지정

* src 속성의 이미지 위치 지정 방식

- 절대 경로 : 웹에서 이미지를 가져오거나, 이미지의의 절대적인 위치를 표현합니다. 

ex) src="http://example.com/image.gif"

- 상대 경로 : HTML 문서와 이미지 같의 상대적인 위치를 표현합니다. 

일반적으로는 절대 경로보단 상대 경로를 더 많이 사용합니다.

만약 현재 폴더 내에서 이미지를 찾고 싶으면 './'를 사용하고(생략 가능), 상위 폴더에 있는 이미지를 찾고 싶으면 '../'를 사용합니다.

ex) src="../images/image.gif" => 현재 HTML 문서가 있는 위치의 한 단계 상위 폴더에서 images 폴더를 찾아 그 안의 image.gif 파일을 불러옵니다.

* 대체 텍스트에 대한 가이드라인

- 이미지에 정보가 포함되어 있으면 'alt'속성의 값으로 그 이미지에 대한 설명을 작성해야 합니다.

- 이미지가 장식용으로 사용되었으면 alt=""이라고 작성하는게 좋습니다.

- 이미지가 <a>태그 안에 있으면 링크가 어디로 이동하는지 설명해야 합니다.

02. <img>태그의 사용법

1) 작업 파일이 들어있는 폴더에 들어가서 바로 'images'라는 폴더를 생성합니다.

2) 인터넷으로 들어가서 아무 사진이나 하나를 'images'폴더 안에 다운받습니다.

3) html 편집기를 열어 다음과 같이 입력해줍니다. (src속성의 값으로 올바른 URL을 입력하지 않으면 이미지가 뜨지 않으니 경로를 잘 확인해서 작성합니다.)

4) 실행 결과를 확인합니다. 태그 안에서 'width/height'속성을 지정해주지 않았기 때문에 이미지의 원본 크기 그대로 나온 것을 확인할 수 있습니다.

5) 이번엔 이미지의 크기도 조정해 볼까요? 835x626 픽셀이었던 이미지의 가로를 500 픽셀로 변경해 보겠습니다. 아까 작성했던 코드에 width="500"을 추가로 입력합니다.

6) 이미지의 크기가 아까보다 작아진 것을 확인해 볼 수 있습니다. (이미지 크기 조정 시 width/height 픽셀 값을 마음대로 지정해버리면 비율이 안 맞는 경우가 발생하기 때문에, 일반적으로 width나 height중 하나의 값만 입력하는 것이 좋습니다.)