HTML img 태그 웹 페이지에 이미지를 표시하는 데 사용됩니다. HTML img 태그는 속성만 포함하는 빈 태그이며 HTML 이미지 요소에는 닫는 태그가 사용되지 않습니다.

HTML 이미지의 예를 살펴보겠습니다.

 <h2>HTML Image Example</h2> <img src="//techcodeview.com/img/html-tutorial/39/html-image.webp" alt="Good Morning Friends"> 

산출:

HTML img 태그의 속성

src와 alt는 HTML img 태그의 중요한 속성입니다. HTML 이미지 태그의 모든 속성은 다음과 같습니다.

1) 원본

이미지의 소스나 경로를 설명하는 필수 속성입니다. 서버에서 이미지를 찾을 위치를 브라우저에 지시합니다.

이미지의 위치는 동일한 디렉터리 또는 다른 서버에 있을 수 있습니다.

2) 모든 것

alt 속성은 이미지를 표시할 수 없는 경우 이미지에 대한 대체 텍스트를 정의합니다. alt 속성의 값은 이미지를 단어로 설명합니다. alt 속성은 SEO 전망에 좋은 것으로 간주됩니다.

3) 폭

이미지를 표시하기 위한 너비를 지정하는 데 사용되는 선택적 속성입니다. 지금은 권장되지 않습니다. width 속성 대신 CSS를 적용해야 합니다.

4) 키

h3은 이미지의 높이입니다. HTML 높이 속성은 iframe, 이미지 및 개체 요소도 지원합니다. 지금은 권장되지 않습니다. height 속성 대신 CSS를 적용해야 합니다.

img 태그와 함께 높이 및 너비 속성 사용

웹 페이지에 이미지를 삽입하는 방법에 대해 배웠습니다. 이제 요구 사항에 따라 이미지를 표시하기 위해 높이와 너비를 지정하려면 이미지의 높이와 너비 속성을 사용하여 설정할 수 있습니다.

예:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

산출:

참고: 항상 높이와 너비가 포함된 이미지를 삽입하십시오. 그렇지 않으면 웹페이지에 표시되는 동안 깜박일 수 있습니다.

Alt 속성 사용

Alt 속성을 사용할 수 있습니다. 꼬리표. 브라우저에 이미지를 표시할 수 없는 경우 대체 텍스트가 표시됩니다. 다음은 Alt 속성의 예입니다.

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

산출:

다른 디렉토리/폴더에서 이미지를 가져오는 방법은 무엇입니까?

웹에 이미지를 삽입하려면 해당 이미지가 HTML 파일을 저장한 폴더에 있어야 합니다. 그러나 어떤 경우에는 다른 디렉토리에서 이미지를 사용할 수 있는 경우 다음과 같이 이미지에 액세스할 수 있습니다.

위의 명령문에서 우리는 로컬 디스크 E------>images 폴더------>img/html-tutorial/39/html-image-2.webp에 이미지를 넣었습니다.

참고: src URL이 부정확하거나 철자가 틀리면 웹페이지에 이미지가 표시되지 않으므로 올바른 URL을 입력하십시오.

사용 링크로 태그하기

이미지를 다른 페이지에 링크하거나 이미지를 링크로 사용할 수도 있습니다. 이렇게하려면 태그 안에 꼬리표.

예:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp"> 

산출:

지원 브라우저

요소	크롬	즉	파이어폭스	오페라	원정 여행
	예	예	예	예	예