[VScode]img 태그

HyperText  Markup  Language

 

⊙ img 태그 : 이미지를 삽입하는 태그로 src 속성과 같이 사용한다.

src 는 source 의 약자

<img src="URL">

 

파일명 : img.html

픽사베이에서 무료 사용 할 수 있는 이미지를 다운 받을 수 있다.

https://pixabay.com/ko/

 

다운 받은 사진 파일을 프로젝트 폴더로 이동시킨다.

 

img 태그는 닫지 않아도 되며 속성뒤에 파일명을 넣어준다. 

<img src="covid.jpg">

이미지가 출력되는 것을 볼 수 있다.

 

 

⊙ 이미지 크기 변경하기 (width, height)

<img src="covid.jpg" width="100">

100 픽셀 크기로 줄어드는 것을 볼 수 있다.

 

높이를 같이 변경하고 싶으면 height 값을 정해주면 된다.

<img src="covid.jpg" width="100" height="300">

하지만 원본이미지 비율과 달라 이미지가 왜곡된다

원본 비율과 동일한 변경을 원하면 width(가로) 또는 height(높이) 중 한개만 지정해주면 된다. 

 

 

⊙ alt 속성값  

: 인터넷 접속 지연 또는 이미지 파일 오류 등의 이유로 이미지가 출력되지 않을 경우 alt 속성값이 표시된다.

alternative text 의 약자

이미지 파일 이름을 바꾸게 되면 이미지 출력이 어렵게 된다. 

<img src="covid3.jpg" height="300" alt="covid19">

 

 

⊙ title 속성

: 이미지에 마우스를 올리면 설정한 도움말이 나온다.

<img src="covid.jpg" height="300" alt="covid19" title="covid19">