이미지 표시하기

이미지태그

img 태그는 이미지를 표시할 때 사용하는 태그이다.
단일 태그로써, 닫는 태그를 필요로 하지 않는다!
콘텐츠 대신 표시할 이미지에 대한 정보를 속성으로 지정해주어야 한다!

<img src="표시할 이미지파일" alt="이미지설명" />

표시할 이미지 지정

img 태그의 src속성은 표시할 이미지의 위치정보와 파일명을 입력받는 속성이다. 즉, 이미지의 url을 입력받는다!
서버에 위치한 이미지 파일, 내 컴퓨터에 저장된 이미지 파일도 가능!

url이란 이미지가 어디에 있는지 알려주기 위해 사용하는 규약(형식)이다!

이미지 설명(alt)의 중요성

alt는 alternatvie의 약자로 대체 텍스트 역할을 한다.
이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신에 대체 텍스트가 표시된다.
alt를 사용하면 이미지를 볼 수 없는 시각장애인에게 웹페이지를 서비스해야 하는 상황에 대한 대비가 가능하다!!(음성인식기가 이미지 대신 이를 활용)

이미지 크기 조절하기

img 태그를 통해 이미지를 표시할 때는 이미지가 표시될 크기를 지정할 수 있다.
이때 너비와 높이를 각각 지정할 수 있다. 단위 없이 정수 값만 지정된다.

<img src="표시할 이미지파일" alt="이미지설명" width="너비값" height="높이값"/>

이때 너비와 높이는 각각 픽셀(px) 단위로 적용된다.
크기를 정해주지 않으면 이미지 원본파일의 사이즈로 적용됨!

내용정리

• 이미지를 표시할 때는 닫는 태그가 없어도 되는 img 태그를 사용한다.
• src속성은 이미지의 url을 입력받는 속성이다.
• alt속성은 대체 텍스트를 입력받는다. 이미지 유실 상황에 대응할 수 있다.
• width와 height은 각각 이미지의 너비와 높이를 입력받는 속성이다.