<img> 태그

img 태그는 웹 페이지에 이미지를 삽입할 때 사용하는 태그예요.

img 태그의 핵심 속성으로 src, alt, width, height가 있어요.

이미지의 주소(URL)를 지정하는 필수 속성이에요. URL은 동일한 웹 사이트 내 다른 이미지를 가리키거나, 외부 웹 사이트에 호스팅된 이미지를 가리킬 수 있어요. 이 속성 없이 <img> 태그를 사용하면 이미지가 표시되지 않아요.

복사
<img src="https://example.com/myimage.jpg" />

이미지의 대체 텍스트를 나타내는 속성이에요. 이미지 로딩에 실패한 경우를 대비하거나, 시각 장애인을 위한 음성 서비스를 제공하기 위한 "대체 텍스트(alternative text)"로 사용해요. 필수적인 속성은 아니지만, 웹 접근성 향상에 중요한 요소로 SEO (검색 엔진 최적화)에 필수적인 속성이에요.

복사
<img src="https://picsum.photos/300" alt="해질 무렵의 바다 경치" />

이미지의 너비와 높이를 지정하는 속성으로, 기본 단위는 픽셀(px)이에요.

복사
<img src="https://picsum.photos/300" width="300" height="200" />

1. src, alt 사용

복사
<img src="https://picsum.photos/300" alt="프로필 사진" />

2. width, height로 이미지 크기 지정

복사
<img
  src="https://picsum.photos/300"
  alt="랜덤 이미지"
  width="200"
  height="150"
/>

• 웹 페이지에 이미지를 삽입하려면 <img> 태그를 사용해요.

• src 속성을 통해 이미지의 주소(URL)를 지정해요.

• alt 속성은 이미지의 설명이나, 이미지가 표시되지 않을 때 사용자에게 보여줄 텍스트를 제공해요.

• 이미지의 크기를 조절하려면 width와 height 속성을 활용해요.