Html 이미지 태그 <img>

웹페이지에 이미지를 넣는 방법

• 태그명은 img입니다.
• html2부터 시작된 태그이다.

img 태그 형식

<img src="이미지 파일명" width="이미지 폭 지정" height="이미지 높이 지정" alt="대체 텍스트" title="도움말">

<img src="image.jpg" width="200" height="200" alt="개구리 이미지" title="청개구리 3마리">

img 태그 속성

• width는 이미지의 가로폭을 지정해 줍니다.
  with만 지정해주면 세로 폭은 가로폭 비율에 맞게 세로 폭이 자동으로 변경됩니다.
• height는 이미지의 세로 폭을 지정해 줍니다.
  height만 지정해주면 가로폭은 세로폭 비율에 맞게 가로폭이 자동으로 변경됩니다.
• alt는 alternative text의 약자이다.
  이미지가 없을 때 출력해주는 대체 텍스트입니다.
  시각장애인 같은 경우 이미지를 볼 수 없기 때문에 alt를 이용해서 이미지 정보를 적어주면 웹에 있는 정보를 보는데 도움을 받기 때문에 alt 속성 값을 꼭 쓰는 것이 좋습니다.
• title은 이미지에 마우스를 올려놓았을 때 도움말을 나오게 해주는 속성입니다.

예제

무료 이미지 : 픽사베이는 저작권에 구애받지 않고 사용할 수 있는 이미지가 많이 있습니다.
픽사베이에서 개구리 사진을 한 장 받아서 넣어보겠습니다.

<img src="frog.jpg" alt="개구리 세마리" title="개구리 세마리">

개구리 이미지