[9. 이미지 태그(IMG)

이미지 태그(IMG Tag)

이미지를 출력할 때 사용하는 태그입니다.

 

 

※ 사용 방법

<img src="이미지 주소 값">

 

img 태그만으로는 이미지의 주소 값을 모르기 때문에 이미지를 출력할 수 없습니다.

기본 태그로는 정보가 부족하므로 주소 값을 불러오는 src 속성을 같이 사용합니다.

 

 

 

 

 

이미지 태그 표현

태그를 사용하기 전에 무료로 이미지를 제공해주는 사이트에서 이미지를 다운로드해 봅시다.

https://unsplash.com/ 

 

 

다운로드 한 이미지와 해당 이미지를 출력할 소스코드 파일의 경로를 같은 디렉터리에 위치하게 합니다.

 

 

이미지 주소 값과, width 속성을 이용해 원본 이미지를 35% 크기로 축소합니다.

 

 

웹 페이지 화면에 이미지가 정상적으로 출력됩니다.

이미지가 같은 경로에 위치하지 않은 경우에는 이미지의 주소 값을 이용해 출력합니다.

 

 

다운로드할 이미지를 마우스 우클릭한 후, 주소를 복사합니다.

 

 

이미지의 주소 값을 src 속성에 붙여 넣습니다.

 

 

이미지가 소스코드 파일과 다른 경로에 있어도, 이미지의 주소 값만 정확하다면 정상적으로 출력합니다.