<img/> HTML 태그에서 어떤 ATTRIBUTES를 사용해야 하는 경우

HTML 이미지 요소()는 문서에 이미지를 삽입하는 데 사용됩니다. 이것은 자체 폐쇄 요소입니다.

속성

대체 || 이 속성은 이미지에 대한 간단한 설명을 추가하는 데 사용됩니다.

<img src="./img/smiley.jpg"/ alt="Yellow smile emoji">

src || 이 속성은 이미지의 URL을 추가하는 데 사용됩니다. HTML은 이 속성의 값을 사용하여 이미지를 로드합니다. URL은 상대적이거나 절대적일 수 있습니다.

<img src="./img/smiley.jpg"/> 
 -- OR --
<img src="yourdomain.in/img/smiley.jpg"/>

높이와 너비 || 이러한 속성은 이미지의 높이와 너비를 설정하는 데 사용됩니다. 값은 픽셀 단위의 숫자여야 합니다. 지정된 경우 이미지에 필요한 공간은 페이지가 로드될 때 예약됩니다. 그렇지 않으면 브라우저는 크기를 알지 못하며 이미지가 로드된 후 페이지 레이아웃이 변경됩니다.

<img src="..." alt="..." height="25px" width="50px"/>

이스맵 || 이 속성은 이미지의 클릭 좌표를 URL 쿼리 문자열로 서버에 보내고 싶을 때 사용합니다. 이 속성은 값 없이 사용됩니다. 더 나은 이해를 위해 this 데모를 볼 수 있습니다.

<img src="..." alt="..." ismap/>

유스맵 || 이 속성은 HTML < map > 태그와의 연관성을 표시하는 데 사용되며, 이미지에서 클릭 가능한 영역을 추가하기 위해 < area/ > 태그와 함께 사용됩니다. 맵의 name 속성 값을 값으로 취합니다.

<img src="..." alt="..." usemap="#mapname"/>

<map name="mapname">
    <area ... >
    <area ... >
</map>

교차 출처 || 이 속성은 타사 서버에서 제공되는 이미지를 포함할 때 사용됩니다. 이 속성은 값 없이도 사용됩니다.

<img crossorigin src="..." alt="..."/>

크기와 srcset || 이 두 속성은 일반적으로 함께 사용되기 때문에 함께 사용됩니다. sizes는 작은 화면에서 이미지를 조정하는 것과 같이 더 반응적인 이미지를 만드는 데 사용되며 srcset는 모바일 장치의 저해상도 이미지와 큰 화면이 있는 장치의 고해상도 이미지와 같은 다양한 상황에서 사용할 이미지의 여러 URL을 설정하는 데 사용됩니다. .
이러한 속성이 어떻게 작동하는지 보려면 무료로 방문dofactory.com할 수 있습니다.

참고 - img 태그에는 최소한 src 및 alt 속성이 있어야 합니다.

이 외에도 id, class, title, tabindex, style 등과 같은 전역 속성을 사용할 수도 있습니다.