이미지 표시하기

img 태그

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

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

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

img 태그의 alt 속성은 대체 텍스트 역할을 한다. 이미지가 로딩되기 전이나 로딩에 실패한 경우 이미지 대신 대체 텍스트가 표시된다. alt를 사용하면 시각장애인에게 웹페이지를 서비스 하는 상황에 대한 대비가 가능하다.

이미지 크기 조정하기

img 태그를 이용해 이미지를 표시할 때 이미지의 크기를 지정할 수 있다. 너비와 높이를 각각 지정할 수 있으며 단위 없이 정수 값만 지정한다. 이때 너비와 높이는 각각 픽셀 단위로 적용된다.

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

학습한 인프런 강의